fixed left nav

postgresml · Apr 25, 2024 · 4bcb252 · 4bcb252
1 parent 8122f77
commit 4bcb252
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/pgml-dashboard/src/components/navigation/left_nav/web_app/web_app.scss b/pgml-dashboard/src/components/navigation/left_nav/web_app/web_app.scss
@@ -1,12 +1,13 @@
 .leftnav-container {
-    position: sticky; 
+    position: fixed; 
     top: $navbar-height; 
     height: calc( 100vh - $navbar-height );
     background-color: var(--webapp-nav-bg);
     border-right: 1px solid #{$gray-500};
     max-width: $left-nav-w;
     padding-top: 0px;
     z-index: $zindex-fixed;
+    box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.30);
 
     @include media-breakpoint-down(lg) {
         display: none;
@@ -16,6 +17,7 @@
 .leftnav {
     @extend .navbar;
     max-width: 260px;
+    min-width: $left-nav-w-collapsed;
 
     border: none;
     align-items: start;
@@ -93,3 +95,9 @@ div[data-controller="navigation-left-nav-web-app"] {
         margin-right: 0px;
     }
 }
+
+.menu-item {
+    button, a {
+        padding: 8px 24px 8px 12px;
+    }
+}
diff --git a/pgml-dashboard/static/css/scss/layout/_containers.scss b/pgml-dashboard/static/css/scss/layout/_containers.scss
@@ -157,8 +157,14 @@
     }
   }
 
-  .docs-content-max-width-container {
+.docs-content-max-width-container {
     max-width: $docs-content-max-width;
 
     margin: 0px auto;
-  }
+}
+
+.web-app-content-area {
+    @include media-breakpoint-up(lg) {
+        margin-left: $left-nav-w-collapsed
+    }
+}
diff --git a/pgml-dashboard/templates/layout/web_app_base.html b/pgml-dashboard/templates/layout/web_app_base.html
@@ -29,7 +29,7 @@
                     <div class="d-flex">
                         <%+ WebAppLeftNav::new( upper_left_nav.clone(), lower_left_nav, dropdown_nav ).id(&upper_left_nav.unique_id()) %>
 
-                        <div class="clear-from-under-navbar flex-grow-1 min-vw-0">
+                        <div class="clear-from-under-navbar flex-grow-1 min-vw-0 web-app-content-area">
                             <div class="px-4 px-sm-5 py-3" style="position: absolute">
                                 <%- Breadcrumbs::render( breadcrumbs ) %>
                             </div>