Update

resources/js/modules/editor/partials/edit-nav-sidebar.jsx

@@ -2,16 +2,28 @@ import { usePage } from '@inertiajs/react';
 
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import { useMitt } from '@/plugins/MittContext';
 import useLocalSettingsStore from '@/stores/localSettingsStore';
+import { Link } from '@inertiajs/react';
 
 export default function EditNavSidebar({ isOpen, onClose }) {
     const { auth } = usePage().props;
 
+    const emitter = useMitt();
+
     const { getSetting, setSetting } = useLocalSettingsStore();
 
+    const openAuth = (isLogin) => {
+        if (isLogin) {
+            emitter.emit('login');
+        } else {
+            emitter.emit('join');
+        }
+    };
+
     return (
         <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
-            <SheetContent side="left" className="w-50 overflow-y-auto">
+            <SheetContent side="left" className="w-[220px] overflow-y-auto">
                 <SheetHeader>
                     <SheetTitle className="flex items-center gap-3">
                         <div className="font-display ml-0 text-lg tracking-wide md:ml-3 md:text-xl">MEMEAIGEN</div>
@@ -20,19 +32,42 @@ export default function EditNavSidebar({ isOpen, onClose }) {
 
                 <div className="space-y-3">
                     <div className="grid px-2">
-                        {/* {!auth.user && <Button variant="outline">Join Now</Button>}
-                        {!auth.user && <Button variant="link">Login</Button>} */}
+                        {!auth.user && (
+                            <Button
+                                onClick={() => {
+                                    openAuth(false);
+                                }}
+                                variant="outline"
+                            >
+                                Sign Up
+                            </Button>
+                        )}
+                        {!auth.user && (
+                            <Button
+                                onClick={() => {
+                                    openAuth(true);
+                                }}
+                                variant="link"
+                            >
+                                Login
+                            </Button>
+                        )}
                     </div>
 
-                    <div className="grid px-2">
-                        <Button
-                            onClick={() => {
-                                window.location.href = route('home');
-                            }}
-                            variant="link"
-                        >
+                    <div className="space-y-3 px-2">
+                        <Link className="text-primary block w-full text-sm underline-offset-4 hover:underline" href={route('home')} as="button">
                             Home
-                        </Button>
+                        </Link>
+                        {auth.user && (
+                            <Link
+                                className="text-primary block w-full text-sm underline-offset-4 hover:underline"
+                                method="post"
+                                href={route('logout')}
+                                as="button"
+                            >
+                                Log out
+                            </Link>
+                        )}
                     </div>
                 </div>
             </SheetContent>