Skip to content

Commit

Permalink
Updated Navbar mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
AlexVOiceover committed Aug 6, 2024
1 parent 48210e4 commit a2e3e21
Show file tree
Hide file tree
Showing 5 changed files with 216 additions and 202 deletions.
79 changes: 42 additions & 37 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,43 +1,48 @@
import { BrowserRouter } from 'react-router-dom';
import { useEffect } from 'react';
import AppRoutes from './routes/AppRoutes';
import { Footer } from '@/components/Footer/Footer';
import NavBar from './components/NavBar/NavBar';
import { supabase } from './lib/supabaseClient';
import { AuthChangeEvent, Session } from '@supabase/supabase-js';
import { BrowserRouter } from 'react-router-dom'
import { useEffect } from 'react'
import AppRoutes from './routes/AppRoutes'
import { Footer } from '@/components/Footer/Footer'
import NavBar from './components/NavBar/NavBar'
import { supabase } from './lib/supabaseClient'
import { AuthChangeEvent, Session } from '@supabase/supabase-js'
import { AuthProvider } from './AuthContext';

function App() {
useEffect(() => {
const { data: authListener } = supabase.auth.onAuthStateChange(
(event: AuthChangeEvent, session: Session | null) => {
if (event === 'SIGNED_IN') {
// Handle sign in
console.log('User signed in:', session?.user)
// You might want to update your app state or context here
} else if (event === 'SIGNED_OUT') {
// Handle sign out
console.log('User signed out')
// You might want to clear user data from your app state or context here
}
}
)

return () => {
authListener.subscription.unsubscribe()
}
}, [])

useEffect(() => {
const { data: authListener } = supabase.auth.onAuthStateChange((event: AuthChangeEvent, session: Session | null) => {
if (event === 'SIGNED_IN') {
// Handle sign in
console.log('User signed in:', session?.user);
// You might want to update your app state or context here
} else if (event === 'SIGNED_OUT') {
// Handle sign out
console.log('User signed out');
// You might want to clear user data from your app state or context here
}
});

return () => {
authListener.subscription.unsubscribe();
};
}, []);

return (
<>
<BrowserRouter>
<div className='grid min-h-[100dvh] grid-rows-[auto_1fr_auto]'>
<NavBar />
<AppRoutes />
<Footer></Footer>
</div>
</BrowserRouter>
</>
);
return (
<>
<AuthProvider>
{' '}
{/* Wrap the entire app with AuthProvider */}
<BrowserRouter>
<div className='grid min-h-[100dvh] grid-rows-[auto_1fr_auto]'>
<NavBar />
<AppRoutes />
<Footer></Footer>
</div>
</BrowserRouter>
</AuthProvider>
</>
)
}

export default App;
export default App
10 changes: 9 additions & 1 deletion src/components/NavBar/MobileNavItems.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,15 @@ import { NavItemsProps, navItems } from './NavItems';
* The buttons are currently hardcoded but as these are unlikely to change, hopefully
* this isn't an issue.
*/
function MobileNavItems({ classNameValue, isLoggedIn }: NavItemsProps) {

// In MobileNavItems.tsx
interface MobileNavItemsProps {
classNameValue: string;
isLoggedIn: boolean;
}


function MobileNavItems({ classNameValue, isLoggedIn }: MobileNavItemsProps) {
return (
<NavigationMenu>
<NavigationMenuList className={classNameValue}>
Expand Down
64 changes: 27 additions & 37 deletions src/components/NavBar/NavBar.tsx
Original file line number Diff line number Diff line change
@@ -1,50 +1,40 @@
import { Link } from 'react-router-dom';
import { useState, useEffect } from 'react'; // Added useEffect
import { useMediaQuery } from 'react-responsive';
import NavItems from './NavItems';
import MobileNavItems from './MobileNavItems';
import { Button } from '../ui/button';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { FaBars } from 'react-icons/fa6';
import { getCurrentUser } from '@/lib/auth';
import { useAuth } from '@/AuthContext'; // Import useAuth

function NavBar() {
const isMobile = useMediaQuery({ maxWidth: 768 });
const [isLoggedIn, setIsLoggedIn] = useState(false);
const isMobile = useMediaQuery({ maxWidth: 768 });
const { isLoggedIn } = useAuth(); // Use the isLoggedIn state from AuthContext

// useEffect check user's login status on component mount
useEffect(() => {
const checkLoginStatus = async () => {
const user = await getCurrentUser();
setIsLoggedIn(!!user);
};
checkLoginStatus();
}, []);

return (
<header className='w-full flex items-center justify-between p-4 sticky top-0 bg-white z-10 shadow-md'>
<Link to='/' className='shrink-0'>
<img src='./logo.png' className='size-20' alt='Nisa Invest' />
</Link>
{isMobile ? (
<Sheet>
<SheetTrigger asChild>
<Button variant='outline' size='icon'>
<FaBars className='h-6 w-6' />
</Button>
</SheetTrigger>
<SheetContent side='right'>
<MobileNavItems
classNameValue={'flex-col gap-2'}
isLoggedIn={isLoggedIn}
/>
</SheetContent>
</Sheet>
) : (
<NavItems classNameValue='' isLoggedIn={isLoggedIn} />
)}
</header>
);
return (
<header className='w-full flex items-center justify-between p-4 sticky top-0 bg-white z-10 shadow-md'>
<Link to='/' className='shrink-0'>
<img src='./logo.png' className='size-20' alt='Nisa Invest' />
</Link>
{isMobile ? (
<Sheet>
<SheetTrigger asChild>
<Button variant='outline' size='icon'>
<FaBars className='h-6 w-6' />
</Button>
</SheetTrigger>
<SheetContent side='right'>
<MobileNavItems
classNameValue={'flex-col gap-2'}
isLoggedIn={isLoggedIn}
/>
</SheetContent>
</Sheet>
) : (
<NavItems classNameValue='' isLoggedIn={isLoggedIn} />
)}
</header>
);
}

export default NavBar;
174 changes: 74 additions & 100 deletions src/components/NavBar/NavItems.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';
import { Button, buttonVariants } from '../ui/button';
import { useAuth } from '@/AuthContext';
import { signOut } from '@/lib/auth';

export interface NavItemsProps {
Expand Down Expand Up @@ -41,103 +42,76 @@ export const navItems = [
},
];

function NavItems({ classNameValue, isLoggedIn }: NavItemsProps) {
const handleLogout = async () => {
try {
await signOut();
// Optionally, you can redirect the user or update the UI here
// 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>
{item.items.map((subItem) => (
<li key={subItem.name}>
<Link
to={subItem.path}
className={buttonVariants({ variant: 'link' })}
>
<NavigationMenuLink>{subItem.name}</NavigationMenuLink>
</Link>
</li>
))}
</ul>
</NavigationMenuContent>
</>
) : (
<Link
to={item.path}
className={buttonVariants({ variant: 'link' })}
>
<NavigationMenuLink>{item.name}</NavigationMenuLink>
</Link>
)}
</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>
);
}

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

const handleLogout = async () => {
try {
await signOut();
setIsLoggedIn(false);
// Optionally, you can redirect the user or update the UI here
window.location.href = '/'; // Redirect to home page after logout
} catch (error) {
console.error('Logout failed:', error);
}
};

return (
<NavigationMenu>
<NavigationMenuList className={classNameValue}>
{/* ... keep the existing navItems mapping */}

{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>
);
}

export default NavItems;
Loading

0 comments on commit a2e3e21

Please sign in to comment.