feat: add tooltip on hover for collapsed sidebar nav items

Author: ddrayko

public/css/style.css

@@ -563,6 +563,27 @@ cap-widget {
   margin-left: 60px;
 }
 
+.sidebar-tooltip {
+  position: fixed;
+  z-index: 10000;
+  background: var(--bg-card);
+  color: var(--text-primary);
+  padding: 6px 12px;
+  border-radius: var(--radius-sm);
+  font-size: 0.85rem;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(-50%);
+  transition: opacity 0.15s ease;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+  border: 1px solid var(--border);
+}
+
+.sidebar-tooltip.visible {
+  opacity: 1;
+}
+
 .main-content {
   position: relative;
   z-index: 1;

public/js/app.js

@@ -469,6 +469,7 @@ async function renderDashboard() {
             ${window.location.hostname === 'beta.zero-host.org' ? 'Switch to Stable' : 'Switch to Beta'}
           </a>
         </nav>
+        <div class="sidebar-tooltip" id="sidebar-tooltip"></div>
         <div class="sidebar-footer">
           <div class="user-info" id="sidebar-user-info" style="display:flex;align-items:center;justify-content:space-between;padding:8px 12px;cursor:pointer">
             <div style="display:flex;align-items:center;gap:10px">
@@ -544,10 +545,59 @@ async function renderDashboard() {
 
   initSidebarResize();
 
+  initSidebarTooltip();
+
   const page = window.location.pathname.replace('/', '') || 'overview';
   navigateTo(page);
 }
 
+function initSidebarTooltip() {
+  const sidebar = $('#sidebar');
+  const sidebarNav = document.querySelector('.sidebar-nav');
+  const tooltip = document.getElementById('sidebar-tooltip');
+  let tooltipTimer = null;
+  let tooltipQuickMode = false;
+
+  function showTooltipForItem(item) {
+    const text = item.textContent.trim();
+    if (!text) return;
+    tooltip.textContent = text;
+    const rect = item.getBoundingClientRect();
+    tooltip.style.top = (rect.top + rect.height / 2) + 'px';
+    tooltip.style.left = (rect.right + 10) + 'px';
+    tooltip.classList.add('visible');
+  }
+
+  function hideTooltip() {
+    tooltip.classList.remove('visible');
+    clearTimeout(tooltipTimer);
+    tooltipQuickMode = false;
+  }
+
+  sidebarNav.addEventListener('mouseover', (e) => {
+    const item = e.target.closest('.nav-item');
+    if (!item) return;
+    if (!sidebar.classList.contains('collapsed')) return;
+
+    clearTimeout(tooltipTimer);
+
+    if (tooltipQuickMode) {
+      showTooltipForItem(item);
+    } else {
+      tooltipTimer = setTimeout(() => {
+        showTooltipForItem(item);
+        tooltipQuickMode = true;
+      }, 5000);
+    }
+  });
+
+  sidebarNav.addEventListener('mouseleave', () => {
+    if (tooltip.classList.contains('visible') || tooltipTimer) {
+      hideTooltip();
+    }
+  });
+}
+
 function navigateTo(page) {
   if (pteroTimeout) clearTimeout(pteroTimeout);
   document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
@@ -1315,27 +1365,27 @@ function renderAccount() {
         </div>
       </div>
 
-      <div class="card account-menu-card" id="account-menu-dangerous" style="cursor:pointer">
+      <div class="card account-menu-card" id="account-menu-logout" style="cursor:pointer">
         <div class="account-menu-item">
           <div class="account-menu-icon" style="color:var(--accent-red)">
-            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><path d="M12 9v4"/><circle cx="12" cy="18" r="1"/></svg>
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/></svg>
           </div>
           <div class="account-menu-text">
-            <div class="account-menu-title">Dangerous Zone & Export Account Data</div>
-            <div class="account-menu-desc">Delete your account or export your personal data (RGPD)</div>
+            <div class="account-menu-title">Sign Out</div>
+            <div class="account-menu-desc">Logout from your account</div>
           </div>
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:var(--text-muted);flex-shrink:0"><path d="M9 18l6-6-6-6"/></svg>
         </div>
       </div>
 
-      <div class="card account-menu-card" id="account-menu-logout" style="cursor:pointer">
+      <div class="card account-menu-card" id="account-menu-dangerous" style="cursor:pointer">
         <div class="account-menu-item">
           <div class="account-menu-icon" style="color:var(--accent-red)">
-            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/></svg>
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><path d="M12 9v4"/><circle cx="12" cy="18" r="1"/></svg>
           </div>
           <div class="account-menu-text">
-            <div class="account-menu-title">Sign Out</div>
-            <div class="account-menu-desc">Logout from your account</div>
+            <div class="account-menu-title">Dangerous Zone & Export Account Data</div>
+            <div class="account-menu-desc">Delete your account or export your personal data (RGPD)</div>
           </div>
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:var(--text-muted);flex-shrink:0"><path d="M9 18l6-6-6-6"/></svg>
         </div>