FossilRepo

Fix collapsed sidebar: prominent >> expand button as own row at top

lmata 2026-04-07 17:46 trunk
Commit ea3b5a33834d8505c5f5a24b599997d4cbaa082c840f6d0d469d14b2931e5381
Parent 0ad406c878d67f6…
1 file changed +15 -11
~ templates/includes/sidebar.html
M templates/includes/sidebar.html
+15 -11
--- templates/includes/sidebar.html
+++ templates/includes/sidebar.html
@@ -2,33 +2,37 @@
22
 :class="collapsed ? 'w-14' : 'w-60'"
33
 class="hidden lg:flex lg:flex-col flex-shrink-0 bg-gray-900 border-r border-gray-700 overflow-y-auto overflow-x-hidden transition-all duration-200">
44
55
 <nav class="flex-1 px-2 py-3 space-y-1 overflow-y-auto">
66
7
- <!-- Dashboard + collapse toggle -->
8
- <div class="flex items-center gap-1">
7
+ <!-- Expand button (collapsed state only) — prominent, centered -->
8
+ <button x-show="collapsed" style="display:none"
9
+ @click="collapsed = false; localStorage.setItem('sidebarCollapsed', 'false')"
10
+ class="flex items-center justify-center w-full rounded-md px-2 py-2 mb-1 text-gray-400 hover:text-white hover:bg-gray-800 transition-colors"
11
+ title="Expand sidebar">
12
+ <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
13
+ <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
14
+ </svg>
15
+ </button>
16
+
17
+ <!-- Dashboard + collapse toggle (expanded state) -->
18
+ <div class="flex items-center gap-1" :class="collapsed && 'justify-center'">
919
 <a href="{% url 'dashboard' %}"
10
- class="flex-1 flex items-center gap-2 rounded-md px-2 py-2 text-sm font-medium {% if request.path == '/dashboard/' %}bg-gray-800 text-white{% else %}text-gray-400 hover:bg-gray-800 hover:text-white{% endif %}"
20
+ class="flex items-center gap-2 rounded-md px-2 py-2 text-sm font-medium {% if request.path == '/dashboard/' %}bg-gray-800 text-white{% else %}text-gray-400 hover:bg-gray-800 hover:text-white{% endif %}"
21
+ :class="collapsed ? '' : 'flex-1'"
1122
 :title="collapsed ? 'Dashboard' : ''">
1223
 <svg class="h-4 w-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
1324
 <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955a1.126 1.126 0 011.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
1425
 </svg>
1526
 <span x-show="!collapsed" class="truncate">Dashboard</span>
1627
 </a>
1728
 <button x-show="!collapsed" @click="collapsed = true; localStorage.setItem('sidebarCollapsed', 'true')"
18
- class="flex-shrink-0 rounded-md p-1.5 text-gray-600 hover:text-gray-300 hover:bg-gray-800 transition-colors"
29
+ class="flex-shrink-0 rounded-md p-1.5 text-gray-500 hover:text-gray-300 hover:bg-gray-800 transition-colors"
1930
 title="Collapse sidebar">
2031
 <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
2132
 <path stroke-linecap="round" stroke-linejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" />
2233
 </svg>
23
- </button>
24
- <button x-show="collapsed" style="display:none" @click="collapsed = false; localStorage.setItem('sidebarCollapsed', 'false')"
25
- class="flex-shrink-0 rounded-md p-1.5 text-gray-600 hover:text-gray-300 hover:bg-gray-800 transition-colors"
26
- title="Expand sidebar">
27
- <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
28
- <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
29
- </svg>
3034
 </button>
3135
 </div>
3236
3337
 <!-- Explore -->
3438
 <a href="{% url 'explore' %}"
