diff --git a/app/WYGIWYH/settings.py b/app/WYGIWYH/settings.py
index 84c9749..cf5db80 100644
--- a/app/WYGIWYH/settings.py
+++ b/app/WYGIWYH/settings.py
@@ -379,7 +379,7 @@ DEBUG_TOOLBAR_PANELS = [
"debug_toolbar.panels.signals.SignalsPanel",
"debug_toolbar.panels.redirects.RedirectsPanel",
"debug_toolbar.panels.profiling.ProfilingPanel",
- "cachalot.panels.CachalotPanel",
+ # "cachalot.panels.CachalotPanel",
]
INTERNAL_IPS = [
"127.0.0.1",
diff --git a/app/apps/users/urls.py b/app/apps/users/urls.py
index faf0b4f..6576bb8 100644
--- a/app/apps/users/urls.py
+++ b/app/apps/users/urls.py
@@ -17,6 +17,11 @@ urlpatterns = [
views.toggle_sound_playing,
name="toggle_sound_playing",
),
+ path(
+ "user/toggle-sidebar/",
+ views.toggle_sidebar_status,
+ name="toggle_sidebar_status",
+ ),
path(
"user/settings/",
views.update_settings,
diff --git a/app/apps/users/views.py b/app/apps/users/views.py
index 535f6ec..6460a09 100644
--- a/app/apps/users/views.py
+++ b/app/apps/users/views.py
@@ -116,6 +116,21 @@ def update_settings(request):
return render(request, "users/fragments/user_settings.html", {"form": form})
+@only_htmx
+@htmx_login_required
+def toggle_sidebar_status(request):
+ if request.session["sidebar_status"] == "floating":
+ request.session["sidebar_status"] = "fixed"
+ elif request.session["sidebar_status"] == "fixed":
+ request.session["sidebar_status"] = "floating"
+ else:
+ request.session["sidebar_status"] = "fixed"
+
+ return HttpResponse(
+ status=204,
+ )
+
+
@htmx_login_required
@is_superuser
@require_http_methods(["GET"])
diff --git a/app/templates/common/placeholder.html b/app/templates/common/placeholder.html
new file mode 100644
index 0000000..c01e132
--- /dev/null
+++ b/app/templates/common/placeholder.html
@@ -0,0 +1,3 @@
+{#This is here so we can add dynamic Tailwind classes that will be required via JS/hyperscript but Tailwind has no knowledge of#}
+
+
diff --git a/app/templates/cotton/components/sidebar_menu_header.html b/app/templates/cotton/components/sidebar_menu_header.html
index 678e7d6..6c8c70e 100644
--- a/app/templates/cotton/components/sidebar_menu_header.html
+++ b/app/templates/cotton/components/sidebar_menu_header.html
@@ -1,6 +1,6 @@
- {{ title }}
+
diff --git a/app/templates/cotton/components/sidebar_menu_item.html b/app/templates/cotton/components/sidebar_menu_item.html
index f360815..c2dc437 100644
--- a/app/templates/cotton/components/sidebar_menu_item.html
+++ b/app/templates/cotton/components/sidebar_menu_item.html
@@ -1,7 +1,7 @@
{% load active_link %}
diff --git a/app/templates/cotton/components/sidebar_menu_url_item.html b/app/templates/cotton/components/sidebar_menu_url_item.html
index 30870d1..911d671 100644
--- a/app/templates/cotton/components/sidebar_menu_url_item.html
+++ b/app/templates/cotton/components/sidebar_menu_url_item.html
@@ -2,7 +2,7 @@
diff --git a/app/templates/includes/sidebar.html b/app/templates/includes/sidebar.html
index 29c57ad..1059c11 100644
--- a/app/templates/includes/sidebar.html
+++ b/app/templates/includes/sidebar.html
@@ -5,31 +5,56 @@
{% load static %}
+ class="sidebar {% if request.session.sidebar_status == 'floating' %}tw:group sidebar-floating{% elif request.session.sidebar_status == 'fixed' %}sidebar-fixed{% else %}tw:group sidebar-floating{% endif %}"
+ id="sidebar-container">
@@ -140,14 +165,13 @@
-
-
+ class="tw:justify-between tw:items-center tw:p-4 tw:border-b tw:border-gray-600 sidebar-submenu-header">
+
{% trans 'Management' %}
-
-
-
-
-
{{ user.email }}
+ class="ps-4 pe-2 py-2 d-flex align-items-center text-decoration-none justify-content-between">
+
+
+
+
+
+ {{ user.email }}
+
-
+
+
+
+
diff --git a/app/templates/layouts/base.html b/app/templates/layouts/base.html
index a50c98a..d3ce38f 100644
--- a/app/templates/layouts/base.html
+++ b/app/templates/layouts/base.html
@@ -35,7 +35,7 @@
{% include 'includes/mobile_navbar.html' %}
{% include 'includes/sidebar.html' %}
-
+
{% settings "DEMO" as demo_mode %}
{% if demo_mode %}
diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css
index d65d100..5310d0e 100644
--- a/frontend/src/styles/tailwind.css
+++ b/frontend/src/styles/tailwind.css
@@ -3,9 +3,139 @@
@custom-variant hover (&:hover);
.sidebar-active {
- @apply tw:bg-gray-700 tw:text-white;
+ @apply tw:bg-gray-700 tw:text-white;
}
.sidebar-item:not(.sidebar-active) {
@apply tw:text-gray-300 tw:hover:text-white;
}
+
+@layer components {
+ .sidebar {
+ @apply tw:z-1020 tw:fixed tw:top-0 tw:start-0 tw:h-full tw:transition-all tw:duration-100;
+ }
+
+ .sidebar-floating {
+ /* Establishes the hover group and sets the collapsed/hover widths for the container */
+ @apply tw:lg:w-16 tw:lg:hover:w-112;
+ }
+
+ .sidebar-floating #sidebar {
+ /* Sets the collapsed/hover widths for the inner navigation element */
+ @apply tw:lg:w-16 tw:lg:group-hover:w-104 tw:transition-all tw:duration-100 tw:overflow-hidden;
+ }
+
+ .sidebar-floating + main {
+ /* Adjusts the main content margin to account for the collapsed sidebar */
+ @apply tw:lg:ml-16 tw:transition-all tw:duration-100;
+ }
+
+ .sidebar-floating .sidebar-item span {
+ /* Hides the text labels and reveals them only on hover */
+ @apply tw:lg:invisible tw:lg:group-hover:visible;
+ }
+
+ .sidebar-floating .sidebar-invisible {
+ /* Hides the text labels and reveals them only on hover */
+ @apply tw:lg:invisible tw:lg:group-hover:visible;
+ }
+
+ .sidebar-floating .sidebar-menu-header {
+ /* Hides the menu headers and reveals them only on hover */
+ @apply tw:lg:hidden tw:lg:group-hover:inline;
+ }
+
+ .sidebar-floating #sidebar-toggle-btn .fa-thumbtack-slash {
+ /* Hides the 'pin' icon in the floating state */
+ @apply tw:hidden!;
+ }
+
+ .sidebar-floating #sidebar-toggle-btn .fa-thumbtack {
+ /* Shows the 'expand' icon in the floating state */
+ @apply tw:inline-block!;
+ }
+
+ .sidebar-floating .sidebar-title span {
+ @apply tw:lg:invisible tw:lg:group-hover:visible
+ }
+
+ .sidebar-submenu-header {
+ @apply tw:flex;
+ }
+
+ .sidebar-floating .sidebar-submenu-header {
+ @apply tw:lg:hidden tw:lg:group-hover:flex;
+ }
+
+ .sidebar-floating .sidebar-submenu-header h5 {
+ @apply tw:lg:invisible tw:lg:group-hover:visible;
+ }
+
+ .sidebar-floating .sidebar-submenu-header button {
+ @apply tw:lg:hidden tw:lg:group-hover:inline;
+ }
+
+ .sidebar-floating .list-unstyled {
+ @apply tw:group-hover:lg:overflow-y-auto tw:lg:overflow-y-hidden tw:overflow-y-auto tw:overflow-x-hidden;
+ }
+
+ .sidebar-floating .sidebar-item {
+ @apply tw:text-wrap tw:lg:text-nowrap ;
+ }
+
+
+ /* --- STATE 2: Fixed (Permanently Expanded) --- */
+ .sidebar-fixed {
+ /* Sets the fixed, expanded width for the container */
+ @apply tw:lg:w-[17%] tw:transition-all tw:duration-100;
+ }
+
+ .sidebar-fixed #sidebar {
+ /* Sets the fixed, expanded width for the inner navigation */
+ @apply tw:lg:w-[17%] tw:transition-all tw:duration-100;
+ }
+
+ .sidebar-fixed + main {
+ /* Adjusts the main content margin to account for the expanded sidebar */
+ @apply tw:lg:ml-[17%] tw:transition-all tw:duration-100;
+
+ /* Using 16vw to account for padding/margins */
+ }
+
+ .sidebar-fixed .sidebar-item {
+ @apply tw:text-wrap;
+ }
+
+ .sidebar-fixed .sidebar-item span {
+ /* Ensures text labels are always visible */
+ @apply tw:lg:visible;
+ }
+
+ .sidebar-fixed .sidebar-menu-header {
+ /* Ensures menu headers are always visible */
+ @apply tw:lg:inline;
+ }
+
+ .sidebar-fixed #sidebar-toggle-btn .fa-thumbtack-slash {
+ /* Shows the 'pin' icon in the fixed state */
+ @apply tw:inline-block!;
+ }
+
+ .sidebar-fixed #sidebar-toggle-btn .fa-thumbtack {
+ /* Hides the 'expand' icon in the fixed state */
+ @apply tw:hidden!;
+ }
+
+ .sidebar-fixed .sidebar-title span {
+ @apply tw:lg:visible;
+ }
+
+ .sidebar-fixed .sidebar-submenu-header {
+ /* Ensures menu headers are always visible */
+ @apply tw:lg:flex;
+ }
+
+ .sidebar-fixed .list-unstyled {
+ @apply tw:overflow-y-auto tw:overflow-x-hidden;
+ }
+}