From 226fd1effc9d869ab7fdbf97b20f3f6b532ae31e Mon Sep 17 00:00:00 2001
From: Kaan Karaca <kaan94karaca@gmail.com>
Date: Mon, 6 Apr 2026 17:18:09 +0300
Subject: [PATCH 1/2] refactor: replace horizontal nav with vertical sidebar
 nav

Use shadcn SidebarMenu primitives instead of custom layout code.
Move navigation from sidebar header to content area.
---
 .../renderer/src/components/app-sidebar.tsx   |  41 ++-----
 .../src/components/sidebar/horizontal-nav.tsx | 114 ------------------
 .../src/components/sidebar/sidebar-nav.tsx    |  66 ++++++++++
 3 files changed, 76 insertions(+), 145 deletions(-)
 delete mode 100644 apps/desktop/src/renderer/src/components/sidebar/horizontal-nav.tsx
 create mode 100644 apps/desktop/src/renderer/src/components/sidebar/sidebar-nav.tsx

diff --git a/apps/desktop/src/renderer/src/components/app-sidebar.tsx b/apps/desktop/src/renderer/src/components/app-sidebar.tsx
index 0d84cd55e..66262d660 100644
--- a/apps/desktop/src/renderer/src/components/app-sidebar.tsx
+++ b/apps/desktop/src/renderer/src/components/app-sidebar.tsx
@@ -34,7 +34,7 @@ import {
   SidebarRail,
   useSidebar
 } from '@/components/ui/sidebar'
-import { HorizontalNav } from '@/components/sidebar/horizontal-nav'
+import { SidebarNav } from '@/components/sidebar/sidebar-nav'
 import { SidebarSection } from '@/components/sidebar-section'
 import { NotesTree } from '@/components/notes-tree'
 import { SidebarTagList } from '@/components/sidebar/sidebar-tag-list'
@@ -75,19 +75,7 @@ const mainNav: {
   { title: 'Tasks', page: 'tasks', icon: SidebarTasks, shortcut: '⌘⌥4' }
 ]
 
