Новый экранчик для обзора дашей

frontend/src/lib/components/layout/TopNavbar.svelte

@@ -89,14 +89,14 @@
 </script>
 
 <nav
-  class="bg-white border-b border-gray-200 fixed top-0 right-0 left-0 h-16 flex items-center justify-between px-4 z-40
+  class="fixed left-0 right-0 top-0 z-40 flex h-16 items-center justify-between border-b border-slate-200 bg-white px-4 shadow-sm
     {isExpanded ? 'md:left-[240px]' : 'md:left-16'}"
 >
   <!-- Left section: Hamburger (mobile) + Logo -->
   <div class="flex items-center gap-2">
     <!-- Hamburger Menu (mobile only) -->
     <button
-      class="p-2 rounded-lg hover:bg-gray-100 text-gray-600 md:hidden"
+      class="rounded-lg p-2 text-slate-600 transition-colors hover:bg-slate-100 md:hidden"
       on:click={handleHamburgerClick}
       aria-label="Toggle menu"
     >
@@ -106,7 +106,7 @@
     <!-- Logo/Brand -->
     <a
       href="/"
-      class="flex items-center text-xl font-bold text-gray-800 hover:text-primary transition-colors"
+      class="flex items-center text-xl font-bold text-slate-800 transition-colors hover:text-primary"
     >
       <span class="mr-2 inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-sky-500 via-cyan-500 to-indigo-600 text-white shadow-sm">
         <Icon name="layers" size={18} strokeWidth={2.1} />
@@ -128,10 +128,10 @@
   </div>
 
   <!-- Nav Actions -->
-  <div class="flex items-center space-x-4">
+  <div class="flex items-center gap-3 md:gap-4">
     <!-- Activity Indicator -->
     <div
-      class="relative cursor-pointer p-2 rounded-lg hover:bg-gray-100 transition-colors text-slate-600"
+      class="relative cursor-pointer rounded-lg p-2 text-slate-600 transition-colors hover:bg-slate-100"
       on:click={handleActivityClick}
       on:keydown={(e) =>
         (e.key === "Enter" || e.key === " ") && handleActivityClick()}