add navbar border

src/client/styles/scss/_layout.scss

@@ -51,7 +51,7 @@
 
 #page-wrapper {
   min-width: 0;
-  margin-top: $grw-navbar-height;
+  margin-top: $grw-navbar-height + $grw-navbar-border-width;
 }
 
 .grw-modal-head {

src/client/styles/scss/_layout_kibela.scss

@@ -3,7 +3,7 @@ $navbar-height-adjustment: 10px;
 body.kibela {
   /* navbar for kibela */
   #page-wrapper {
-    margin-top: 60px;
+    margin-top: $grw-navbar-height + $grw-navbar-border-width;
   }
 
   /* Logo */

src/client/styles/scss/_mixins.scss

@@ -18,8 +18,8 @@
 }
 
 @mixin expand-editor($editor-header-plus-footer, $navbar-height-adjustment: 0px) {
-  $grw-navbar-height: $grw-navbar-height + $navbar-height-adjustment;
-  $header-plus-footer: $grw-navbar-height + $editor-header-plus-footer + 2px; // add .main padding-top
+  $navbar-height: $grw-navbar-height + $grw-navbar-border-width + $navbar-height-adjustment;
+  $header-plus-footer: $navbar-height + $editor-header-plus-footer + 2px; // add .main padding-top
 
   $editor-margin: $header-plus-footer //
     + 25px //   add .btn-open-dropzone height
@@ -27,7 +27,7 @@
 
   .main {
     width: 100%;
-    height: calc(100vh - #{$grw-navbar-height});
+    height: calc(100vh - #{$navbar-height});
     padding-top: 2px;
     margin-top: 0px !important;
 

src/client/styles/scss/_navbar.scss

@@ -1,4 +1,6 @@
 .grw-navbar {
+  border-bottom: $grw-navbar-border-width solid;
+
   .grw-navbar-toggler {
     padding: 0.5rem;
     font-size: 1.5em;

src/client/styles/scss/_subnav.scss

@@ -9,7 +9,7 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
  * layout for sticky
  */
 header.grw-header {
-  top: $grw-navbar-height;
+  top: $grw-navbar-height + $grw-navbar-border-width;
 
   // Adjust to be on top of the growi subnavigation
   z-index: $zindex-sticky;

src/client/styles/scss/_variables.scss

@@ -6,7 +6,8 @@ $font-family-for-staff-credit: Lato, -apple-system, BlinkMacSystemFont, 'Hiragin
 $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', MeiryoKe_Gothic, monospace;
 
 //== Layout
-$grw-navbar-height: 50px;
+$grw-navbar-height: 52px;
+$grw-navbar-border-width: 3px;
 
 $grw-sidebar-nav-width: 64px;
 $grw-sidebar-content-min-width: 240px;

src/client/styles/scss/theme/_apply-colors.scss

@@ -111,6 +111,9 @@ $input-focus-color: $color-global;
   .nav-item > .nav-link {
     color: $color-link-nabvar;
   }
+
+  border-image: linear-gradient(to right, #545fff 0%, #00a6e5 100%);
+  border-image-slice: 1;
 }
 
 .grw-sidebar {

src/client/styles/scss/theme/default.scss

@@ -83,7 +83,6 @@ html[dark] {
 
   // Background colors
   $bgcolor-global: $basecolor;
-  $bgcolor-navbar: #151515;
   $bgcolor-inline-code: darken($basecolor, 5%);
   $bgcolor-card: darken($basecolor, 5%);
 
@@ -105,6 +104,11 @@ html[dark] {
   $bgcolor-list-active: $primary;
   $color-list-hover: $color-reversal;
 
+  // Navbar
+  $bgcolor-navbar: #2a2929;
+  $border-color-navbar-gradient-left: #545fff;
+  $border-color-navbar-gradient-right: #00a6e5;
+
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: #444;