refactor: extract nav wide padding

Author: Dobromir Hristov

src/components/NavBase.vue

@@ -320,6 +320,7 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
   width: 100%;
   height: $nav-height;
   z-index: 9997;
+  --nav-padding: #{$nav-padding};
 
   @include breakpoint(small, $scope: nav) {
     min-width: map-deep-get($breakpoint-attributes, (nav, small, min-width));
@@ -333,6 +334,10 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
     color: var(--color-nav-dark-color);
   }
 
+  @include nav-is-wide-format($nested: true) {
+    --nav-padding: #{$nav-padding-wide};
+  }
+
   &__wrapper {
     position: absolute;
     top: 0;
@@ -519,7 +524,6 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
 
 // Nav content (title and menus)
 .nav-content {
-  --nav-padding: #{$nav-padding};
   display: flex;
   padding: 0 var(--nav-padding);
   max-width: $content-max-width;
@@ -530,7 +534,6 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
   box-sizing: border-box;
 
   @include nav-is-wide-format() {
-    --nav-padding: 30px;
     @include breakpoint-full-width-container()
   }
 

src/styles/core/_nav.scss

@@ -13,6 +13,7 @@ $nav-height: rem(52px);
 $nav-height-small: rem(48px);
 $nav-padding: rem(22px);
 $nav-padding-small: rem(16px);
+$nav-padding-wide: rem(30px);
 $nav-menu-item-left-margin: rem(24px);
 $nav-timingfunction: ease-in !default;
 $nav-menu-tray-transition: max-height 0.4s $nav-timingfunction 0s, visibility 0s linear 1s !default;