-function SidebarHeaderContent({
-  items,
-  isActive,
-  onNavClick,
-  inboxCount,
-  todayTasksCount
-}: {
-  items: typeof mainNav
-  isActive: (item: import('@/contexts/tabs/types').SidebarItem) => boolean
-  onNavClick: (page: AppPage) => (e: React.MouseEvent) => void
-  inboxCount: number
-  todayTasksCount: number
-}) {
+function SidebarHeaderContent() {
   const { state } = useSidebar()
   const isCollapsed = state === 'collapsed'
 
@@ -104,16 +92,6 @@ function SidebarHeaderContent({
           <VaultSwitcher />
         </div>
       </div>
-
-      {/* Horizontal icon nav — between traffic lights and search */}
-      <HorizontalNav
-        items={items}
-        isActive={isActive}
-        onNavClick={onNavClick}
-        inboxCount={inboxCount}
-        todayTasksCount={todayTasksCount}
-        isCollapsed={isCollapsed}
-      />
     </SidebarHeader>
   )
 }
@@ -474,14 +452,15 @@ function AppSidebarInner({ currentPage, viewCounts, ...props }: AppSidebarProps)
 
   return (
     <Sidebar collapsible="icon" {...props}>
-      <SidebarHeaderContent
-        items={mainNav}
-        isActive={isActiveItem}
-        onNavClick={handleNavClick}
-        inboxCount={inboxCount}
-        todayTasksCount={todayTasksCount}
-      />
+      <SidebarHeaderContent />
       <SidebarContent className="flex flex-col overflow-hidden gap-0">
+        <SidebarNav
+          items={mainNav}
+          isActive={isActiveItem}
+          onNavClick={handleNavClick}
+          inboxCount={inboxCount}
+          todayTasksCount={todayTasksCount}
+        />
         <SidebarDrillDownContainer>{mainContent}</SidebarDrillDownContainer>
       </SidebarContent>
       <SidebarFooter className="gap-0">
diff --git a/apps/desktop/src/renderer/src/components/sidebar/horizontal-nav.tsx b/apps/desktop/src/renderer/src/components/sidebar/horizontal-nav.tsx
deleted file mode 100644
index d86b20518..000000000
--- a/apps/desktop/src/renderer/src/components/sidebar/horizontal-nav.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { cn } from '@/lib/utils'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import type { AppPage } from '@/App'
-import type { SidebarItem, TabType } from '@/contexts/tabs/types'
-
-interface NavItem {
-  title: string
-  page: AppPage
-  icon: React.ComponentType<{ className?: string; size?: number }>
-  shortcut?: string
-}
-
-interface HorizontalNavProps {
-  items: NavItem[]
-  isActive: (item: SidebarItem) => boolean
-  onNavClick: (page: AppPage) => (e: React.MouseEvent) => void
-  inboxCount: number
-  todayTasksCount: number
-  isCollapsed?: boolean
-}
-
-export function HorizontalNav({
-  items,
-  isActive,
-  onNavClick,
-  inboxCount,
-  todayTasksCount,
-  isCollapsed = false
-}: HorizontalNavProps) {
-  return (
-    <nav
-      className={cn(
-        'flex gap-0.5 px-2 py-1 transition-all duration-200',
-        isCollapsed ? 'flex-col items-center px-1' : 'items-center'
-      )}
-    >
-      {items.map((item) => {
-        const sidebarItem: SidebarItem = {
-          type: item.page as TabType,
-          title: item.title,
-          path: `/${item.page}`
-        }
-        const active = isActive(sidebarItem)
-        const showLabel = active && !isCollapsed
-        const badgeCount =
-          item.page === 'inbox' ? inboxCount : item.page === 'tasks' ? todayTasksCount : 0
-
-        const tooltipLabel = item.shortcut ? `${item.title} ${item.shortcut}` : item.title
-
-        return (
-          <Tooltip key={item.page}>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                onClick={onNavClick(item.page)}
-                className={cn(
-                  'relative flex h-7 cursor-pointer items-center rounded-md transition-all duration-200',
-                  isCollapsed ? 'w-8 justify-center px-0' : 'px-2',
-                  active
-                    ? isCollapsed
-                      ? 'bg-sidebar-accent'
-                      : 'bg-sidebar-accent pl-2.5'
-                    : 'hover:bg-sidebar-accent/60'
-                )}
-              >
-                <item.icon
-                  className={cn(
-                    'size-[18px] shrink-0 transition-opacity duration-150',
-                    active
-                      ? 'text-sidebar-accent-foreground opacity-85'
-                      : 'text-sidebar-foreground opacity-45'
-                  )}
-                />
-
-                {/* Expanding label — grid trick for smooth width animation */}
-                <div
-                  className={cn(
-                    'grid overflow-hidden transition-[grid-template-columns,opacity] duration-200',
-                    showLabel ? 'grid-cols-[1fr] opacity-100' : 'grid-cols-[0fr] opacity-0'
-                  )}
-                >
-                  <span className="overflow-hidden whitespace-nowrap">
-                    <span
-                      className={cn(
-                        'ml-1.5 text-[13px] font-medium leading-4',
-                        'text-sidebar-accent-foreground'
-                      )}
-                    >
-                      {item.title}
-                    </span>
-                  </span>
-                </div>
-
-                {badgeCount > 0 && (
-                  <span className="absolute -top-0.5 -right-0.5 flex size-3.5 items-center justify-center rounded-full bg-tint text-[8px] font-bold text-tint-foreground">
-                    {badgeCount > 9 ? '9+' : badgeCount}
-                  </span>
-                )}
-              </button>
-            </TooltipTrigger>
-            <TooltipContent
-              side={isCollapsed ? 'right' : 'bottom'}
-              align="center"
-              hidden={showLabel}
-              className="text-xs"
-            >
-              {tooltipLabel}
-            </TooltipContent>
-          </Tooltip>
-        )
-      })}
-    </nav>
-  )
-}
diff --git a/apps/desktop/src/renderer/src/components/sidebar/sidebar-nav.tsx b/apps/desktop/src/renderer/src/components/sidebar/sidebar-nav.tsx
new file mode 100644
index 000000000..de74ef606
--- /dev/null
+++ b/apps/desktop/src/renderer/src/components/sidebar/sidebar-nav.tsx
@@ -0,0 +1,66 @@
+import {
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarMenuBadge
+} from '@/components/ui/sidebar'
+import type { AppPage } from '@/App'
+import type { SidebarItem, TabType } from '@/contexts/tabs/types'
+
+interface NavItem {
+  title: string
+  page: AppPage
+  icon: React.ComponentType<{ className?: string; size?: number }>
+  shortcut?: string
+}
+
+interface SidebarNavProps {
+  items: NavItem[]
+  isActive: (item: SidebarItem) => boolean
+  onNavClick: (page: AppPage) => (e: React.MouseEvent) => void
+  inboxCount: number
+  todayTasksCount: number
+}
+
+export function SidebarNav({
+  items,
+  isActive,
+  onNavClick,
+  inboxCount,
+  todayTasksCount
+}: SidebarNavProps) {
+  return (
+    <SidebarGroup className="shrink-0 py-1.5 pb-0">
+      <SidebarMenu>
+        {items.map((item) => {
+          const sidebarItem: SidebarItem = {
+            type: item.page as TabType,
+            title: item.title,
+            path: `/${item.page}`
+          }
+          const active = isActive(sidebarItem)
+          const badgeCount =
+            item.page === 'inbox' ? inboxCount : item.page === 'tasks' ? todayTasksCount : 0
+          const tooltipLabel = item.shortcut ? `${item.title} ${item.shortcut}` : item.title
+
+          return (
+            <SidebarMenuItem key={item.page}>
+              <SidebarMenuButton
+                tooltip={tooltipLabel}
+                isActive={active}
+                onClick={onNavClick(item.page)}
+              >
+                <item.icon />
+                <span>{item.title}</span>
+              </SidebarMenuButton>
+              {badgeCount > 0 && (
+                <SidebarMenuBadge>{badgeCount > 9 ? '9+' : badgeCount}</SidebarMenuBadge>
+              )}
+            </SidebarMenuItem>
+          )
+        })}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}

From 6614a4c665f68a14ac1fad443d4425b429d04aec Mon Sep 17 00:00:00 2001
From: Kaan Karaca <kaan94karaca@gmail.com>
Date: Mon, 6 Apr 2026 17:18:13 +0300
Subject: [PATCH 2/2] docs: add vertical sidebar navigation to changelog

---
 CHANGELOG.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d7098a872..526298eaa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,15 @@ Format: weekly entries grouped by feature area.
 
 ---
 
+## 2026-04-06 — Vertical Sidebar Navigation
+
+### Changed
+- Replace horizontal nav with vertical sidebar nav using shadcn SidebarMenu primitives
+- Move navigation (Inbox, Home, Journal, Tasks) from sidebar header to sidebar content area
+- Simplify SidebarHeaderContent to only render traffic lights and vault switcher
+
+---
+
 ## 2026-04-06 — Split View Polish
 
 ### Fixed