From dd1f6a6ef291b1b6bb8461a98c8e367908569947 Mon Sep 17 00:00:00 2001 From: Herculino Trotta Date: Mon, 4 Aug 2025 22:10:44 -0300 Subject: [PATCH 1/2] feat: add sidebar --- .../components/sidebar_menu_header.html | 7 + .../cotton/components/sidebar_menu_item.html | 8 + app/templates/includes/sidebar.html | 149 ++++++++++++++++++ 3 files changed, 164 insertions(+) create mode 100644 app/templates/cotton/components/sidebar_menu_header.html create mode 100644 app/templates/cotton/components/sidebar_menu_item.html create mode 100644 app/templates/includes/sidebar.html diff --git a/app/templates/cotton/components/sidebar_menu_header.html b/app/templates/cotton/components/sidebar_menu_header.html new file mode 100644 index 0000000..1a6c9c7 --- /dev/null +++ b/app/templates/cotton/components/sidebar_menu_header.html @@ -0,0 +1,7 @@ +
  • + +
    • diff --git a/app/templates/cotton/components/sidebar_menu_item.html b/app/templates/cotton/components/sidebar_menu_item.html new file mode 100644 index 0000000..aa3b009 --- /dev/null +++ b/app/templates/cotton/components/sidebar_menu_item.html @@ -0,0 +1,8 @@ +{% load active_link %} +
  • + + + {{ title }} + +
    • diff --git a/app/templates/includes/sidebar.html b/app/templates/includes/sidebar.html new file mode 100644 index 0000000..2c1f39e --- /dev/null +++ b/app/templates/includes/sidebar.html @@ -0,0 +1,149 @@ +{% load active_link %} +{% load cache_access %} +{% load settings %} +{% load i18n %} +{% load static %} + From f90a31f2b9b8004bca785495ff7c24d8fd804a9a Mon Sep 17 00:00:00 2001 From: Herculino Trotta Date: Wed, 6 Aug 2025 11:35:17 -0300 Subject: [PATCH 2/2] feat: add sidebar --- .../sidebar_menu_collapsible_header.html | 12 + .../components/sidebar_menu_header.html | 13 +- .../cotton/components/sidebar_menu_item.html | 10 +- .../components/sidebar_menu_url_item.html | 16 + app/templates/includes/mobile_navbar.html | 16 + app/templates/includes/navbar/user_menu.html | 7 +- app/templates/includes/sidebar.html | 394 ++++++++++++------ app/templates/layouts/base.html | 36 +- frontend/src/styles/_animations.scss | 13 +- frontend/src/styles/style.scss | 8 + frontend/src/styles/tailwind.css | 8 + 11 files changed, 374 insertions(+), 159 deletions(-) create mode 100644 app/templates/cotton/components/sidebar_menu_collapsible_header.html create mode 100644 app/templates/cotton/components/sidebar_menu_url_item.html create mode 100644 app/templates/includes/mobile_navbar.html diff --git a/app/templates/cotton/components/sidebar_menu_collapsible_header.html b/app/templates/cotton/components/sidebar_menu_collapsible_header.html new file mode 100644 index 0000000..8f54eeb --- /dev/null +++ b/app/templates/cotton/components/sidebar_menu_collapsible_header.html @@ -0,0 +1,12 @@ +
  • + +
    • +
    + {{ slot }} +
    diff --git a/app/templates/cotton/components/sidebar_menu_header.html b/app/templates/cotton/components/sidebar_menu_header.html index 1a6c9c7..678e7d6 100644 --- a/app/templates/cotton/components/sidebar_menu_header.html +++ b/app/templates/cotton/components/sidebar_menu_header.html @@ -1,7 +1,6 @@ -
  • - -
    • +
  • +
    + {{ title }} +
    +
    +
    • diff --git a/app/templates/cotton/components/sidebar_menu_item.html b/app/templates/cotton/components/sidebar_menu_item.html index aa3b009..f360815 100644 --- a/app/templates/cotton/components/sidebar_menu_item.html +++ b/app/templates/cotton/components/sidebar_menu_item.html @@ -1,8 +1,14 @@ {% load active_link %}
  • + class="tw:text-wrap tw:lg:text-nowrap tw:lg:text-sm d-flex align-items-center text-decoration-none p-2 rounded-3 sidebar-item {% active_link views=active css_class="sidebar-active" %}" + {% if tooltip %} + data-bs-placement="right" + data-bs-toggle="tooltip" + data-bs-title="{{ tooltip }}" + {% endif %}> - {{ title }} + {{ title }}
    • diff --git a/app/templates/cotton/components/sidebar_menu_url_item.html b/app/templates/cotton/components/sidebar_menu_url_item.html new file mode 100644 index 0000000..30870d1 --- /dev/null +++ b/app/templates/cotton/components/sidebar_menu_url_item.html @@ -0,0 +1,16 @@ +{% load active_link %} +
  • + + + + {{ title }} + +
    • diff --git a/app/templates/includes/mobile_navbar.html b/app/templates/includes/mobile_navbar.html new file mode 100644 index 0000000..f20370b --- /dev/null +++ b/app/templates/includes/mobile_navbar.html @@ -0,0 +1,16 @@ +{% load cache_access %} +{% load settings %} +{% load static %} +{% load i18n %} +{% load active_link %} + diff --git a/app/templates/includes/navbar/user_menu.html b/app/templates/includes/navbar/user_menu.html index 224c09e..4f86fde 100644 --- a/app/templates/includes/navbar/user_menu.html +++ b/app/templates/includes/navbar/user_menu.html @@ -1,13 +1,10 @@ {% load settings %} {% load i18n %}
    - diff --git a/app/templates/layouts/base.html b/app/templates/layouts/base.html index d5dc92f..a50c98a 100644 --- a/app/templates/layouts/base.html +++ b/app/templates/layouts/base.html @@ -28,27 +28,31 @@
    - {% include 'includes/navbar.html' %} - {% settings "DEMO" as demo_mode %} - {% if demo_mode %} -
    - - {% endif %} + {% endif %} -
    - {% block content %}{% endblock %} -
    +
    + {% block content %}{% endblock %} +
    - {% include 'includes/offcanvas.html' %} - {% include 'includes/toasts.html' %} + {% include 'includes/offcanvas.html' %} + {% include 'includes/toasts.html' %} +
    {% include 'includes/tools/calculator.html' %} diff --git a/frontend/src/styles/_animations.scss b/frontend/src/styles/_animations.scss index 4a06fa3..b49be93 100644 --- a/frontend/src/styles/_animations.scss +++ b/frontend/src/styles/_animations.scss @@ -209,11 +209,11 @@ .slide-in-bottom { - animation: slide-in-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; + animation: slide-in-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } .slide-in-bottom-reverse { - animation: slide-in-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both; + animation: slide-in-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both; } /* ---------------------------------------------- @@ -238,3 +238,12 @@ opacity: 1; } } + +@keyframes disable-pointer-events { + 0%, 99% { + pointer-events: none; + } + 100% { + pointer-events: auto; + } +} diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss index 23671fc..00599b7 100644 --- a/frontend/src/styles/style.scss +++ b/frontend/src/styles/style.scss @@ -77,3 +77,11 @@ select[multiple] { margin-top: 20px; font-size: 14px; } + +[data-bs-toggle="collapse"] .fa-chevron-down { + transition: transform 0.25s ease-in-out; +} + +[data-bs-toggle="collapse"][aria-expanded="true"] .fa-chevron-down { + transform: rotate(-180deg); +} diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css index ec856eb..d65d100 100644 --- a/frontend/src/styles/tailwind.css +++ b/frontend/src/styles/tailwind.css @@ -1,3 +1,11 @@ @import "tailwindcss" prefix(tw) source("../../../app/templates/"); @custom-variant dark (&:where([data-bs-theme=dark], [data-bs-theme=dark] *)); @custom-variant hover (&:hover); + +.sidebar-active { + @apply tw:bg-gray-700 tw:text-white; +} + +.sidebar-item:not(.sidebar-active) { + @apply tw:text-gray-300 tw:hover:text-white; +}