Skip to content

Commit

Permalink
style on logout button
Browse files Browse the repository at this point in the history
  • Loading branch information
AlexVOiceover committed Aug 6, 2024
1 parent 55181f0 commit 67c9586
Showing 1 changed file with 134 additions and 128 deletions.
262 changes: 134 additions & 128 deletions src/components/NavBar/NavItems.tsx
Original file line number Diff line number Diff line change
@@ -1,138 +1,144 @@
import { Link } from 'react-router-dom';
import { Link } from 'react-router-dom'
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';
import { Button, buttonVariants } from '../ui/button';
import { useAuth } from '@/AuthContext';
import { signOut } from '@/lib/auth';
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from '@/components/ui/navigation-menu'
import { Button, buttonVariants } from '../ui/button'
import { useAuth } from '@/AuthContext'
import { signOut } from '@/lib/auth'

export interface NavItemsProps {
classNameValue: string;
isLoggedIn: boolean;
classNameValue: string
isLoggedIn: boolean
}

export const navItems = [
{ name: 'Home', path: '/' },
{
name: 'About',
items: [
{ name: 'Our Story', path: '/about' },
{ name: 'Meet the Planners', path: '/advisors' },
],
},
{
name: 'Knowledge Hub',
items: [
{ name: 'Book a Session', path: '/booking' },
{ name: 'Resources', path: '/resources' },
{ name: 'Podcast', path: '/podcast' },
{ name: 'FAQs', path: '/faq' },
{ name: 'Contact Us', path: '/contact' },
],
},
];
{ name: 'Home', path: '/' },
{
name: 'About',
items: [
{ name: 'Our Story', path: '/about' },
{ name: 'Meet the Planners', path: '/advisors' },
],
},
{
name: 'Knowledge Hub',
items: [
{ name: 'Book a Session', path: '/booking' },
{ name: 'Resources', path: '/resources' },
{ name: 'Podcast', path: '/podcast' },
{ name: 'FAQs', path: '/faq' },
{ name: 'Contact Us', path: '/contact' },
],
},
]

function NavItems({ classNameValue, isLoggedIn }: NavItemsProps) {
const { setIsLoggedIn } = useAuth();

const handleLogout = async () => {
try {
await signOut();
setIsLoggedIn(false);
window.location.href = '/'; // Redirect to home page after logout
} catch (error) {
console.error('Logout failed:', error);
}
};

return (
<NavigationMenu>
<NavigationMenuList className={classNameValue}>
{navItems.map((item) => (
<NavigationMenuItem key={item.name}>
{item.items ? (
<>
<NavigationMenuTrigger>{item.name}</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
{item.items.map((subItem) => (
<li key={subItem.name}>
<NavigationMenuLink asChild>
<Link to={subItem.path} className={buttonVariants({ variant: 'ghost' })}>
{subItem.name}
</Link>
</NavigationMenuLink>
</li>
))}
</ul>
</NavigationMenuContent>
</>
) : (
<NavigationMenuLink asChild>
<Link to={item.path} className={buttonVariants({ variant: 'ghost' })}>
{item.name}
</Link>
</NavigationMenuLink>
)}
</NavigationMenuItem>
))}

{isLoggedIn ? (
<>
<NavigationMenuItem>
<Link
to='/account'
className={buttonVariants({ variant: 'outline' })}
>
<NavigationMenuLink>Account</NavigationMenuLink>
</Link>
</NavigationMenuItem>
<NavigationMenuItem>
<Button
onClick={handleLogout}
className={buttonVariants({ variant: 'outline' })}
>
Log out
</Button>
</NavigationMenuItem>
</>
) : (
<>
<NavigationMenuItem>
<Link
to='/login'
className={buttonVariants({ variant: 'outline' })}
>
<NavigationMenuLink>Login</NavigationMenuLink>
</Link>
</NavigationMenuItem>
<NavigationMenuItem>
<Link
to='/signup'
className={buttonVariants({ variant: 'outline' })}
>
<NavigationMenuLink>Sign up</NavigationMenuLink>
</Link>
</NavigationMenuItem>
</>
)}

<NavigationMenuItem>
<Link
to='/corporate'
className={buttonVariants({ variant: 'outline' })}
>
<NavigationMenuLink>Book a Demo</NavigationMenuLink>
</Link>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
);
const { setIsLoggedIn } = useAuth()

const handleLogout = async () => {
try {
await signOut()
setIsLoggedIn(false)
// window.location.href = '/'; // Redirect to home page after logout
} catch (error) {
console.error('Logout failed:', error)
}
}

return (
<NavigationMenu>
<NavigationMenuList className={classNameValue}>
{navItems.map((item) => (
<NavigationMenuItem key={item.name}>
{item.items ? (
<>
<NavigationMenuTrigger>{item.name}</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className='grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]'>
{item.items.map((subItem) => (
<li key={subItem.name}>
<NavigationMenuLink asChild>
<Link
to={subItem.path}
className={buttonVariants({ variant: 'ghost' })}
>
{subItem.name}
</Link>
</NavigationMenuLink>
</li>
))}
</ul>
</NavigationMenuContent>
</>
) : (
<NavigationMenuLink asChild>
<Link
to={item.path}
className={buttonVariants({ variant: 'ghost' })}
>
{item.name}
</Link>
</NavigationMenuLink>
)}
</NavigationMenuItem>
))}

{isLoggedIn ? (
<>
<NavigationMenuItem>
<Link
to='/account'
className={buttonVariants({ variant: 'outline' })}
>
<NavigationMenuLink>Account</NavigationMenuLink>
</Link>
</NavigationMenuItem>
<NavigationMenuItem>
<Button
onClick={handleLogout}
className={buttonVariants({ variant: 'ghost' })}
>
Log out
</Button>
</NavigationMenuItem>
</>
) : (
<>
<NavigationMenuItem>
<Link
to='/login'
className={buttonVariants({ variant: 'outline' })}
>
<NavigationMenuLink>Login</NavigationMenuLink>
</Link>
</NavigationMenuItem>
<NavigationMenuItem>
<Link
to='/signup'
className={buttonVariants({ variant: 'outline' })}
>
<NavigationMenuLink>Sign up</NavigationMenuLink>
</Link>
</NavigationMenuItem>
</>
)}

<NavigationMenuItem>
<Link
to='/corporate'
className={buttonVariants({ variant: 'outline' })}
>
<NavigationMenuLink>Book a Demo</NavigationMenuLink>
</Link>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
)
}

export default NavItems;
export default NavItems

0 comments on commit 67c9586

Please sign in to comment.