Update

resources/js/components/app-sidebar.tsx

@@ -10,7 +10,7 @@ import AppLogo from './app-logo';
 const mainNavItems: NavItem[] = [
     {
         title: 'Dashboard',
-        href: route('dashboard'),
+        href: route(config('platform.general.authed_route_redirect')),
         icon: LayoutGrid,
     },
 ];

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;

resources/js/pages/home/home.tsx

@@ -1,9 +1,11 @@
 import Editor from '@/modules/editor/editor.jsx';
+import FlashMessages from '@/modules/flash/flash-messages';
 
 const Home = () => {
     return (
         <div className="min-h-screen bg-neutral-50 dark:bg-neutral-800">
             <Editor />
+            <FlashMessages />
         </div>
     );
 };

resources/js/pages/welcome.tsx

@@ -15,7 +15,7 @@ export default function Welcome() {
                     <nav className="flex items-center justify-end gap-4">
                         {auth.user ? (
                             <Link
-                                href={route('dashboard')}
+                                href={route(config('platform.general.authed_route_redirect'))}
                                 className="inline-block rounded-sm border border-[#19140035] px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b]"
                             >
                                 Dashboard