151 lines
4.0 KiB
TypeScript
151 lines
4.0 KiB
TypeScript
// Next Imports
|
|
import Link from 'next/link'
|
|
import { useParams } from 'next/navigation'
|
|
|
|
// Third-party Imports
|
|
import classnames from 'classnames'
|
|
|
|
// Type Imports
|
|
import type { Locale } from '@configs/i18n'
|
|
import type { ShortcutsType } from '@components/layout/shared/ShortcutsDropdown'
|
|
import type { NotificationsType } from '@components/layout/shared/NotificationsDropdown'
|
|
|
|
// Component Imports
|
|
import NavToggle from './NavToggle'
|
|
import Logo from '@components/layout/shared/Logo'
|
|
import NavSearch from '@components/layout/shared/search'
|
|
import LanguageDropdown from '@components/layout/shared/LanguageDropdown'
|
|
import ModeDropdown from '@components/layout/shared/ModeDropdown'
|
|
import ShortcutsDropdown from '@components/layout/shared/ShortcutsDropdown'
|
|
import NotificationsDropdown from '@components/layout/shared/NotificationsDropdown'
|
|
import UserDropdown from '@components/layout/shared/UserDropdown'
|
|
|
|
// Hook Imports
|
|
import useHorizontalNav from '@menu/hooks/useHorizontalNav'
|
|
|
|
// Util Imports
|
|
import { horizontalLayoutClasses } from '@layouts/utils/layoutClasses'
|
|
import { getLocalizedUrl } from '@/utils/i18n'
|
|
|
|
// Vars
|
|
const shortcuts: ShortcutsType[] = [
|
|
{
|
|
url: '/apps/calendar',
|
|
icon: 'tabler-box',
|
|
title: 'Produk',
|
|
subtitle: 'Kelola Produk'
|
|
},
|
|
{
|
|
url: '/apps/invoice/list',
|
|
icon: 'tabler-file-dollar',
|
|
title: 'Pembelian',
|
|
subtitle: 'Kelola Pembelian'
|
|
},
|
|
{
|
|
url: '/apps/user/list',
|
|
icon: 'tabler-user',
|
|
title: 'Pengguna',
|
|
subtitle: 'Kelola Pengguna'
|
|
},
|
|
{
|
|
url: '/apps/vendor',
|
|
icon: 'tabler-users-group',
|
|
title: 'Vendor',
|
|
subtitle: 'Kelola Vendor'
|
|
},
|
|
{
|
|
url: '/',
|
|
icon: 'tabler-device-desktop-analytics',
|
|
title: 'Dashboard',
|
|
subtitle: 'User Dashboard'
|
|
},
|
|
{
|
|
url: '/apps/reports',
|
|
icon: 'tabler-settings',
|
|
title: 'Laporan',
|
|
subtitle: 'Lihat Laporan'
|
|
}
|
|
]
|
|
|
|
const notifications: NotificationsType[] = [
|
|
{
|
|
avatarImage: '/images/avatars/8.png',
|
|
title: 'Congratulations Flora 🎉',
|
|
subtitle: 'Won the monthly bestseller gold badge',
|
|
time: '1h ago',
|
|
read: false
|
|
},
|
|
{
|
|
title: 'Cecilia Becker',
|
|
avatarColor: 'secondary',
|
|
subtitle: 'Accepted your connection',
|
|
time: '12h ago',
|
|
read: false
|
|
},
|
|
{
|
|
avatarImage: '/images/avatars/3.png',
|
|
title: 'Bernard Woods',
|
|
subtitle: 'You have new message from Bernard Woods',
|
|
time: 'May 18, 8:26 AM',
|
|
read: true
|
|
},
|
|
{
|
|
avatarIcon: 'tabler-chart-bar',
|
|
title: 'Monthly report generated',
|
|
subtitle: 'July month financial report is generated',
|
|
avatarColor: 'info',
|
|
time: 'Apr 24, 10:30 AM',
|
|
read: true
|
|
},
|
|
{
|
|
avatarText: 'MG',
|
|
title: 'Application has been approved 🚀',
|
|
subtitle: 'Your Meta Gadgets project application has been approved.',
|
|
avatarColor: 'success',
|
|
time: 'Feb 17, 12:17 PM',
|
|
read: true
|
|
},
|
|
{
|
|
avatarIcon: 'tabler-mail',
|
|
title: 'New message from Harry',
|
|
subtitle: 'You have new message from Harry',
|
|
avatarColor: 'error',
|
|
time: 'Jan 6, 1:48 PM',
|
|
read: true
|
|
}
|
|
]
|
|
|
|
const NavbarContent = () => {
|
|
// Hooks
|
|
const { isBreakpointReached } = useHorizontalNav()
|
|
const { lang: locale } = useParams()
|
|
|
|
return (
|
|
<div
|
|
className={classnames(horizontalLayoutClasses.navbarContent, 'flex items-center justify-between gap-4 is-full')}
|
|
>
|
|
<div className='flex items-center gap-4'>
|
|
<NavToggle />
|
|
{/* Hide Logo on Smaller screens */}
|
|
{!isBreakpointReached && (
|
|
<Link href={getLocalizedUrl('/', locale as Locale)}>
|
|
<Logo />
|
|
</Link>
|
|
)}
|
|
</div>
|
|
|
|
<div className='flex items-center'>
|
|
<NavSearch />
|
|
<LanguageDropdown />
|
|
<ModeDropdown />
|
|
<ShortcutsDropdown shortcuts={shortcuts} />
|
|
<NotificationsDropdown notifications={notifications} />
|
|
<UserDropdown />
|
|
{/* Language Dropdown, Notification Dropdown, quick access menu dropdown, user dropdown will be placed here */}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default NavbarContent
|