3539
--- templates/includes/sidebar.html
+++ templates/includes/sidebar.html
@@ -2,33 +2,37 @@
2 :class="collapsed ? 'w-14' : 'w-60'"
3 class="hidden lg:flex lg:flex-col flex-shrink-0 bg-gray-900 border-r border-gray-700 overflow-y-auto overflow-x-hidden transition-all duration-200">
4
5 <nav class="flex-1 px-2 py-3 space-y-1 overflow-y-auto">
6
7 <!-- Dashboard + collapse toggle -->
8 <div class="flex items-center gap-1">
 
 
 
 
 
 
 
 
 
 
9 <a href="{% url 'dashboard' %}"
10 class="flex-1 flex items-center gap-2 rounded-md px-2 py-2 text-sm font-medium {% if request.path == '/dashboard/' %}bg-gray-800 text-white{% else %}text-gray-400 hover:bg-gray-800 hover:text-white{% endif %}"
 
11 :title="collapsed ? 'Dashboard' : ''">
12 <svg class="h-4 w-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
13 <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955a1.126 1.126 0 011.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
14 </svg>
15 <span x-show="!collapsed" class="truncate">Dashboard</span>
16 </a>
17 <button x-show="!collapsed" @click="collapsed = true; localStorage.setItem('sidebarCollapsed', 'true')"
18 class="flex-shrink-0 rounded-md p-1.5 text-gray-600 hover:text-gray-300 hover:bg-gray-800 transition-colors"
19 title="Collapse sidebar">
20 <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
21 <path stroke-linecap="round" stroke-linejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" />
22 </svg>
23 </button>
24 <button x-show="collapsed" style="display:none" @click="collapsed = false; localStorage.setItem('sidebarCollapsed', 'false')"
25 class="flex-shrink-0 rounded-md p-1.5 text-gray-600 hover:text-gray-300 hover:bg-gray-800 transition-colors"
26 title="Expand sidebar">
27 <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
28 <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
29 </svg>
30 </button>
31 </div>
32
33 <!-- Explore -->
34 <a href="{% url 'explore' %}"
35
--- templates/includes/sidebar.html
+++ templates/includes/sidebar.html
@@ -2,33 +2,37 @@
2 :class="collapsed ? 'w-14' : 'w-60'"
3 class="hidden lg:flex lg:flex-col flex-shrink-0 bg-gray-900 border-r border-gray-700 overflow-y-auto overflow-x-hidden transition-all duration-200">
4
5 <nav class="flex-1 px-2 py-3 space-y-1 overflow-y-auto">
6
7 <!-- Expand button (collapsed state only) — prominent, centered -->
8 <button x-show="collapsed" style="display:none"
9 @click="collapsed = false; localStorage.setItem('sidebarCollapsed', 'false')"
10 class="flex items-center justify-center w-full rounded-md px-2 py-2 mb-1 text-gray-400 hover:text-white hover:bg-gray-800 transition-colors"
11 title="Expand sidebar">
12 <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
13 <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
14 </svg>
15 </button>
16
17 <!-- Dashboard + collapse toggle (expanded state) -->
18 <div class="flex items-center gap-1" :class="collapsed && 'justify-center'">
19 <a href="{% url 'dashboard' %}"
20 class="flex items-center gap-2 rounded-md px-2 py-2 text-sm font-medium {% if request.path == '/dashboard/' %}bg-gray-800 text-white{% else %}text-gray-400 hover:bg-gray-800 hover:text-white{% endif %}"
21 :class="collapsed ? '' : 'flex-1'"
22 :title="collapsed ? 'Dashboard' : ''">
23 <svg class="h-4 w-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
24 <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955a1.126 1.126 0 011.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
25 </svg>
26 <span x-show="!collapsed" class="truncate">Dashboard</span>
27 </a>
28 <button x-show="!collapsed" @click="collapsed = true; localStorage.setItem('sidebarCollapsed', 'true')"
29 class="flex-shrink-0 rounded-md p-1.5 text-gray-500 hover:text-gray-300 hover:bg-gray-800 transition-colors"
30 title="Collapse sidebar">
31 <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
32 <path stroke-linecap="round" stroke-linejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" />
33 </svg>
 
 
 
 
 
 
 
34 </button>
35 </div>
36
37 <!-- Explore -->
38 <a href="{% url 'explore' %}"
39

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button