Update Navbar

docs/assets/scss/_navbar.scss

@@ -20,7 +20,7 @@ header.navbar {
 }
 
 .navbar-brand {
-  font-size: 15px !important;
+  color: #fff !important;
 }
 
 .navbar-main a:focus {
@@ -29,34 +29,22 @@ header.navbar {
 
 .navbar-main,
 .navbar-brand,
-.navbar-main a {
-  color: #fff;
+.navbar-main a:not(.dropdown-menu > div) {
   font-weight: 600;
 }
 
 .nav-icons {
   border-bottom: 2px solid #fff !important;
 }
 
-.navbar .dropdown-item {
-  min-width: 290px;
-  max-width: 320px;
-  white-space: inherit !important;
-}
-
-.dropdown-item small {
-  font-size: 14px !important;
-}
-
 [data-theme="dark"] .navbar-main .dropdown-item img {
   filter: invert(1);
 }
 
-.dropdown-menu-mobile {
-  width: 222px;
-  left: -162px !important;
+.navbar-main .btn-apps {
+  color: #fff;
 }
 
-.dropdown-menu-mobile .dropdown-item {
-  min-width: 212px;
-}
+[data-theme="light"] .navbar-main .dropdown-menu {
+  color: #252a2e !important;
+}

docs/assets/scss/_utilities.scss

@@ -10,6 +10,10 @@
   opacity: 0.75 !important;
 }
 
+.opacity-50 {
+  opacity: 0.5 !important;
+}
+
 .py-6 {
   padding-top: 4.5rem;
   padding-bottom: 4.5rem;

docs/data/navbar_apps.yml

@@ -0,0 +1,15 @@
+- title: Modus Style Guide
+  icon: "/img/icons/trimble.svg"
+  url: "https://modus.trimble.com"
+
+- title: Modus Web Components
+  icon: "/img/icons/web-components.svg"
+  url: "https://modus-web-components.trimble.com/"
+
+- title: Modus Bootstrap
+  icon: "/img/icons/code.svg"
+  url: "https://modus-bootstrap.trimble.com/"
+
+- title: Modus on GitHub
+  icon: "/img/icons/github.svg"
+  url: "https://github.com/trimble-oss/?q=modus&type=all&language=&sort=stargazers"

docs/layouts/partials/navbar-dropdown.html

@@ -0,0 +1,21 @@
+<ul class="dropdown-menu dropdown-menu-right pb-0">
+  {{- with .Site.Data.navbar_apps -}}
+  {{- range . -}}
+  <li class="border-bottom">
+    <a class="dropdown-item py-3 pr-2" href="{{- .url -}}" target="_blank" rel="noopener">
+      <div class="d-flex">
+        <div class="text-center">
+          {{- with .icon -}}
+          <img src="{{- . -}}" class="filter-greyscale opacity-75 mr-2" height="18" width="18" alt="">
+          {{- end -}}
+        </div>
+        <div class="align-self-center mr-3" style="margin-top: 1px">
+          {{- .title }} <img src="/img/icons/external-link.svg" class="filter-greyscale opacity-50" height="14"
+            width="14" alt="">
+        </div>
+      </div>
+    </a>
+  </li>
+  {{- end -}}
+  {{- end -}}
+</ul>

docs/layouts/partials/navbar.html

@@ -1,71 +1,23 @@
 <nav class="navbar navbar-main navbar-expand navbar-blue" aria-label="main navigation">
-  <div class="container-xl flex-row justify-content-end">
+  <div class="container-fluid flex-row justify-content-end">
     <a class="navbar-brand mr-auto mr-md-auto font-weight-bold" href="/">
-    <!-- {{- partial "icons/trimble.svg" (dict "class" "d-inline-block d-sm-none mb-1 mr-1" "width" "25" "height" "25") -}} -->
+      <!-- {{- partial "icons/trimble.svg" (dict "class" "d-inline-block d-sm-none mb-1 mr-1" "width" "25" "height" "25") -}} -->
       {{ partial "logos/trimble.svg" (dict "class" "img-fluid" "width" "115" "height" "26") }}
-      <div>Modus Icons</div>
-      </a>
-      <div class="d-flex flew-row ml-auto ml-sm-0">
-        <ul class="navbar-nav d-none d-md-inline-flex flex-lg-row">
-          {{ $currentPage := . }}
-          {{ range .Site.Menus.main }}
-          {{ if .HasChildren }}
-          <li class="nav-item mx-sm-1 mx-md-2 mt-1 dropdown">
-            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
-              aria-expanded="false">{{- .Name -}}</a>
-        <div class="dropdown-menu px-2 rounded">
-          {{ range .Children }}
-          <a class="dropdown-item text-dark rounded border-0 px-3 py-2" href="{{- .URL -}}">
-            <div class="d-flex flex-row">
-              <div>
-              {{- with .Pre -}}
-              {{- . -}}
-              {{- end -}}</div>
-            <div>
-              <div class="dropdown-item-title">{{- .Name -}}</div>
-              <p class="mb-0 small text-muted">{{- with .Post -}}
-                {{- . -}}
-              {{ end }}</p>
-            </div>
-          </div>
-          </a>
-          {{- end -}}
-        </div>
-      </li>
-      {{ else }}
-          <li class="nav-item mx-0 mx-sm-1 mx-md-2 mt-1">
-        <a class="nav-link{{if ($currentPage.HasMenuCurrent "main" .) }} active{{end}} nav-{{- .Name | lower | markdownify -}}"
-          href="{{ .URL }}" {{ if eq .Name "Start" }}aria-label="Getting Started"{{ end }}>
-          {{- .Name -}}
-        </a>
-      </li>
-      {{- end -}}
-      {{- end -}}
-      </ul>
-        {{ partial "theme-toggle" . }}
-<div class="dropdown">
-  <button class="btn btn-icon-only btn-lg d-md-none ml-auto px-1 ml-1" type="button" data-toggle="dropdown"
-    data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
-    {{ partial "icons/modus-solid/more-vertical.svg" (dict "class" "text-white" "width" "26" "height" "26") }}
-  </button>
-  <div class="dropdown-menu dropdown-menu-mobile d-md-none">
-    {{ $currentPage := . }}
-    {{ range .Site.Menus.main }}
-    {{ if .HasChildren }}
-    <small class="nav-link opacity-75" hidden>{{- .Name -}}</small>
-    {{ range .Children }}
-    <a class="dropdown-item text-dark" href="{{- .URL -}}" style="min-width:208px!important">Components
-      ({{- .Name -}})</a>
-    </a>
-    {{- end -}}
-    {{ else }}
-    <a class="dropdown-item text-dark {{if ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{- .URL -}}">
-      {{- .Name -}}
+      <div hidden>Modus Icons</div>
     </a>
-    {{- end -}}
-    {{- end -}}
-  </div>
-</div>
+    <div class="d-flex flew-row ml-auto ml-sm-0">
+      <ul class="navbar-nav d-none d-md-inline-flex flex-lg-row">
+
+      </ul>
+      {{ partial "theme-toggle" . }}
+
+      <div class="dropdown">
+        <button type="button" class="btn btn-lg btn-icon-only border-0 btn-apps" data-toggle="dropdown"
+          aria-expanded="false" aria-label="Menu">
+          {{ partial "icons/modus-solid/apps.svg" (dict "class" "text-white" "width" "24" "height" "24") }}
+        </button>
+
+        {{ partial "navbar-dropdown" . }}
+      </div>
     </div>
-  </div>
-</nav>
+</nav>

docs/layouts/partials/theme-toggle.html

@@ -1,6 +1,6 @@
-<button class="btn btn-lg btn-icon-only theme-toggle nav-link border-0 mx-1" id="theme-toggle"
-  aria-label="auto" aria-live="polite" type="button" data-toggle="tooltip" data-placement="bottom" title="Toggle dark mode">
-  <svg class="sun-and-moon" aria-hidden="true" width="18" height="18" viewBox="0 0 24 24">
+<button class="btn btn-lg btn-icon-only theme-toggle nav-link border-0 mx-1" id="theme-toggle" aria-label="auto"
+  aria-live="polite" type="button" data-toggle="tooltip" data-placement="bottom" title="Toggle dark mode">
+  <svg class="sun-and-moon" aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" style="margin-top: -2px;">
     <mask class="moon" id="moon-mask">
       <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
       <circle cx="24" cy="10" r="6" fill="#111" />
@@ -17,4 +17,4 @@
       <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
     </g>
   </svg>
-</button>
+</button>

postcss.config.js

@@ -127,7 +127,9 @@ module.exports = {
         'ml-auto',
         'modus-icons',
         'moon',
+        'mr-1',
         'mr-2',
+        'mr-3',
         'mt-auto',
         'mt-0',
         'mt-2',
@@ -172,6 +174,9 @@ module.exports = {
         'position-absolute',
         'position-fixed',
         'pr-0',
+        'pr-1',
+        'pr-2',
+        'pr-3',
         'pre',
         'ps-4',
         'pt-1',