Update

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

@@ -0,0 +1,54 @@
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import useLocalSettingsStore from '@/stores/localSettingsStore';
+import { SettingsIcon } from 'lucide-react';
+
+export default function EditNavSidebar({ isOpen, onClose }) {
+    const { getSetting, setSetting } = useLocalSettingsStore();
+
+    return (
+        <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
+            <SheetContent side="left" className="w-50 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>
+                    </SheetTitle>
+                </SheetHeader>
+
+                <div className="space-y-6">
+                    <Dialog>
+                        <DialogTrigger asChild>
+                            <Button variant="link">
+                                <SettingsIcon className="h-6 w-6" /> Settings
+                            </Button>
+                        </DialogTrigger>
+                        <DialogContent className="sm:max-w-[425px]">
+                            <DialogHeader>
+                                <DialogTitle>Settings</DialogTitle>
+                                <DialogDescription>Change your settings here.</DialogDescription>
+                            </DialogHeader>
+
+                            <div className="flex items-center space-x-2">
+                                <Checkbox
+                                    id="genAlphaSlang"
+                                    checked={getSetting('genAlphaSlang')}
+                                    onCheckedChange={() => setSetting('genAlphaSlang', !getSetting('genAlphaSlang'))}
+                                />
+                                <label
+                                    htmlFor="genAlphaSlang"
+                                    className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                >
+                                    Use gen alpha slang
+                                </label>
+                            </div>
+
+                            <DialogFooter></DialogFooter>
+                        </DialogContent>
+                    </Dialog>
+                </div>
+            </SheetContent>
+        </Sheet>
+    );
+}