mobile-nav

code100x · Sep 21, 2024 · 57332c6 · 57332c6
1 parent d6a4794
commit 57332c6
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 10 deletions.
diff --git a/src/layouts/header.tsx b/src/layouts/header.tsx
@@ -7,6 +7,7 @@ import { NavItem } from '@/components/navitem';
 import Image from 'next/image';
 import { Skeleton } from '@/components/ui/skeleton';
 import { ModeToggle } from '@/components/ui/theme-toggle';
+import { Button } from '@/components/ui/button';
 
 export const CompanyLogo = () => {
   return (
@@ -46,6 +47,11 @@ const Header = () => {
                 }
               })}
               <ModeToggle />
+              <Link href={'/create'}>
+                <Button className=" rounded bg-blue-800 dark:text-white">
+                  Post a Job
+                </Button>
+              </Link>
             </ul>
           </nav>
           <div className="sm:hidden flex justify-center">

diff --git a/src/layouts/mobile-nav.tsx b/src/layouts/mobile-nav.tsx
@@ -14,6 +14,7 @@ import { signOut, useSession } from 'next-auth/react';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import { CompanyLogo } from './header';
+import { Button } from '@/components/ui/button';
 
 export function MobileNav() {
   const router = useRouter();
@@ -55,11 +56,18 @@ export function MobileNav() {
           <CompanyLogo />
         </SheetHeader>
         <SheetDescription></SheetDescription>
-        <ul className="grid gap-2 text-sm lg:gap-6 justify-items-start">
+        <ul className="grid gap-4  text-sm lg:gap-6  py-2">
           {navbar.map((item) => (
             <Item {...item} key={item.id} />
           ))}
-          {session.status !== 'loading' && !session.data?.user && (
+          <Link href={'/create'}>
+            <SheetClose>
+              <Button className="w-80 rounded bg-blue-800 dark:text-white">
+                Post a Job
+              </Button>
+            </SheetClose>
+          </Link>
+          {/* {session.status !== 'loading' && !session.data?.user && (
             <>
               <li>
                 <Link
@@ -74,8 +82,8 @@ export function MobileNav() {
                   <SheetClose>Start Free</SheetClose>
                 </Link>
               </li>
-            </>
-          )}
+            </> 
+          )}*/}
           {session.status !== 'loading' && session.data?.user && (
             <>
               <li>
@@ -114,11 +122,13 @@ export function MobileNav() {
 const Item = ({
   path,
   label,
+  icon,
   roleRequired,
   isPrivate,
 }: {
   path: string;
   label: string;
+  icon: React.FC;
   roleRequired?: string;
   isPrivate?: boolean;
 }) => {
@@ -132,13 +142,15 @@ const Item = ({
   }
   if (session && roleRequired && session.data?.user.role !== roleRequired)
     return;
+  const IconComponent = icon;
   return (
     <li>
       <Link
         href={path}
         aria-selected={pathname === path}
-        className="transition-colors hover:text-foreground/80 text-foreground/60"
+        className="transition-colors hover:text-foreground/80 text-foreground/60 flex gap-2"
       >
+        <IconComponent />
         <SheetClose>{label}</SheetClose>
       </Link>
     </li>

diff --git a/src/lib/constant/app.constant.ts b/src/lib/constant/app.constant.ts
@@ -1,20 +1,29 @@
 import { IconProps } from '@/components/ui/icon';
 import APP_PATHS from '@/config/path.config';
+import { Contact, DollarSign, PackageSearch } from 'lucide-react';
 
 export const GITHUB_REPO = 'https://github.com/code100x/job-board';
-export const navbar = [
-  { id: 1, label: 'Explore Jobs', path: APP_PATHS.JOBS },
+interface NavbarItem {
+  id: number;
+  path: string;
+  label: string;
+  icon: React.FC;
+  roleRequired?: string;
+  isPrivate?: boolean;
+}
+export const navbar: NavbarItem[] = [
+  { id: 1, label: 'Explore Jobs', path: APP_PATHS.JOBS, icon: PackageSearch },
   {
     id: 2,
     label: 'Manage',
     path: APP_PATHS.MANAGE_JOBS,
     roleRequired: 'ADMIN',
+    icon: PackageSearch,
   },
   // todo: add actual path
-  { id: 3, label: 'Pricing', path: '/' },
-  { id: 4, label: 'Contact us', path: APP_PATHS.CONTACT_US },
+  { id: 3, label: 'Pricing', path: '/', icon: DollarSign },
+  { id: 4, label: 'Contact us', path: APP_PATHS.CONTACT_US, icon: Contact },
   /* { id: 5, label: 'FAQs', path: APP_PATHS.FAQS }, */
-  { id: 6, label: 'Post a Job', path: APP_PATHS.POST_JOB },
 ];
 
 export const socials: {