refactor(sidenav): top defaults to the height of masthead and navbar

Author: clukhei

lib/sgds/sass/_navbar.scss

@@ -7,7 +7,7 @@
         @include media-breakpoint-down(lg){
             padding: 0 $navbar-mobile-padding-y 0;
         }
-        min-height: 80px;
+        min-height: $navbar-min-height;
         align-items: stretch;
 
         a.navbar-brand {

lib/sgds/sass/_sidenav.scss

@@ -1,7 +1,7 @@
 .sgds {
   &.sidenav {
     --#{$prefix}sidenav-width: #{$sidenav-width};
-    --#{$prefix}sidenav-font-size : #{$sidenav-fontsize};
+    --#{$prefix}sidenav-font-size: #{$sidenav-fontsize};
     width: var(--#{$prefix}sidenav-width);
     font-size: var(--#{$prefix}sidenav-font-size);
 
@@ -85,7 +85,9 @@
       }
     }
     &.sticky {
-      --#{$prefix}sidenav-sticky-top: 0rem;
+      --#{$prefix}sidenav-sticky-top: calc(
+        #{$navbar-min-height} + #{$masthead-height}
+      );
       position: sticky;
       max-height: calc(100vh - var(--#{$prefix}sidenav-sticky-top));
       top: var(--#{$prefix}sidenav-sticky-top);

lib/sgds/sass/_variables.scss

@@ -1201,6 +1201,7 @@ $nav-pills-link-active-bg: $component-active-bg !default;
 $navbar-padding-y: $spacer * 2 !default;
 $navbar-mobile-padding-y: $spacer !default;
 $navbar-padding-x: null !default;
+$navbar-min-height: 80px;
 
 $navbar-nav-link-padding-x: .5rem !default;
 $navbar-border-bottom-height: .125rem !default;
@@ -1241,6 +1242,7 @@ $navbar-dark-brand-color: $navbar-dark-active-color !default;
 $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
 // scss-docs-end navbar-theme-variables
 
+$masthead-height: 28px;
 
 
 // Dropdowns