Modify the top navbar to be less full (#3177)

* modify navbar * rename * reorder and rename * reorder the navbar * change size to match the other elements * change style to match the other elements * tweak the footer to reflect the new header * fix link * fix the other link * small CSS tweaks * small naming tweak Co-authored-by: Bartosz Kaszubowski <[email protected]>
facebook · Sep 20, 2022 · 72c8bd5 · 72c8bd5
1 parent 7202412
commit 72c8bd5
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 41 deletions.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -214,29 +214,32 @@ module.exports = {
         style: 'dark',
         items: [
           {
-            label: 'Guides',
-            type: 'doc',
-            docId: 'getting-started',
-            position: 'right',
-          },
-          {
-            label: 'Components',
-            type: 'doc',
-            docId: 'components-and-apis',
+            label: 'Development',
+            type: 'dropdown',
             position: 'right',
-          },
-          {
-            label: 'API',
-            type: 'doc',
-            docId: 'accessibilityinfo',
-            position: 'right',
-          },
-          {
-            label: 'Architecture',
-            type: 'doc',
-            docId: 'architecture-overview',
-            position: 'right',
-            docsPluginId: 'architecture',
+            items: [
+              {
+                label: 'Guides',
+                type: 'doc',
+                docId: 'getting-started',
+              },
+              {
+                label: 'Components',
+                type: 'doc',
+                docId: 'components-and-apis',
+              },
+              {
+                label: 'APIs',
+                type: 'doc',
+                docId: 'accessibilityinfo',
+              },
+              {
+                label: 'Architecture',
+                type: 'doc',
+                docId: 'architecture-overview',
+                docsPluginId: 'architecture',
+              },
+            ],
           },
           {
             type: 'doc',
@@ -245,6 +248,11 @@ module.exports = {
             position: 'right',
             docsPluginId: 'contributing',
           },
+          {
+            to: '/showcase',
+            label: 'Showcase',
+            position: 'right',
+          },
           {
             to: '/blog',
             label: 'Blog',
@@ -274,44 +282,44 @@ module.exports = {
         style: 'dark',
         links: [
           {
-            title: 'Docs',
+            title: 'Development',
             items: [
               {
-                label: 'Getting Started',
+                label: 'Guides',
                 to: 'docs/getting-started',
               },
               {
-                label: 'Tutorial',
-                to: 'docs/tutorial',
+                label: 'Components',
+                to: 'docs/components-and-apis',
               },
               {
-                label: 'Components and APIs',
-                to: 'docs/components-and-apis',
+                label: 'APIs',
+                to: 'docs/accessibilityinfo',
               },
               {
-                label: 'More Resources',
-                to: 'docs/more-resources',
+                label: 'Architecture',
+                to: 'architecture/overview',
               },
             ],
           },
           {
             title: 'Community',
             items: [
               {
-                label: 'The React Native Community',
-                to: 'help',
+                label: 'Showcase',
+                to: 'showcase',
               },
               {
-                label: "Who's using React Native?",
-                to: 'showcase',
+                label: 'Contributing',
+                to: 'contributing/overview',
               },
               {
-                label: 'Ask Questions on Stack Overflow',
-                href: 'https://stackoverflow.com/questions/tagged/react-native',
+                label: 'The React Native Community',
+                to: 'help',
               },
               {
-                label: 'DEV Community',
-                href: 'https://dev.to/t/reactnative',
+                label: 'Ask Questions on Stack Overflow',
+                href: 'https://stackoverflow.com/questions/tagged/react-native',
               },
             ],
           },
@@ -336,7 +344,7 @@ module.exports = {
             title: 'More',
             items: [
               {
-                label: 'React',
+                label: 'ReactJS',
                 href: 'https://reactjs.org/',
               },
               {

diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss
@@ -596,7 +596,7 @@ a[class*="tagRegular"] {
       user-select: none;
     }
 
-    &.dropdown {
+    &.dropdown:not(.dropdown--right) {
       a {
         font-weight: 400;
         font-size: 14px;
@@ -607,6 +607,18 @@ a[class*="tagRegular"] {
         left: 0;
       }
     }
+
+    &.dropdown--right {
+      .dropdown__menu {
+        min-width: 168px;
+      }
+    }
+  }
+
+  .dropdown > .navbar__link:after {
+    margin-left: 8px;
+    top: 1px;
+    opacity: 0.75;
   }
 
   .navbar__logo {
@@ -887,7 +899,6 @@ aside[class^="theme-doc-sidebar-container"] {
 
   .menu__link--sublist {
     font-size: 15px;
-    font-weight: 600;
     padding: 4px 12px !important;
     color: var(--light);
 
@@ -897,6 +908,10 @@ aside[class^="theme-doc-sidebar-container"] {
     }
   }
 
+  .menu__link--sublist-caret {
+    font-size: 17px;
+  }
+
   .menu__list {
     .menu__link {
       line-height: 20px;