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 index 9a48d614b..72b2b1b85 100644 --- 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,5 +1,5 @@ .leftnav-container { - position: sticky; + position: fixed; top: $navbar-height; height: calc( 100vh - $navbar-height ); background-color: var(--webapp-nav-bg); @@ -7,6 +7,7 @@ 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 index 9ddb768aa..c00628ac4 100644 --- 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 index b3b9fd557..a69bfc03f 100644 --- a/pgml-dashboard/templates/layout/web_app_base.html +++ b/pgml-dashboard/templates/layout/web_app_base.html @@ -29,7 +29,7 @@
<%+ WebAppLeftNav::new( upper_left_nav.clone(), lower_left_nav, dropdown_nav ).id(&upper_left_nav.unique_id()) %> -
+
<%- Breadcrumbs::render( breadcrumbs ) %>