starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-03-19 07:54:08 +01:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

Merge pull request #343

Browse Source 
feat(sidebar): add button to keep it open
This commit is contained in:
Herculino Trotta
2025-08-22 17:15:55 -03:00
committed by GitHub
parent 9bfbe54ed5 abf3a148cc
commit ab1c074f27
10 changed files with 214 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/WYGIWYH/settings.py
View File

@@ -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",

5
app/apps/users/urls.py
View File

@@ -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,

15
app/apps/users/views.py
View File

@@ -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"])

3
app/templates/common/placeholder.html Normal file
View File

@@ -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#}
<div class="tw:lg:w-[15vw]"></div>
<div class="tw:lg:ml-[16vw]"></div>

2
app/templates/cotton/components/sidebar_menu_header.html
View File

@@ -1,6 +1,6 @@
<li>
<div class="d-flex align-items-center">
<span class="text-muted small fw-bold text-uppercase tw:lg:hidden tw:lg:group-hover:inline me-2">{{ title }}</span>
<span class="sidebar-menu-header text-muted small fw-bold text-uppercase me-2">{{ title }}</span>
<hr class="flex-grow-1"/>
</div>
</li>

4
app/templates/cotton/components/sidebar_menu_item.html
View File

@@ -1,7 +1,7 @@
{% load active_link %}
<li>
<a href="{% url url %}"
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" %}"
class="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"
@@ -9,6 +9,6 @@
{% endif %}>
<i class="{{ icon }} fa-fw"></i>
<span
class="ms-3 fw-medium tw:lg:invisible tw:lg:group-hover:visible tw:lg:group-hover:truncate tw:lg:group-focus:truncate tw:lg:group-hover:text-ellipsis tw:lg:group-focus:text-ellipsis">{{ title }}</span>
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 }}</span>
</a>
</li>

4
app/templates/cotton/components/sidebar_menu_url_item.html
View File

@@ -2,7 +2,7 @@
<li>
<a href="{{ url }}"
hx-boost="false"
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" %}"
class="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"
@@ -11,6 +11,6 @@
<i class="{{ icon }} fa-fw"></i>
<span
class="ms-3 fw-medium tw:lg:invisible tw:lg:group-hover:visible tw:lg:group-hover:truncate tw:lg:group-focus:truncate tw:lg:group-hover:text-ellipsis tw:lg:group-focus:text-ellipsis">{{ title }}</span>
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 }}</span>
</a>
</li>

75
app/templates/includes/sidebar.html
View File

