Merge pull request #674 from code16/improve-sidebar

Persist sidebar closed state + add sidebar trigger separator

Author: aguingand

resources/js/Layouts/Layout.vue

@@ -57,6 +57,7 @@
     import GlobalSearch from "@/components/GlobalSearch.vue";
     import Content from "@/components/Content.vue";
     import MenuItem from "@/components/MenuItem.vue";
+    import { Separator } from "@/components/ui/separator";
 
     const dialogs = useDialogs();
     const menu = useMenu();
@@ -91,7 +92,7 @@
 
 <template>
     <ConfigProvider>
-        <SidebarProvider>
+        <SidebarProvider persist>
             <template v-if="auth()?.user">
                 <Sidebar>
                     <SidebarHeader class="p-4 h-14 items-start justify-center">
@@ -252,6 +253,10 @@
                     <template v-if="auth()?.user">
                         <SidebarTrigger class="-ml-1 shrink-0" />
                     </template>
+                    <Separator
+                        orientation="vertical"
+                        class="mr-2 data-[orientation=vertical]:h-4"
+                    />
                     <div class="min-w-0 flex-1 lg:flex-initial">
                         <slot name="breadcrumb" />
                     </div>

resources/js/components/ui/separator/Separator.vue

@@ -16,6 +16,7 @@ const delegatedProps = computed(() => {
   <Separator
     v-bind="delegatedProps"
     :class="cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)"
+    :data-orientation="props.orientation"
   >
       <slot />
   </Separator>

resources/js/components/ui/sidebar/SidebarProvider.vue

@@ -9,6 +9,7 @@ const props = withDefaults(defineProps<{
   defaultOpen?: boolean
   open?: boolean
   class?: HTMLAttributes['class']
+  persist?: boolean,
 }>(), {
   defaultOpen: true,
   open: undefined,
@@ -20,17 +21,19 @@ const emits = defineEmits<{
 
 const isMobile = useMediaQuery('(max-width: 768px)')
 const openMobile = ref(false)
+const defaultOpen = props.persist ? localStorage.getItem('sidebar-open') !== 'false' : props.defaultOpen
 
 const open = useVModel(props, 'open', emits, {
-  defaultValue: props.defaultOpen ?? false,
+  defaultValue: defaultOpen,
   passive: (props.open === undefined) as false,
 }) as Ref<boolean>
 
 function setOpen(value: boolean) {
   open.value = value // emits('update:open', value)
 
+  localStorage.setItem('sidebar-open', value.toString());
   // This sets the cookie to keep the sidebar state.
-  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+  // document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
 }
 
 function setOpenMobile(value: boolean) {