Skip to content

Commit

Permalink
fix: fixed bugs on mobile nav
Browse files Browse the repository at this point in the history
  • Loading branch information
@VineeTagarwaL-code
VineeTagarwaL-code committed Sep 29, 2024
1 parent 527f90b commit 2246faa
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 84 deletions.
1 change: 1 addition & 0 deletions src/config/app.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export const ADMIN_ROLE = 'ADMIN';
export const USER_ROLE = 'USER';
export const JOBS_PER_PAGE = 10;
export const DEFAULT_PAGE = 1;
129 changes: 70 additions & 59 deletions src/layouts/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,12 @@ import {
import icons from '@/lib/icons';
export const CompanyLogo = () => {
return (
<div className="flex items-center gap-2">
<div
className="flex items-center gap-2 cursor-pointer"
onClick={() => {
window.location.href = '/';
}}
>
<Image
src={'/main.svg'}
alt="100xJobs"
Expand Down Expand Up @@ -95,66 +100,72 @@ const Header = () => {
)}
</button>
)}

<div className="md:hidden flex justify-center ml-3">
<MobileNav />
</div>
</div>
{session.status === 'loading' ? (
<Skeleton className="h-8 w-8 rounded-full" />
) : session.status === 'authenticated' ? (
<>
<DropdownMenu open={open} onOpenChange={setOpen}>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
className="relative h-8 w-8 rounded-full"
>
<Avatar className="h-8 w-8">
<AvatarImage
src={
session.data.user.image
? session.data.user.image
: ''
}
/>
<AvatarFallback>
{getNameInitials(session.data.user.name)}
</AvatarFallback>
</Avatar>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="end" forceMount>
<DropdownMenuItem>
<icons.profile className="mr-2 h-4 w-4" />
<span>Profile</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => {
signOut();
}}
<div className="hidden md:block">
{session.status === 'loading' ? (
<Skeleton className="h-8 w-8 rounded-full" />
) : session.status === 'authenticated' ? (
<>
<DropdownMenu open={open} onOpenChange={setOpen}>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
className="relative h-8 w-8 rounded-full"
>
<Avatar className="h-8 w-8">
<AvatarImage
src={
session.data.user.image
? session.data.user.image
: ''
}
/>
<AvatarFallback>
{getNameInitials(session.data.user.name)}
</AvatarFallback>
</Avatar>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-56"
align="end"
forceMount
>
<icons.logout className="mr-2 h-4 w-4" />
<span>Log out</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</>
) : (
<div>
<Button
className="rounded-lg"
size="sm"
variant="default"
onClick={() => {
router.push('/signin');
}}
>
Login
</Button>
</div>
)}
<DropdownMenuItem>
<icons.profile className="mr-2 h-4 w-4" />
<span>Profile</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => {
signOut();
}}
>
<icons.logout className="mr-2 h-4 w-4" />
<span>Log out</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</>
) : (
<div>
<Button
className="rounded-lg"
size="sm"
variant="default"
onClick={() => {
router.push('/signin');
}}
>
Login
</Button>
</div>
)}
</div>

<div className="md:hidden flex justify-center ml-3">
<MobileNav />
</div>
</div>
</div>
</nav>
Expand Down
50 changes: 25 additions & 25 deletions src/layouts/mobile-nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ import { signOut, useSession } from 'next-auth/react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { CompanyLogo } from './header';
import spotifyLogo from '../../public/spotify.svg';
import Image from 'next/image';
import { ADMIN_ROLE } from '@/config/app.config';
import { ADMIN_ROLE, USER_ROLE } from '@/config/app.config';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { getNameInitials } from '@/lib/utils';
export function MobileNav() {
const router = useRouter();
const session = useSession();
Expand Down Expand Up @@ -84,26 +84,25 @@ export function MobileNav() {
</div>
) : (
<div className="w-12 h-12 rounded-full flex items-center justify-center border-none ouline-none">
<Image
width={400}
height={400}
className="object-cover w-full h-full"
src={spotifyLogo}
alt="company-logo"
/>
<Avatar className="h-8 w-8">
<AvatarImage
src={
session.data.user.image ? session.data.user.image : ''
}
/>
<AvatarFallback>
{getNameInitials(session.data.user.name)}
</AvatarFallback>
</Avatar>
</div>
)}
<div className="flex flex-col items-start justify-center px-2 mt-2">
<p className="font-semibold text-lg dark:text-[#F8FAFC] text-[#020817]">
{session.data?.user.role === ADMIN_ROLE
? 'Harkirat Singh'
: 'User'}
{session.data?.user.name}
</p>
<div className="flex items-center text-[#64748B] dark:text-[#94A3B8]">
<p className="py-1 text-sm font-medium">
{session.data?.user.role === ADMIN_ROLE
? '[email protected]'
: '[email protected]'}
{session.data?.user.email}
</p>
</div>
</div>
Expand All @@ -115,22 +114,23 @@ export function MobileNav() {
<Item {...item} key={item.id} />
))}

<Link href={'/create'} className="">
<Link href={'/signin'} className="">
<SheetClose className="w-full">
<div className="w-full rounded-lg p-2 my-2 bg-[#3259E8] hover:bg-[#3e63e9] text-white font-medium ">
Post a job
Login
</div>
</SheetClose>
</Link>
</>
)}
{session.status !== 'loading' && session.data?.user && (
<>
{userNavbar.map((item) => (
<Item {...item} key={item.id} />
))}
</>
)}
{session.status !== 'loading' &&
session.data?.user.role === USER_ROLE && (
<>
{userNavbar.map((item) => (
<Item {...item} key={item.id} />
))}
</>
)}
{session.status !== 'loading' &&
session.data?.user.role === ADMIN_ROLE && (
<>
Expand Down
1 change: 1 addition & 0 deletions src/types/next-auth.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ declare module 'next-auth' {
interface Session {
user: {
id: string;
email: string;
role: string;
name: string;
isVerified: boolean;
Expand Down

0 comments on commit 2246faa

Please sign in to comment.