From 264eecdf7cb4abfe9c1175ef6ca06277ff2e0ecd Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Sat, 1 Mar 2025 21:51:41 -0500
Subject: [PATCH] Adjust sidebar layout and sizing

---
 pvc-vue/src/App.vue | 132 ++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 120 insertions(+), 12 deletions(-)

diff --git a/pvc-vue/src/App.vue b/pvc-vue/src/App.vue
index dffa3d1..b9e5c5a 100644
--- a/pvc-vue/src/App.vue
+++ b/pvc-vue/src/App.vue
@@ -3,10 +3,9 @@
     <!-- Sidebar -->
     <div class="sidebar bg-dark" :class="{ 'collapsed': sidebarCollapsed }">
       <div class="sidebar-header">
-        <h5 class="text-white mb-0">PVC Dashboard</h5>
-        <button class="btn btn-link text-white p-0 collapse-btn" @click="toggleSidebar">
-          <i class="fas" :class="sidebarCollapsed ? 'fa-chevron-right' : 'fa-chevron-left'"></i>
-        </button>
+        <h5 class="text-white mb-0 text-center">
+          {{ clusterData.cluster_name || 'Cluster' }}
+        </h5>
       </div>
       <div class="sidebar-content">
         <nav class="nav-menu">
@@ -25,7 +24,24 @@
         </nav>
       </div>
       <div class="sidebar-footer">
-        <button class="btn btn-outline-light w-100" @click="toggleConfig">
+        <!-- Refresh interval display with tooltip -->
+        <div class="refresh-display text-white-50 mb-3 text-center" data-title="Refresh Time">
+          <i class="fas fa-sync-alt"></i>
+          <span class="refresh-text ms-2">{{ api.config.updateInterval / 1000 }}s</span>
+        </div>
+        
+        <!-- Collapse/Expand button with tooltip -->
+        <button class="btn btn-outline-light w-100 mb-2" 
+                @click="toggleSidebar" 
+                data-title="Expand">
+          <i class="fas" :class="sidebarCollapsed ? 'fa-caret-right' : 'fa-caret-left'"></i>
+          <span class="action-text ms-2">{{ sidebarCollapsed ? 'Expand' : 'Collapse' }}</span>
+        </button>
+        
+        <!-- Configure button with tooltip -->
+        <button class="btn btn-outline-light w-100" 
+                @click="toggleConfig" 
+                data-title="Configure">
           <i class="fas fa-cog"></i>
           <span class="config-text ms-2">Configure</span>
         </button>
@@ -322,16 +338,16 @@ onUnmounted(() => {
 
 .sidebar-footer {
   margin-top: auto;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-  padding-top: 0.75rem;
+  padding: 0.75rem 0.25rem;
   border-top: 1px solid rgba(255,255,255,0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .sidebar.collapsed .sidebar-footer .btn {
-  padding: 0.375rem 0.5rem;
-  display: flex;
-  justify-content: center;
+  padding: 0.375rem;
+  height: 38px;
 }
 
 .content-grid {
@@ -427,8 +443,100 @@ onUnmounted(() => {
 }
 
 .sidebar.collapsed .sidebar-footer .btn {
-  padding: 0.375rem 0.5rem;
+  padding: 0.375rem;
+  height: 38px;
+}
+
+/* Add these styles for the sidebar header */
+.sidebar-header h5 {
+  width: 100%;
+  text-align: center;
+}
+
+/* Style for collapsed sidebar header */
+.sidebar.collapsed .sidebar-header h5 {
+  display: block;
+  font-size: 0.95rem;
+  writing-mode: normal;
+  transform: none;
+  height: auto;
+  margin: 0.5rem 0;
+  white-space: normal;
+  text-align: center;
+}
+
+/* Style for refresh interval display */
+.refresh-display {
+  position: relative;
+  font-size: 0.9rem;
+  height: 24px;
   display: flex;
+  align-items: center;
   justify-content: center;
+  margin-bottom: 0.75rem !important;
+}
+
+.sidebar.collapsed .refresh-display {
+  height: 24px;
+}
+
+.sidebar.collapsed .refresh-text {
+  display: inline;
+  font-size: 0.75rem;
+}
+
+/* Style for action text in collapsed view */
+.sidebar.collapsed .action-text {
+  display: none;
+}
+
+/* Standardize button heights and padding */
+.sidebar-footer .btn {
+  position: relative;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+/* Last button shouldn't have margin */
+.sidebar-footer .btn:last-child {
+  margin-bottom: 0;
+}
+
+/* Add tooltip styles for footer elements in collapsed view */
+.sidebar.collapsed .sidebar-footer .refresh-display:hover::after,
+.sidebar.collapsed .sidebar-footer .btn:hover::after {
+  content: attr(data-title);
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  background: #343a40;
+  color: white;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.25rem;
+  white-space: nowrap;
+  z-index: 1010;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+  margin-left: 0.5rem;
+  font-size: 0.875rem;
+}
+
+/* Add arrow for the tooltips */
+.sidebar.collapsed .sidebar-footer .refresh-display:hover::before,
+.sidebar.collapsed .sidebar-footer .btn:hover::before {
+  content: "";
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent #343a40 transparent transparent;
+  margin-left: 0.25rem;
+  z-index: 1011;
 }
 </style>