chores: add public routes in the middleware, add sign in and sign up …

…links in popover when user is not logged in

app/components/site-header.tsx

@@ -1,5 +1,10 @@
 import Link from 'next/link';
 import { UserButton, SignedIn, SignedOut } from '@clerk/nextjs';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/app/components/ui/popover';
 import { Icons } from '@/app/components/icons';
 
 export function SiteHeader() {
@@ -11,14 +16,38 @@ export function SiteHeader() {
       <nav>
         <SignedIn>
           <div className="flex items-center justify-center">
-            <UserButton />
+            <Icons.menu className="mr-1.5 size-6 shrink-0" />
+            <div className="size-7 shrink-0">
+              <UserButton />
+            </div>
           </div>
         </SignedIn>
         <SignedOut>
-          <div className="flex items-center justify-center text-neutral-800">
-            <Icons.menu className="mr-1.5 size-6 shrink-0" />
-            <Icons.user className="size-7 shrink-0" />
-          </div>
+          <Popover>
+            <PopoverTrigger>
+              <div className="flex items-center justify-center text-neutral-800">
+                <Icons.menu className="mr-1.5 size-6 shrink-0" />
+                <Icons.user className="size-7 shrink-0" />
+              </div>
+            </PopoverTrigger>
+            <PopoverContent
+              align="end"
+              collisionPadding={{ top: 40, right: 40 }}
+              sideOffset={8}
+              className="w-48 px-0 py-2.5 text-neutral-800 shadow-xl"
+            >
+              <ul className="flex flex-col gap-0.5 text-sm">
+                <Link href={'/sign-up'}>
+                  <li className="py-2 pl-4 font-semibold hover:bg-neutral-100">
+                    Sign up
+                  </li>
+                </Link>
+                <Link href={'/sign-in'}>
+                  <li className="py-2 pl-4 hover:bg-neutral-100">Sign in</li>
+                </Link>
+              </ul>
+            </PopoverContent>
+          </Popover>
         </SignedOut>
       </nav>
     </header>

app/globals.css

@@ -87,3 +87,9 @@
     }
   }
 }
+
+/* Clerk styles */
+.cl-userButtonAvatarBox {
+  height: 28px;
+  width: 28px;
+}

middleware.ts

@@ -2,10 +2,10 @@ import { authMiddleware } from '@clerk/nextjs';
 
 export default authMiddleware({
   // Routes that can be accessed while signed out
-  publicRoutes: ['/'],
+  publicRoutes: ['/', '/cars', '/car/:path', '/reservation'],
   // Routes that can always be accessed, and have
   // no authentication information
-  ignoredRoutes: ['/sign-in', '/sign-up'],
+  ignoredRoutes: ['/sign-up', '/sign-in'],
 });
 
 export const config = {