initial commit

2025-08-05 12:35:40 +07:00
commit fffa2ead5c
1069 changed files with 118056 additions and 0 deletions
@@ -0,0 +1,150 @@
+// 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-calendar',
+    title: 'Calendar',
+    subtitle: 'Appointments'
+  },
+  {
+    url: '/apps/invoice/list',
+    icon: 'tabler-file-dollar',
+    title: 'Invoice App',
+    subtitle: 'Manage Accounts'
+  },
+  {
+    url: '/apps/user/list',
+    icon: 'tabler-user',
+    title: 'Users',
+    subtitle: 'Manage Users'
+  },
+  {
+    url: '/apps/roles',
+    icon: 'tabler-users-group',
+    title: 'Role Management',
+    subtitle: 'Permissions'
+  },
+  {
+    url: '/',
+    icon: 'tabler-device-desktop-analytics',
+    title: 'Dashboard',
+    subtitle: 'User Dashboard'
+  },
+  {
+    url: '/pages/account-settings',
+    icon: 'tabler-settings',
+    title: 'Settings',
+    subtitle: 'Account Settings'
+  }
+]
+
+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