From 7afcc6c737003da8cee83820bbc8b0e29d2ebea0 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 3 Mar 2026 21:20:57 -0600
Subject: [PATCH] Show full navigation in mobile drawer when logged out

The mobile drawer was showing only a login prompt when logged out,
while the desktop sidebar showed the full nav list. Now the logged-out
mobile drawer matches desktop: login area at top, full nav items
(filtered for auth requirements), and theme selector at bottom.
---
 src/components/MobileDrawer.tsx | 47 ++++++++++++++++++++++++++++++---
 1 file changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/components/MobileDrawer.tsx b/src/components/MobileDrawer.tsx
index 305842a2..f4c5bb33 100644
--- a/src/components/MobileDrawer.tsx
+++ b/src/components/MobileDrawer.tsx
@@ -294,10 +294,49 @@ export function MobileDrawer({ open, onOpenChange }: MobileDrawerProps) {
               </div>
             </div>
           ) : (
-            <div className="flex flex-col items-center justify-center h-full gap-4 px-6">
-              <div className={`w-full text-center space-y-4 ${hasBgImage ? 'bg-background rounded-xl p-6' : 'p-6'}`}>
-                <p className="text-muted-foreground text-sm">Log in to access all features</p>
-                <LoginArea className="w-full flex flex-col" />
+            <div className={`flex flex-col h-full ${hasBgImage ? 'py-2 px-2 gap-1' : ''}`}>
+              {/* Login prompt */}
+              <div
+                className={`flex items-center gap-3 px-4 border-b border-border ${hasBgImage ? 'bg-background rounded-xl' : ''}`}
+                style={{ minHeight: `calc(3rem + env(safe-area-inset-top, 0px))`, paddingTop: `env(safe-area-inset-top, 0px)` }}
+              >
+                <LoginArea className="w-full flex" />
+              </div>
+
+              {/* Nav items — scrollable */}
+              <nav className="flex flex-col gap-0.5 flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-1">
+                <div className={hasBgImage ? 'bg-background rounded-xl p-0.5' : 'contents'}>
+                  <SidebarNavList
+                    items={visibleItems}
+                    editing={false}
+                    onRemove={removeFromSidebar}
+                    onReorder={updateSidebarOrder}
+                    isActive={(id) => isItemActive(id, location.pathname, location.search, userProfileUrl)}
+                    getOnClick={() => handleClose}
+                    getProfilePath={(id) => id === 'profile' ? userProfileUrl : undefined}
+                    getShowIndicator={(id) => id === 'notifications' ? hasUnread : undefined}
+                    linkClassName="text-base"
+                  />
+                  <SidebarMoreMenu
+                    editing={false}
+                    hiddenItems={visibleHiddenItems}
+                    onDoneEditing={() => setEditing(false)}
+                    onStartEditing={() => setEditing(true)}
+                    onAdd={addToSidebar}
+                    onAddDivider={addDividerToSidebar}
+                    onNavigate={handleClose}
+                    open={moreMenuOpen}
+                    onOpenChange={setMoreMenuOpen}
+                  />
+                </div>
+              </nav>
+
+              {/* Theme */}
+              <div
+                className={`flex items-center ${hasBgImage ? 'bg-background rounded-xl' : 'border-t border-border'}`}
+                style={{ minHeight: '3.5rem', paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
+              >
+                <SidebarThemeDropdown onNavigate={handleClose} className="flex items-center justify-between w-full px-4 py-2.5 text-sm font-medium hover:bg-secondary/60 rounded-full transition-colors" />
               </div>
             </div>
           )}