FossilRepo
Add mobile responsive sidebar: slide-out drawer with hamburger toggle - Hamburger icon visible on screens < 1024px in top nav - Sidebar slides in from left with smooth transition - Backdrop overlay, click outside to close - All sidebar navigation works on mobile - Desktop sidebar unchanged (lg:flex)
Commit
390263727e5cf11de20f45e3d7f72240595582e6e7f74ef7496a04415ca066fe
Parent
c8d5d08699c9f36…
2 files changed
+10
-1
+6
+10
-1
| --- templates/base.html | ||
| +++ templates/base.html | ||
| @@ -122,17 +122,26 @@ | ||
| 122 | 122 | } |
| 123 | 123 | }); |
| 124 | 124 | </script> |
| 125 | 125 | </head> |
| 126 | 126 | <body class="h-full bg-gray-950 text-gray-100" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'> |
| 127 | - <div class="min-h-full flex flex-col"> | |
| 127 | + <div class="min-h-full flex flex-col" x-data="{ mobileSidebar: false }"> | |
| 128 | 128 | {% if user.is_authenticated %} |
| 129 | 129 | {% include "includes/nav.html" %} |
| 130 | 130 | {% endif %} |
| 131 | 131 | |
| 132 | 132 | <div class="flex flex-1 overflow-hidden"> |
| 133 | 133 | {% if user.is_authenticated %} |
| 134 | + <!-- Mobile sidebar overlay --> | |
| 135 | + <div x-show="mobileSidebar" x-transition:enter="transition-opacity ease-out duration-200" x-transition:leave="transition-opacity ease-in duration-150" | |
| 136 | + class="fixed inset-0 z-40 bg-black/50 lg:hidden" @click="mobileSidebar = false" style="display:none"></div> | |
| 137 | + <div x-show="mobileSidebar" x-transition:enter="transition-transform ease-out duration-200" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" | |
| 138 | + x-transition:leave="transition-transform ease-in duration-150" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" | |
| 139 | + class="fixed inset-y-0 left-0 z-50 w-64 lg:hidden" style="display:none"> | |
| 140 | + {% include "includes/sidebar.html" %} | |
| 141 | + </div> | |
| 142 | + <!-- Desktop sidebar --> | |
| 134 | 143 | {% include "includes/sidebar.html" %} |
| 135 | 144 | {% endif %} |
| 136 | 145 | |
| 137 | 146 | <main class="flex-1 overflow-y-auto {% if user.is_authenticated %}py-6{% endif %}"> |
| 138 | 147 | <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> |
| 139 | 148 |
| --- templates/base.html | |
| +++ templates/base.html | |
| @@ -122,17 +122,26 @@ | |
| 122 | } |
| 123 | }); |
| 124 | </script> |
| 125 | </head> |
| 126 | <body class="h-full bg-gray-950 text-gray-100" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'> |
| 127 | <div class="min-h-full flex flex-col"> |
| 128 | {% if user.is_authenticated %} |
| 129 | {% include "includes/nav.html" %} |
| 130 | {% endif %} |
| 131 | |
| 132 | <div class="flex flex-1 overflow-hidden"> |
| 133 | {% if user.is_authenticated %} |
| 134 | {% include "includes/sidebar.html" %} |
| 135 | {% endif %} |
| 136 | |
| 137 | <main class="flex-1 overflow-y-auto {% if user.is_authenticated %}py-6{% endif %}"> |
| 138 | <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> |
| 139 |
| --- templates/base.html | |
| +++ templates/base.html | |
| @@ -122,17 +122,26 @@ | |
| 122 | } |
| 123 | }); |
| 124 | </script> |
| 125 | </head> |
| 126 | <body class="h-full bg-gray-950 text-gray-100" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'> |
| 127 | <div class="min-h-full flex flex-col" x-data="{ mobileSidebar: false }"> |
| 128 | {% if user.is_authenticated %} |
| 129 | {% include "includes/nav.html" %} |
| 130 | {% endif %} |
| 131 | |
| 132 | <div class="flex flex-1 overflow-hidden"> |
| 133 | {% if user.is_authenticated %} |
| 134 | <!-- Mobile sidebar overlay --> |
| 135 | <div x-show="mobileSidebar" x-transition:enter="transition-opacity ease-out duration-200" x-transition:leave="transition-opacity ease-in duration-150" |
| 136 | class="fixed inset-0 z-40 bg-black/50 lg:hidden" @click="mobileSidebar = false" style="display:none"></div> |
| 137 | <div x-show="mobileSidebar" x-transition:enter="transition-transform ease-out duration-200" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" |
| 138 | x-transition:leave="transition-transform ease-in duration-150" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" |
| 139 | class="fixed inset-y-0 left-0 z-50 w-64 lg:hidden" style="display:none"> |
| 140 | {% include "includes/sidebar.html" %} |
| 141 | </div> |
| 142 | <!-- Desktop sidebar --> |
| 143 | {% include "includes/sidebar.html" %} |
| 144 | {% endif %} |
| 145 | |
| 146 | <main class="flex-1 overflow-y-auto {% if user.is_authenticated %}py-6{% endif %}"> |
| 147 | <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> |
| 148 |
| --- templates/includes/nav.html | ||
| +++ templates/includes/nav.html | ||
| @@ -1,10 +1,16 @@ | ||
| 1 | 1 | {% load static %} |
| 2 | 2 | <nav class="bg-gray-900 border-b border-gray-700"> |
| 3 | 3 | <div class="px-4 sm:px-6 lg:px-8"> |
| 4 | 4 | <div class="flex h-14 items-center justify-between"> |
| 5 | 5 | <div class="flex items-center gap-3"> |
| 6 | + <!-- Mobile sidebar toggle --> | |
| 7 | + <button @click="mobileSidebar = !mobileSidebar" class="lg:hidden rounded-md p-2 text-gray-400 hover:text-white hover:bg-gray-800"> | |
| 8 | + <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> | |
| 9 | + <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /> | |
| 10 | + </svg> | |
| 11 | + </button> | |
| 6 | 12 | <a href="{% url 'dashboard' %}" class="flex-shrink-0"> |
| 7 | 13 | <img src="{% static 'img/fossilrepo-logo-dark.png' %}" alt="Fossilrepo" class="h-7 w-auto"> |
| 8 | 14 | </a> |
| 9 | 15 | </div> |
| 10 | 16 | <div class="flex items-center gap-3"> |
| 11 | 17 |
| --- templates/includes/nav.html | |
| +++ templates/includes/nav.html | |
| @@ -1,10 +1,16 @@ | |
| 1 | {% load static %} |
| 2 | <nav class="bg-gray-900 border-b border-gray-700"> |
| 3 | <div class="px-4 sm:px-6 lg:px-8"> |
| 4 | <div class="flex h-14 items-center justify-between"> |
| 5 | <div class="flex items-center gap-3"> |
| 6 | <a href="{% url 'dashboard' %}" class="flex-shrink-0"> |
| 7 | <img src="{% static 'img/fossilrepo-logo-dark.png' %}" alt="Fossilrepo" class="h-7 w-auto"> |
| 8 | </a> |
| 9 | </div> |
| 10 | <div class="flex items-center gap-3"> |
| 11 |
| --- templates/includes/nav.html | |
| +++ templates/includes/nav.html | |
| @@ -1,10 +1,16 @@ | |
| 1 | {% load static %} |
| 2 | <nav class="bg-gray-900 border-b border-gray-700"> |
| 3 | <div class="px-4 sm:px-6 lg:px-8"> |
| 4 | <div class="flex h-14 items-center justify-between"> |
| 5 | <div class="flex items-center gap-3"> |
| 6 | <!-- Mobile sidebar toggle --> |
| 7 | <button @click="mobileSidebar = !mobileSidebar" class="lg:hidden rounded-md p-2 text-gray-400 hover:text-white hover:bg-gray-800"> |
| 8 | <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> |
| 9 | <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /> |
| 10 | </svg> |
| 11 | </button> |
| 12 | <a href="{% url 'dashboard' %}" class="flex-shrink-0"> |
| 13 | <img src="{% static 'img/fossilrepo-logo-dark.png' %}" alt="Fossilrepo" class="h-7 w-auto"> |
| 14 | </a> |
| 15 | </div> |
| 16 | <div class="flex items-center gap-3"> |
| 17 |