From 6bfd0811e9e0bd4335e319c8515c2c9fc51b287b Mon Sep 17 00:00:00 2001
From: AlejandroAkbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Sun, 15 Mar 2026 09:50:21 -0700
Subject: [PATCH] fix: add persistent desktop navigation

---
 components/layout/navigation/Navbar.vue       |   3 +-
 .../layout/navigation/SidebarWrapper.vue      |  13 +++
 layouts/default.vue                           | 101 ++++++++++--------
 3 files changed, 71 insertions(+), 46 deletions(-)

diff --git a/components/layout/navigation/Navbar.vue b/components/layout/navigation/Navbar.vue
index 76837e90..d32a2cb1 100644
--- a/components/layout/navigation/Navbar.vue
+++ b/components/layout/navigation/Navbar.vue
@@ -46,6 +46,7 @@
     <div
       :class="{
         'fixed!': isPostsPage,
+        'lg:left-64': isPostsPage,
         'bg-base-1000/60 shadow-lg backdrop-blur-lg backdrop-saturate-200 md:border-b-2': isPostsPage && !isOnTop
       }"
       class="border-base-0/20 absolute inset-x-0 top-0 z-10 transition duration-200"
@@ -61,7 +62,7 @@
         <!-- -->
 
         <!-- Right side: Menu button -->
-        <div class="absolute inset-y-0 left-0 flex items-center pl-2">
+        <div class="absolute inset-y-0 left-0 flex items-center pl-2 lg:hidden">
           <button
             aria-label="Open main menu"
             class="hover:hover-text-util focus-visible:focus-outline-util hover:hover-bg-util text-base-content-highlight inline-flex items-center justify-center rounded-md p-2 focus-visible:ring-inset"
diff --git a/components/layout/navigation/SidebarWrapper.vue b/components/layout/navigation/SidebarWrapper.vue
index 16972e85..319cf1c1 100644
--- a/components/layout/navigation/SidebarWrapper.vue
+++ b/components/layout/navigation/SidebarWrapper.vue
@@ -1,8 +1,21 @@
 <script setup>
   import { XMarkIcon } from '@heroicons/vue/24/outline'
+  import { useEventListener } from '@vueuse/core'
   import { sidebarNavigation } from 'assets/js/sidebarLinks'
 
   const { value: isMenuActive, toggle: toggleMenu } = useMenu()
+
+  function closeMenuOnDesktopBreakpoint() {
+    if (window.matchMedia('(min-width: 1024px)').matches) {
+      toggleMenu(false)
+    }
+  }
+
+  onMounted(() => {
+    closeMenuOnDesktopBreakpoint()
+  })
+
+  useEventListener('resize', closeMenuOnDesktopBreakpoint)
 </script>
 
 <template>
diff --git a/layouts/default.vue b/layouts/default.vue
index 7ca0fd2e..9b89d75f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -60,51 +60,62 @@
 
 <!-- TODO: Restore gestures -->
 <template>
-  <div class="relative flex h-full flex-col">
-    <!-- Background -->
-    <div
-      aria-hidden="true"
-      class="absolute inset-x-0 -z-10 flex transform-gpu justify-center blur-xl md:blur-3xl"
-    >
-      <div
-        class="from-primary-300 to-accent-700 aspect-1108/632 w-full flex-none bg-linear-to-l opacity-25"
-        style="
-          clip-path: polygon(
-            100% 0%,
-            100% 82.2%,
-            92.5% 84.9%,
-            75.7% 64%,
-            70.64% 73.45%,
-            56.7% 36.26%,
-            46.53% 47.55%,
-            0% 0%
-          );
-        "
-      />
+  <div class="relative flex flex-col">
+    <div class="flex flex-row">
+      <!-- Desktop Sidebar (Visible only on lg+) -->
+      <aside class="bg-base-1000 border-base-0/10 hidden w-64 shrink-0 flex-col border-r lg:sticky lg:top-0 lg:flex lg:h-screen lg:overflow-y-auto">
+        <div class="flex flex-1 flex-col px-6">
+          <LazySidebar />
+        </div>
+      </aside>
+
+      <div class="relative flex min-w-0 flex-1 flex-col">
+        <!-- Background -->
+        <div
+          aria-hidden="true"
+          class="absolute inset-x-0 -z-10 flex transform-gpu justify-center blur-xl md:blur-3xl"
+        >
+          <div
+            class="from-primary-300 to-accent-700 aspect-1108/632 w-full flex-none bg-linear-to-l opacity-25"
+            style="
+              clip-path: polygon(
+                100% 0%,
+                100% 82.2%,
+                92.5% 84.9%,
+                75.7% 64%,
+                70.64% 73.45%,
+                56.7% 36.26%,
+                46.53% 47.55%,
+                0% 0%
+              );
+            "
+          />
+        </div>
+
+        <!-- TODO: Restore when needed -->
+        <!--    <PwaUpdater />-->
+
+        <ClientOnly>
+          <Toaster
+            :expand="true"
+            close-button
+            position="top-center"
+            theme="dark"
+          />
+
+          <DialogManager />
+        </ClientOnly>
+
+        <SidebarWrapper>
+          <LazySidebar />
+        </SidebarWrapper>
+
+        <Navbar />
+
+        <!-- Layout content -->
+        <!-- Use `flex-1` to take all remaining space -->
+        <slot />
+      </div>
     </div>
-
-    <!-- TODO: Restore when needed -->
-    <!--    <PwaUpdater />-->
-
-    <ClientOnly>
-      <Toaster
-        :expand="true"
-        close-button
-        position="top-center"
-        theme="dark"
-      />
-
-      <DialogManager />
-    </ClientOnly>
-
-    <SidebarWrapper>
-      <LazySidebar />
-    </SidebarWrapper>
-
-    <Navbar />
-
-    <!-- Layout content -->
-    <!-- Use `flex-1` to take all remaining space -->
-    <slot />
   </div>
 </template>