From 7425176b3fb803812a604379a8cad2009516684d Mon Sep 17 00:00:00 2001
From: Peter Pfeufer <info@ppfeufer.de>
Date: Tue, 23 Jan 2024 15:23:48 +0100
Subject: [PATCH] [CHANGE] Side menu improvements

- Increase width to 325px
- Add some CSS tricks to ensure long link names don't break the menu
---
 .../framework/css/auth-framework.css          | 20 +++++++++++++++++++
 .../menu/templates/menu/menu-item-bs5.html    |  6 +++---
 .../templates/menu/sortable-side-menu.html    |  2 +-
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/allianceauth/framework/static/allianceauth/framework/css/auth-framework.css b/allianceauth/framework/static/allianceauth/framework/css/auth-framework.css
index 51e49703..f4f1eb74 100644
--- a/allianceauth/framework/static/allianceauth/framework/css/auth-framework.css
+++ b/allianceauth/framework/static/allianceauth/framework/css/auth-framework.css
@@ -13,6 +13,26 @@
     }
 }
 
+/* Side Navigation
+------------------------------------------------------------------------------------- */
+@media all {
+    #sidebar > div {
+        width: 325px;
+    }
+
+    #sidebar-menu li > a,
+    #sidebar-menu li > ul > li > a {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        max-width: 210px;
+    }
+
+    #sidebar-menu li > ul > li > a {
+        max-width: 189px;
+    }
+}
+
 /* Cursor classes
 ------------------------------------------------------------------------------------- */
 @media all {
diff --git a/allianceauth/menu/templates/menu/menu-item-bs5.html b/allianceauth/menu/templates/menu/menu-item-bs5.html
index 152d0946..1fb50114 100644
--- a/allianceauth/menu/templates/menu/menu-item-bs5.html
+++ b/allianceauth/menu/templates/menu/menu-item-bs5.html
@@ -10,16 +10,16 @@
         </a>
 
         {% if item.count >= 1 %}
-            <span class="badge bg-primary m-2 align-self-center {% if item.items|length == 0 %}me-4{% endif %}">
+            <span class="badge bg-primary m-2 align-self-center {% if item.items|length == 0 %}me-2{% endif %}">
                 {{ item.count }}
             </span>
         {% elif item.url %}
-            <span class="pill m-2 me-4 align-self-center fas fa-external-link-alt"></span>
+            <span class="pill m-2 me-2 align-self-center fas fa-external-link-alt" title="{% translate 'External link' %}"></span>
         {% endif %}
 
         {% if item.items|length > 0 %}
             <span
-                class="pill m-2 me-4 align-self-center fas fa-solid fa-chevron-down"
+                class="pill m-2 me-2 align-self-center fas fa-solid fa-chevron-down"
                 type="button"
                 data-bs-toggle="collapse"
                 data-bs-target="#id-{{ item.text|slugify }}"
diff --git a/allianceauth/menu/templates/menu/sortable-side-menu.html b/allianceauth/menu/templates/menu/sortable-side-menu.html
index aaa399bb..793481f8 100644
--- a/allianceauth/menu/templates/menu/sortable-side-menu.html
+++ b/allianceauth/menu/templates/menu/sortable-side-menu.html
@@ -4,7 +4,7 @@
 
 <div class="col-auto px-0">
     <div class="collapse collapse-horizontal" tabindex="-1" id="sidebar">
-        <div style="width: 300px;">
+        <div>
             <div class="nav-padding navbar-dark bg-dark text-light px-0 d-flex flex-column overflow-hidden vh-100 {% if not user.is_authenticated %}position-relative{% endif %}">
                 {% if user.is_authenticated %}
                     <ul id="sidebar-menu" class="navbar-nav flex-column mb-auto overflow-auto pt-2">