Skip to content

fix: add persistent desktop navigation #108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AlejandroAkbal wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: add persistent desktop navigation #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion components/layout/navigation/Navbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Comment on lines 47 to 50
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Mar 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

De-duplicate the desktop sidebar offset.

Line 49 hard-codes lg:left-64, while layouts/default.vue Line 66 hard-codes the sidebar as w-64. Keeping those values in separate files will silently misalign the posts navbar the next time the sidebar width changes. Consider sourcing both from the same layout token/CSS variable.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@components/layout/navigation/Navbar.vue` around lines 47 - 50, Navbar.vue
currently hardcodes the desktop offset as 'lg:left-64' when isPostsPage is true,
duplicating the sidebar width defined as 'w-64' in layouts/default.vue; replace
the hard-coded value with a shared token (CSS variable or layout token) so both
the sidebar width and Navbar offset reference the same variable (e.g.,
--sidebar-width) and update the conditional class in Navbar.vue (isPostsPage
branch) to use that variable instead of 'lg:left-64' and ensure
layouts/default.vue uses the same variable for 'w-64' so changes to sidebar
width stay in sync.

}"
class="border-base-0/20 absolute inset-x-0 top-0 z-10 transition duration-200"
Expand All @@ -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"
Expand Down
13 changes: 13 additions & 0 deletions components/layout/navigation/SidebarWrapper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
101 changes: 56 additions & 45 deletions layouts/default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Comment on lines +98 to +113
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Mar 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Render fixed overlays above the navbar.

Lines 98-113 place DialogManager and SidebarWrapper before Navbar, but components/layout/navigation/SidebarWrapper.vue Line 29, components/layout/DialogManager.vue Lines 162-209, and components/layout/navigation/Navbar.vue Line 52 all sit at z-10. Because the navbar renders later, it can paint above the drawer/modal backdrop and remain clickable on mobile.

🛠️ Suggested fix 
-        <ClientOnly>
-          <Toaster
-            :expand="true"
-            close-button
-            position="top-center"
-            theme="dark"
-          />
-
-          <DialogManager />
-        </ClientOnly>
-
-        <SidebarWrapper>
-          <LazySidebar />
-        </SidebarWrapper>
-
         <Navbar />
+
+        <ClientOnly>
+          <Toaster
+            :expand="true"
+            close-button
+            position="top-center"
+            theme="dark"
+          />
+
+          <DialogManager />
+        </ClientOnly>
+
+        <SidebarWrapper>
+          <LazySidebar />
+        </SidebarWrapper>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<ClientOnly>
<Toaster
:expand="true"
close-button
position="top-center"
theme="dark"
/>
<DialogManager />
</ClientOnly>
<SidebarWrapper>
<LazySidebar />
</SidebarWrapper>
<Navbar />
<Navbar />
<ClientOnly>
<Toaster
:expand="true"
close-button
position="top-center"
theme="dark"
/>
<DialogManager />
</ClientOnly>
<SidebarWrapper>
<LazySidebar />
</SidebarWrapper>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@layouts/default.vue` around lines 98 - 113, The DialogManager and
SidebarWrapper (and Toaster) are rendered before Navbar so Navbar may paint on
top; move the <ClientOnly> block containing <Toaster> and <DialogManager> and
the <SidebarWrapper> (including <LazySidebar>) to render after <Navbar> so the
overlays (DialogManager, SidebarWrapper) are mounted last and sit above Navbar
(alternatively ensure these components set a higher z-index than Navbar),
specifically adjust the order of ClientOnly, DialogManager,
SidebarWrapper/LazySidebar relative to the Navbar component in
layouts/default.vue.


<!-- 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>