@@ -5,31 +5,56 @@
{% load static %}
<div
class="tw:group tw:lg:w-16 tw:lg:hover:w-112 tw:transition-all tw:duration-100 tw:fixed tw:top-0 tw:start-0 tw:h-full tw:z-1020">
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">
<nav
id="sidebar"
hx-boost="true"
data-bs-scroll="true"
class="offcanvas-lg offcanvas-start d-lg-flex flex-column position-fixed top-0 start-0 h-100 bg-body-tertiary shadow-sm tw:z-1020 tw:lg:w-16 tw:lg:group-hover:w-104 tw:transition-all tw:duration-100 tw:overflow-hidden">
<div
class="tw:hidden tw:lg:group-hover:block tw:absolute tw:top-0 tw:left-104 tw:w-8 tw:h-full tw:bg-transparent tw:pointer-events-auto tw:z-10"></div>
class="offcanvas-lg offcanvas-start d-lg-flex flex-column position-fixed top-0 start-0 h-100 bg-body-tertiary shadow-sm tw:z-1020">
<a href="{% url 'index' %}" class="d-none d-lg-flex tw:justify-start p-3 text-decoration-none">
<img src="{% static 'img/logo-icon.svg' %}" alt="WYGIWYH Logo" height="30" width="30" title="WYGIWYH"/>
<span class="fs-4 fw-bold ms-3 tw:lg:invisible tw:lg:group-hover:visible">WYGIWYH</span>
</a>
{# <div>#}
{# <a href="{% url 'index' %}" class="d-none d-lg-flex tw:justify-start p-3 text-decoration-none sidebar-title">#}
{# <img src="{% static 'img/logo-icon.svg' %}" alt="WYGIWYH Logo" height="30" width="30" title="WYGIWYH"/>#}
{# <span class="fs-4 fw-bold ms-3">WYGIWYH</span>#}
{# </a>#}
{##}
{##}
{# </div>#}
<div class="d-none d-lg-flex tw:justify-between tw:items-center tw:border-b tw:border-gray-600 tw:lg:flex">
<a href="{% url 'index' %}" class="m-0 d-none d-lg-flex tw:justify-start p-3 text-decoration-none sidebar-title">
<img src="{% static 'img/logo-icon.svg' %}" alt="WYGIWYH Logo" height="30" width="30" title="WYGIWYH"/>
<span class="fs-4 fw-bold ms-3">WYGIWYH</span>
</a>
<button
id="sidebar-toggle-btn"
class="text-secondary-emphasis tw:rounded-full tw:w-12 tw:h-12 tw:flex tw:items-center tw:justify-center tw:transition-all tw:duration-300"
hx-get="{% url 'toggle_sidebar_status' %}"
_="on click
toggle .sidebar-floating on #sidebar-container
toggle .tw\:group on #sidebar-container
toggle .sidebar-fixed on #sidebar-container
end
"
>
<i class="fa-solid fa-thumbtack fa-sm"></i>
<i class="fa-solid fa-thumbtack-slash fa-sm"></i>
</button>
</div>
<div class="offcanvas-header">
<a href="{% url 'index' %}" class="offcanvas-title d-flex tw:justify-start text-decoration-none">
<img src="{% static 'img/logo-icon.svg' %}" alt="WYGIWYH Logo" height="30" width="30" title="WYGIWYH"/>
<span class="fs-4 fw-bold ms-3 tw:lg:invisible tw:lg:group-hover:visible">WYGIWYH</span>
<span class="fs-4 fw-bold ms-3">WYGIWYH</span>
</a>
<button type="button" class="btn-close" data-bs-target="#sidebar" data-bs-dismiss="offcanvas"
aria-label={% translate 'Close' %}></button>
</div>
<hr class="m-0">
<ul class="list-unstyled p-3 d-flex flex-column gap-0 tw:group-hover:lg:overflow-y-auto tw:lg:overflow-y-hidden tw:overflow-y-auto tw:overflow-x-hidden tw:text-nowrap tw:lg:group-hover:animate-[disable-pointer-events]"
<ul class="list-unstyled p-3 d-flex flex-column gap-0 tw:text-nowrap tw:lg:group-hover:animate-[disable-pointer-events]"
style="animation-duration: 100ms">
<c-components.sidebar-menu-item
@@ -127,10 +152,10 @@
data-bs-target="#collapsible-panel"
aria-expanded="false"
aria-controls="collapsible-panel"
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='tags_index||entities_index||categories_index||accounts_index||account_groups_index||currencies_index||exchange_rates_index||rules_index||import_profiles_index||automatic_exchange_rates_index||export_index||users_index' css_class="sidebar-active" %}">
class="sidebar-menu-item 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='tags_index||entities_index||categories_index||accounts_index||account_groups_index||currencies_index||exchange_rates_index||rules_index||import_profiles_index||automatic_exchange_rates_index||export_index||users_index' css_class="sidebar-active" %}">
<i class="fa-solid fa-toolbox fa-fw"></i>
<span
class="ms-3 fw-medium tw:lg:invisible tw:lg:group-hover:visible tw:lg:group-hover:truncate tw:lg:group-focus:truncate tw:lg:group-hover:text-ellipsis tw:lg:group-focus:text-ellipsis">
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">
{% translate 'Management' %}
</span>
</div>
@@ -140,14 +165,13 @@
<div id="collapsible-panel"
class="p-0 collapse tw:absolute tw:bottom-0 tw:left-0 tw:w-full tw:z-30 tw:max-h-dvh">
<div class="tw:h-dvh tw:backdrop-blur-3xl tw:flex tw:flex-col">
<!-- Header -->
<div
class="tw:flex tw:justify-between tw:items-center tw:p-4 tw:border-b tw:border-gray-600 tw:lg:hidden tw:lg:group-hover:flex">
<h5 class="tw:text-lg tw:font-semibold tw:text-gray-800 tw:lg:invisible tw:lg:group-hover:visible">
class="tw:justify-between tw:items-center tw:p-4 tw:border-b tw:border-gray-600 sidebar-submenu-header">
<h5 class="tw:text-lg tw:font-semibold tw:text-gray-800 m-0">
{% trans 'Management' %}
</h5>
<button type="button" class="btn-close tw:lg:hidden tw:lg:group-hover:inline" aria-label="Close"
<button type="button" class="btn-close" aria-label="Close"
data-bs-toggle="collapse"
data-bs-target="#collapsible-panel"
aria-expanded="true"
@@ -155,7 +179,7 @@
</button>
</div>
<ul class="list-unstyled p-3 d-flex flex-column gap-1 tw:group-hover:lg:overflow-y-auto tw:lg:overflow-y-hidden tw:overflow-y-auto tw:overflow-x-hidden tw:text-nowrap tw:lg:group-hover:animate-[disable-pointer-events] tw:flex-1"
<ul class="list-unstyled p-3 d-flex flex-column gap-1 tw:lg:group-hover:animate-[disable-pointer-events] tw:flex-1"
style="animation-duration: 100ms">
<c-components.sidebar-menu-header title="{% translate 'Transactions' %}"></c-components.sidebar-menu-header>
<c-components.sidebar-menu-item
@@ -273,17 +297,24 @@
<div>
<hr class="my-1">
<div
class="ps-4 pe-2 py-2 d-flex align-items-center text-body-secondary text-decoration-none justify-content-between tw:text-wrap tw:lg:text-nowrap">
<div>
<i class="fa-solid fa-circle-user"></i>
<strong class="ms-2 tw:lg:invisible tw:lg:group-hover:visible">{{ user.email }}</strong>
class="ps-4 pe-2 py-2 d-flex align-items-center text-decoration-none justify-content-between">
<div class="d-flex align-items-center" style="min-width: 0;">
<i class="fa-solid fa-circle-user text-body-secondary"></i>
<strong class="mx-2 text-body-secondary text-truncate sidebar-invisible">
{{ user.email }}
</strong>
</div>
<div class="tw:lg:invisible tw:lg:group-hover:visible">
<div class="sidebar-invisible">
{% include 'includes/navbar/user_menu.html' %}
</div>
</div>
</div>
</nav>
<div
class="tw:hidden tw:lg:group-hover:block tw:absolute tw:top-0 tw:left-104 tw:w-16 tw:h-full tw:bg-transparent"></div>
</div>

2
app/templates/layouts/base.html
View File

@@ -35,7 +35,7 @@
{% include 'includes/mobile_navbar.html' %}
{% include 'includes/sidebar.html' %}
<main class="tw:p-4 tw:lg:ml-16">
<main class="tw:p-4">
{% settings "DEMO" as demo_mode %}
{% if demo_mode %}
<div class="px-3 m-0" id="demo-mode-alert" hx-preserve>

132
frontend/src/styles/tailwind.css
View File

@@ -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;
}
}