-
@ Marth
2024-08-09 17:28:22
```js
import React, { useRef } from 'react';
import Image from 'next/image';
import UserAvatar from './user/UserAvatar';
import MenuTab from '../menutab/MenuTab';
import { Menubar } from 'primereact/menubar';
import { Menu } from 'primereact/menu';
import { useRouter } from 'next/router';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
const Navbar = () => {
const router = useRouter();
const menu = useRef(null);
const navbarHeight = '60px';
const menuItems = [
{
label: 'Home',
icon: 'pi pi-home',
command: () => {
// Add your edit functionality here
}
},
{
label: 'Content',
icon: 'pi pi-video',
command: () => {
// Add your delete functionality here
}
},
{
label: 'Chat',
icon: 'pi pi-comment',
items: [
{
label: 'General',
icon: 'pi pi-hashtag',
command: () => {
// Add your edit functionality here
}
},
{
label: 'Nostr',
icon: 'pi pi-hashtag',
command: () => {
// Add your delete functionality here
}
},
{
label: 'Discord',
icon: 'pi pi-hashtag',
command: () => {
// Add your delete functionality here
}
},
{
label: 'Stackernews',
icon: 'pi pi-hashtag',
command: () => {
// Add your delete functionality here
}
}
]
}
];
const start = (
<div className='flex items-center'>
{/* <div className='hidden max-tab:block max-mob:block max-tab:px-6 max-mob:px-6'>
<i className="pi pi-bars text-xl pt-1"
onClick={(e) => menu.current.toggle(e)}></i>
<Menu model={menuItems} popup ref={menu} />
</div> */}
<div onClick={() => router.push('/')} className="flex flex-row items-center justify-center cursor-pointer">
<Image
alt="logo"
src="/plebdevs-guy.jpg"
width={50}
height={50}
className="rounded-full mr-2 max-tab:hidden max-mob:hidden"
/>
<h1 className="text-white text-xl font-semibold max-tab:text-2xl max-mob:text-2xl">PlebDevs</h1>
</div>
</div>
);
return (
<>
<div className='w-[100vw] h-fit'>
<Menubar
start={start}
end={UserAvatar}
className='px-[2%] py-8 bg-gray-800 border-t-0 border-l-0 border-r-0 rounded-none fixed z-10 w-[100vw] max-tab:px-[5%] max-mob:px-[5%]'
style={{ height: navbarHeight }}
/>
</div>
{/* Placeholder div with the same height as the Navbar */}
<div style={{ height: navbarHeight }}></div>
</>
);
};
export default Navbar;
```