[APT-1649] Collapse the right nav links into a dropdown menu at smaller sizes (#137)

* Collapse the right nav links into a dropdown menu at smaller sizes

This prevents a stacking issue which caused the Gruntwork logo to
wind up getting squished when at smaller sizes between desktop and
mobile layouts.

Author: ebeneliason

docusaurus.config.js

@@ -116,6 +116,26 @@ const config = {
             label: "Sign In",
             position: "right",
           },
+          {
+            type: "dropdown",
+            label: "More…",
+            position: "right",
+            id: "more_dropdown",
+            items: [
+              {
+                href: "https://github.com/gruntwork-io/knowledge-base/discussions",
+                label: "Knowledge Base",
+              },
+              {
+                href: "/docs/guides/support",
+                label: "Support",
+              },
+              {
+                href: "https://app.gruntwork.io",
+                label: "Sign In",
+              },
+            ],
+          },
         ],
       },
       footer: {

src/css/custom.css

@@ -125,12 +125,6 @@ p > img + em {
   justify-items: center;
 }
 
-@media only screen and (max-width: 996px) {
-  .navbar__brand {
-    border-right: none;
-  }
-}
-
 .navbar__logo {
   height: 2.5rem;
   margin-top: 0.5rem;
@@ -274,9 +268,11 @@ html[data-theme="dark"] .menu__link--sublist {
   color: var(--ifm-color-primary-lightest);
 }
 
-/* remove external link icons on header/footer links */
+/* remove external link icons on header/footer/flyout links */
 .footer__link-item svg,
-.navbar__items--right .navbar__link svg {
+.navbar__items--right .navbar__link svg,
+.navbar__items--right .dropdown__link svg,
+.navbar-sidebar__items .menu__link svg {
   display: none;
 }
 
@@ -291,3 +287,23 @@ html[data-theme="dark"] .menu__link--sublist {
     display: none;
   }
 }
+
+#more_dropdown {
+  display: none;
+}
+
+@media only screen and (max-width: 1280px) and (min-width: 996px) {
+  .navbar__items--right > a {
+    display: none;
+  }
+
+  #more_dropdown {
+    display: block;
+  }
+}
+
+@media only screen and (max-width: 996px) {
+  .navbar__brand {
+    border-right: none;
+  }
+}