From 9da61588ebeeece26ab0b00f9064b16a28604756 Mon Sep 17 00:00:00 2001
From: Peter Pfeufer <info@ppfeufer.de>
Date: Wed, 24 Jan 2024 10:19:16 +0100
Subject: [PATCH] [CHANGE] Change the chevron for submenu depending on its
 toggle status

---
 .../allianceauth/framework/css/auth-framework.css      | 10 ++++++++++
 allianceauth/menu/templates/menu/menu-item-bs5.html    |  7 +++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/allianceauth/framework/static/allianceauth/framework/css/auth-framework.css b/allianceauth/framework/static/allianceauth/framework/css/auth-framework.css
index f4f1eb74..ff3aba71 100644
--- a/allianceauth/framework/static/allianceauth/framework/css/auth-framework.css
+++ b/allianceauth/framework/static/allianceauth/framework/css/auth-framework.css
@@ -31,6 +31,16 @@
     #sidebar-menu li > ul > li > a {
         max-width: 189px;
     }
+
+    #sidebar-menu [data-bs-toggle="collapse"] > i.fa-chevron-down,
+    #sidebar-menu [data-bs-toggle="collapse"].collapsed > i.fa-chevron-right {
+        display: block;
+    }
+
+    #sidebar-menu [data-bs-toggle="collapse"] > i.fa-chevron-right,
+    #sidebar-menu [data-bs-toggle="collapse"].collapsed > i.fa-chevron-down {
+        display: none;
+    }
 }
 
 /* Cursor classes
diff --git a/allianceauth/menu/templates/menu/menu-item-bs5.html b/allianceauth/menu/templates/menu/menu-item-bs5.html
index 1fb50114..e400e5b2 100644
--- a/allianceauth/menu/templates/menu/menu-item-bs5.html
+++ b/allianceauth/menu/templates/menu/menu-item-bs5.html
@@ -19,12 +19,15 @@
 
         {% if item.items|length > 0 %}
             <span
-                class="pill m-2 me-2 align-self-center fas fa-solid fa-chevron-down"
+                class="pill m-2 me-2 align-self-center collapsed"
                 type="button"
                 data-bs-toggle="collapse"
                 data-bs-target="#id-{{ item.text|slugify }}"
                 aria-expanded="false"
-                aria-controls="">
+                aria-controls=""
+            >
+                <i class="fas fa-chevron-right"></i>
+                <i class="fas fa-chevron-down"></i>
             </span>
             <!--<hr class="m-0 w-100">-->
             <ul class="collapse ps-1 w-100 border-start rounded-start border-light border-3" id="id-{{ item.text|slugify }}">