Update

resources/js/modules/auth/AuthDialog.jsx

@@ -5,7 +5,7 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
 import { useMitt } from '@/plugins/MittContext';
 import { useEffect, useState } from 'react';
 
-const AuthDialog = ({ onOpenChange }) => {
+const AuthDialog = ({}) => {
     const emitter = useMitt();
 
     const [isLogin, setIsLogin] = useState(false);
@@ -21,13 +21,31 @@ const AuthDialog = ({ onOpenChange }) => {
             setIsOpen(true);
         };
 
+        const handleOpenLogin = () => {
+            setIsLogin(true);
+            setIsOpen(true);
+        };
+
+        const handleOpenJoin = () => {
+            setIsLogin(false);
+            setIsOpen(true);
+        };
+
         emitter.on('401', handleOpenAuth);
+        emitter.on('login', handleOpenLogin);
+        emitter.on('join', handleOpenJoin);
 
         return () => {
             emitter.off('401', handleOpenAuth);
+            emitter.off('login', handleOpenLogin);
+            emitter.off('join', handleOpenJoin);
         };
     }, [emitter]);
 
+    const onOpenChange = (open) => {
+        setIsOpen(open);
+    };
+
     return (
         <Dialog open={isOpen} onOpenChange={onOpenChange}>
             <DialogContent className="sm:max-w-[400px]">

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>

resources/js/modules/flash/flash-messages.jsx

@@ -0,0 +1,23 @@
+import { usePage } from '@inertiajs/react';
+import { useEffect } from 'react';
+import { toast } from 'sonner';
+
+const FlashMessages = () => {
+    const { flash } = usePage().props;
+
+    useEffect(() => {
+        if (flash.message) {
+            toast.success(flash.message);
+        }
+
+        if (flash.error) {
+            toast.error(flash.error);
+        }
+
+        if (flash.success) {
+            toast.success(flash.success);
+        }
+    }, [flash]);
+};
+
+export default FlashMessages;