Fix navbar styles & map position

src/routes/Navbar.svelte

@@ -41,36 +41,15 @@
     }
 </script>
 
-<!-- <Navbar color="dark" dark expand="md">
+<Navbar color="light" light expand="lg" fixed="top" class="custom-navbar border-bottom">
-  <Nav navbar>
-    <NavItem>
-      <NavLink href="/components/">Inactive Link</NavLink>
-    </NavItem>
-    <Dropdown nav setActiveFromChild>
-      <DropdownToggle nav class="nav-link" caret>
-        Dropdown
-      </DropdownToggle>
-      <DropdownMenu>
-        <DropdownItem href="#" active>
-          Lancelot
-        </DropdownItem>
-        <DropdownItem href="#">Link</DropdownItem>
-        <DropdownItem href="#">Secret</DropdownItem>
-        <DropdownItem href="#">Chimp</DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
-  </Nav>
-</Navbar> -->
-
-<Navbar color="light" light expand="lg" fixed="top" class="custom-navbar">
     <Nav class="me-auto mb-2 mb-lg-0" navbar>
         <NavbarBrand href="/" class="nav-full-height">
-            <img src="/logo.svg" alt="Logo" height="36" class="d-inline-block align-text-top" />
+            <img src="/logo.svg" alt="Logo" height="34" class="d-inline-block align-text-top" />
         </NavbarBrand>
         <NavItem>
             <NavLink
                 href="/predict"
-                class="nav-full-height"
+                class="nav-full-height border-bottom"
                 active={$page.url.pathname === '/predict'}
             >
                 Прогнозирование
@@ -79,7 +58,7 @@
         <NavItem>
             <NavLink
                 href="/track"
-                class="nav-full-height"
+                class="nav-full-height border-bottom"
                 active={$page.url.pathname === '/track'}
             >
                 Слежение
@@ -89,7 +68,7 @@
     <Nav navbar>
         {#if isAuthenticated}
             <Dropdown nav inNavbar>
-                <DropdownToggle nav caret class="nav-full-height">
+                <DropdownToggle nav caret class="nav-full-height border-bottom">
                     Account
                 </DropdownToggle>
                 <DropdownMenu end>
@@ -115,7 +94,7 @@
             <NavItem>
                 <NavLink
                     href="/login"
-                    class="nav-full-height"
+                    class="nav-full-height border-bottom"
                     active={$page.url.pathname === '/login'}
                 >
                     Login

src/routes/map.svelte

@@ -160,33 +160,3 @@
         <VelocityLayer {map} {velocityOptions} />
     {/if}
 </div>
-
-<style>
-    .map-container {
-        position: relative;
-        width: 100%;
-        height: 100vh;
-    }
-
-    .coordinates-display {
-        position: absolute;
-        top: 54px;
-        right: 10px;
-        background: #fff;
-        padding: 3px 8px;
-        font-family: Arial, sans-serif;
-        font-size: 14px;
-        z-index: 1000;
-        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-        border: 1px solid #ccc;
-        width: auto;
-        white-space: nowrap;
-    }
-
-    .panel-container {
-        position: absolute;
-        bottom: 20px;
-        right: 20px;
-        z-index: 1000;
-    }
-</style>

static/css/custom.css

@@ -1,5 +1,5 @@
 .custom-navbar {
-    height: 44px;
+    height: var(--navbar-height);
     padding-top: 0rem;
     padding-bottom: 0rem;
     z-index: 1000;
@@ -17,12 +17,12 @@
 }
 
 .nav-link:hover {
-    color: var(--bs-light) !important;; 
+    color: white !important;; 
     background-color: var(--bs-primary); 
 }
 
 .nav-link.active {
-    color: var(--bs-light) !important; 
+    color: white !important; 
     background-color: var(--bs-primary); 
 }
 
@@ -48,3 +48,36 @@
 .card-header {
     cursor: pointer;
 }
+
+:root {
+    --navbar-height: 44px;
+}
+
+.map-container {
+    position: relative;
+    width: 100%;
+    height: calc(100vh - var(--navbar-height));
+    top: var(--navbar-height);
+}
+
+.coordinates-display {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: #fff;
+    padding: 3px 8px;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+    z-index: 1000;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+    border: 1px solid #ccc;
+    width: auto;
+    white-space: nowrap;
+}
+
+.panel-container {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+}