From 76385b78d5a0a87218b88d8290c0a904ae07cc93 Mon Sep 17 00:00:00 2001
From: Yasen Pramatarov <yasen@lindeas.com>
Date: Wed, 19 Nov 2025 19:32:17 +0200
Subject: [PATCH] Redesigns the sidebar

---
 app/templates/page-sidebar.php   | 10 +++++-----
 public_html/static/css/main.css  | 16 +++++++++++++++-
 public_html/static/js/sidebar.js | 10 +++++-----
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/app/templates/page-sidebar.php b/app/templates/page-sidebar.php
index b85ba8d..d26ce5d 100644
--- a/app/templates/page-sidebar.php
+++ b/app/templates/page-sidebar.php
@@ -1,7 +1,7 @@
         <div class="row">
 
             <!-- Sidebar -->
-            <div class="col-md-3 mb-5 sidebar-wrapper bg-light" id="sidebar">
+            <div class="col-md-3 sidebar-wrapper" id="sidebar">
                 <div class="text-center" style="border: 1px solid #0dcaf0; height: 22px;" id="time_now">
 <?php
 $timeNow = new DateTime('now', new DateTimeZone($userTimezone));
@@ -10,7 +10,7 @@ $timeNow = new DateTime('now', new DateTimeZone($userTimezone));
                 </div>
 
                 <div class="col-4"><button class="btn btn-sm btn-info toggle-sidebar-button" type="button" id="toggleSidebarButton" value=">>"></button></div>
-                <div class="sidebar-content card ml-3 mt-3">
+                <div class="sidebar-content card ml-3 mt-0">
                     <ul class="list-group">
 
                         <a href="<?= htmlspecialchars($app_root) ?>?platform=<?= htmlspecialchars($platform_id) ?>&page=dashboard">
@@ -19,7 +19,7 @@ $timeNow = new DateTime('now', new DateTimeZone($userTimezone));
                             </li>
                         </a>
 
-                        <li class="list-group-item bg-light" style="border: none;"><p class="text-end mb-0"><small>logs statistics</small></p></li>
+                        <li class="list-group-item sidebar-section-title-first">logs statistics</li>
 
                         <a href="<?= htmlspecialchars($app_root) ?>?platform=<?= htmlspecialchars($platform_id) ?>&page=conferences">
                             <li class="list-group-item<?php if ($page === 'conferences') echo ' list-group-item-secondary'; else echo ' list-group-item-action'; ?>">
@@ -37,7 +37,7 @@ $timeNow = new DateTime('now', new DateTimeZone($userTimezone));
                             </li>
                         </a>
 
-                        <li class="list-group-item bg-light" style="border: none;"><p class="text-end mb-0"><small>live data</small></p></li>
+                        <li class="list-group-item sidebar-section-title">live data</li>
 
                         <a href="<?= htmlspecialchars($app_root) ?>?platform=<?= htmlspecialchars($platform_id) ?>&page=graphs">
                             <li class="list-group-item<?php if ($page === 'graphs') echo ' list-group-item-secondary'; else echo ' list-group-item-action'; ?>">
@@ -65,7 +65,7 @@ $timeNow = new DateTime('now', new DateTimeZone($userTimezone));
                             </li>
                         </a>
 
-                        <li class="list-group-item bg-light" style="border: none;"><p class="text-end mb-0"><small>jitsi platforms settings</small></p></li>
+                        <li class="list-group-item sidebar-section-title">jitsi platforms settings</li>
 
                         <a href="<?= htmlspecialchars($app_root) ?>?page=settings">
                             <li class="list-group-item<?php if ($page === 'settings') echo ' list-group-item-secondary'; else echo ' list-group-item-action'; ?>">
diff --git a/public_html/static/css/main.css b/public_html/static/css/main.css
index 457704b..33846dd 100644
--- a/public_html/static/css/main.css
+++ b/public_html/static/css/main.css
@@ -704,6 +704,16 @@ body {
 }
 
 /* sidebar section titles */
+.sidebar-content .sidebar-section-title-first {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #6c757d;
+    padding: 0.6rem 1.1rem 0.45rem 1.1rem;
+    cursor: default;
+    background-color: transparent;
+    font-weight: 300;
+}
 .sidebar-content .sidebar-section-title {
     font-size: 0.75rem;
     text-transform: uppercase;
@@ -712,10 +722,14 @@ body {
     padding: 0.6rem 1.1rem 0.45rem 1.1rem;
     cursor: default;
     background-color: transparent;
-    font-weight: 600;
+    font-weight: 300;
+    border-top: 1px solid lightgray;
 }
 
 /* make section titles invisible (but keep spacing) when collapsed */
+.sidebar-wrapper.collapsed .sidebar-section-title-first {
+    visibility: hidden;
+}
 .sidebar-wrapper.collapsed .sidebar-section-title {
     visibility: hidden;
 }
diff --git a/public_html/static/js/sidebar.js b/public_html/static/js/sidebar.js
index 7fef3ed..3524ace 100644
--- a/public_html/static/js/sidebar.js
+++ b/public_html/static/js/sidebar.js
@@ -19,13 +19,13 @@ document.addEventListener('DOMContentLoaded', function () {
             toggleButton.textContent = ">>";
             sidebar.classList.add('collapsed');
             mainContent.classList.add('expanded');
-            timeNow.style.display = 'none';
+            timeNow.style.opacity = '0';
         } else {
             toggleButton.value = "<<";
             toggleButton.textContent = "<<";
             sidebar.classList.remove('collapsed');
             mainContent.classList.remove('expanded');
-            timeNow.style.display = 'block';
+            timeNow.style.opacity = '1';
         }
     }
 
@@ -37,15 +37,15 @@ document.addEventListener('DOMContentLoaded', function () {
         sidebar.classList.toggle('collapsed');
         document.documentElement.classList.toggle('sidebar-collapsed');
         mainContent.classList.toggle('expanded');
-        // Toggle the value between ">>" and "<<"
+        // Toggle the value between ">>" and "<<" and fade time box
         if (toggleButton.value === ">>") {
           toggleButton.value = "<<";
           toggleButton.textContent = "<<";
-          timeNow.style.display = 'block';
+          timeNow.style.opacity = '1';
         } else {
           toggleButton.value = ">>";
           toggleButton.textContent = ">>";
-          timeNow.style.display = 'none';
+          timeNow.style.opacity = '0';
         }
 
         // Update with the new state