From 2733c92da5d6d909850881c4721e9552a8458fdd Mon Sep 17 00:00:00 2001 From: Herculino Trotta Date: Fri, 22 Aug 2025 13:14:47 -0300 Subject: [PATCH 1/2] style(sidebar): truncate e-mail if it's too long --- app/templates/includes/sidebar.html | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/app/templates/includes/sidebar.html b/app/templates/includes/sidebar.html index 29c57ad..1e7bd9f 100644 --- a/app/templates/includes/sidebar.html +++ b/app/templates/includes/sidebar.html @@ -273,14 +273,20 @@
-
- - {{ user.email }} + class="ps-4 pe-2 py-2 d-flex align-items-center text-decoration-none justify-content-between"> + +
+ + + + {{ user.email }} +
+
{% include 'includes/navbar/user_menu.html' %}
+
From abf3a148cc4ecbd12d7d2699d83a6434611f9434 Mon Sep 17 00:00:00 2001 From: Herculino Trotta Date: Fri, 22 Aug 2025 17:15:32 -0300 Subject: [PATCH 2/2] feat(sidebar): add button to keep it open --- app/WYGIWYH/settings.py | 2 +- app/apps/users/urls.py | 5 + app/apps/users/views.py | 15 ++ app/templates/common/placeholder.html | 3 + .../components/sidebar_menu_header.html | 2 +- .../cotton/components/sidebar_menu_item.html | 4 +- .../components/sidebar_menu_url_item.html | 4 +- app/templates/includes/sidebar.html | 63 ++++++--- app/templates/layouts/base.html | 2 +- frontend/src/styles/tailwind.css | 132 +++++++++++++++++- 10 files changed, 205 insertions(+), 27 deletions(-) create mode 100644 app/templates/common/placeholder.html 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 }} + {{ 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 %}
  • {{ title }} + class="ms-3 fw-medium tw:lg:group-hover:truncate tw:lg:group-focus:truncate tw:lg:group-hover:text-ellipsis tw:lg:group-focus:text-ellipsis">{{ title }}
    • 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 @@
  • {{ title }} + class="ms-3 fw-medium tw:lg:group-hover:truncate tw:lg:group-focus:truncate tw:lg:group-hover:text-ellipsis tw:lg:group-focus:text-ellipsis">{{ title }}
    • diff --git a/app/templates/includes/sidebar.html b/app/templates/includes/sidebar.html index 1e7bd9f..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 }}
    -
    +
    {% include 'includes/navbar/user_menu.html' %}
    +
    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; + } +}