fix: fixed the mobile nav after sign in

Author: salmansheri

src/app/race/no-snippet.tsx

@@ -9,13 +9,18 @@ interface NoSnippetProps {
 }
 
 export default function NoSnippet({ message, language }: NoSnippetProps) {
-  const formattedLanguage = snippetLanguages.find(snippet => snippet.value === language)?.label ?? language;
+  const formattedLanguage =
+    snippetLanguages.find((snippet) => snippet.value === language)?.label ??
+    language;
   return (
     <div className="flex flex-col gap-4 justify-start">
-      <Heading title={`No ${formattedLanguage} snippet found`} description={message}/>
+      <Heading
+        title={`No ${formattedLanguage} snippet found`}
+        description={message}
+      />
       <Link href={"/add-snippet"}>
         <Button>Create New Snippet</Button>
       </Link>
     </div>
-  )
+  );
 }

src/app/race/practice/page.tsx

@@ -38,7 +38,9 @@ async function getSearchParamSnippet(snippetId: string | string[]) {
 
 export default async function PracticeRacePage({
   searchParams,
-}: { searchParams: RacePageSearchParams }) {
+}: {
+  searchParams: RacePageSearchParams;
+}) {
   const user = await getCurrentUser();
   const snippet =
     (await getSearchParamSnippet(searchParams.snippetId)) ??

src/components/header.tsx

@@ -14,7 +14,7 @@ export async function Header() {
         <div className="flex-1">
           <MainNav items={siteConfig.getHeaderLinks(!!user)} />
         </div>
-        <MobileNav />
+        <MobileNav user={user} />
         <nav className="items-center hidden space-x-4 md:flex">
           <UserDropdown user={user} />
           <ModeToggle />

src/components/mobile-nav.tsx

@@ -12,8 +12,16 @@ import Link, { LinkProps } from "next/link";
 import { ModeToggle } from "./mode-toggle";
 import { useRouter } from "next/navigation";
 import { useSession } from "next-auth/react";
+import type { User } from "next-auth";
+import { UserRole } from "@prisma/client";
 
-export function MobileNav() {
+interface MobileNavProps {
+  user?: User & {
+    role: UserRole;
+  };
+}
+
+export function MobileNav({ user }: MobileNavProps) {
   const [open, setOpen] = useState(false);
   const isLoggedIn = !!useSession().data;
 
@@ -32,7 +40,7 @@ export function MobileNav() {
         <SheetContent side="right" className="w-[300px] sm:w-[540px]">
           <ScrollArea className="my-4 h-[calc(100vh-9rem)] pb-10">
             <div className="flex flex-col items-center justify-center gap-10 py-2">
-              <UserDropdown />
+              <UserDropdown user={user} />
               <nav className="flex flex-col items-center justify-center flex-1 space-y-4">
                 {siteConfig.getHeaderLinks(isLoggedIn).map((item) => (
                   <MobileLink

src/components/user-dropdown.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { signOut, useSession } from "next-auth/react";
+import { signOut } from "next-auth/react";
 import Image from "next/image";
 import Link from "next/link";
 import { Icons } from "./icons";