From a207c0a47ac50aa0b16e6018e4a94cf5b7b501f7 Mon Sep 17 00:00:00 2001
From: eduamdev <35645733+eduamdev@users.noreply.github.com>
Date: Tue, 27 Feb 2024 17:10:54 -0600
Subject: [PATCH] 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 | 39 +++++++++++++++++++++++++++++-----
 app/globals.css                |  6 ++++++
 middleware.ts                  |  4 ++--
 3 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/app/components/site-header.tsx b/app/components/site-header.tsx
index 5cc5a65..79e7218 100644
--- a/app/components/site-header.tsx
+++ b/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>
diff --git a/app/globals.css b/app/globals.css
index c137820..c7c47cb 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -87,3 +87,9 @@
     }
   }
 }
+
+/* Clerk styles */
+.cl-userButtonAvatarBox {
+  height: 28px;
+  width: 28px;
+}
diff --git a/middleware.ts b/middleware.ts
index 99388e2..c36ddf8 100644
--- a/middleware.ts
+++ b/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 = {