Redesign the navbar

react-navigation · Aug 7, 2024 · 5ce5799 · 5ce5799
1 parent 6aa24b6
commit 5ce5799
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 7 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -37,20 +37,60 @@ export default {
         src: 'img/spiro.svg',
       },
       items: [
-        { to: 'docs/getting-started', label: 'Docs', position: 'left' },
-        { to: 'blog', label: 'Blog', position: 'left' },
         {
-          href: 'https://github.com/react-navigation',
-          label: 'GitHub',
+          type: 'docsVersionDropdown',
+          position: 'right',
+        },
+        {
+          to: 'docs/getting-started',
+          label: 'Docs',
+          position: 'right',
+        },
+        {
+          to: 'blog',
+          label: 'Blog',
           position: 'right',
         },
         {
-          to: 'help',
+          type: 'dropdown',
           label: 'Help',
+          items: [
+            {
+              label: 'Issues',
+              href: 'https://github.com/react-navigation/react-navigation/issues',
+            },
+            {
+              label: 'Feature Requests',
+              href: 'https://react-navigation.canny.io/feature-requests',
+            },
+            {
+              label: 'Reactiflux Discord',
+              href: 'https://www.reactiflux.com',
+            },
+            {
+              label: 'Stack Overflow',
+              href: 'https://stackoverflow.com/questions/tagged/react-navigation',
+            },
+            {
+              label: 'Troubleshooting',
+              to: 'docs/troubleshooting',
+            },
+          ],
+          position: 'right',
         },
         {
-          type: 'docsVersionDropdown',
-          position: 'left',
+          href: 'https://x.com/reactnavigation',
+          position: 'right',
+          className: 'navbar-social-link navbar-social-link-x',
+          'aria-label': 'X',
+          position: 'right',
+        },
+        {
+          href: 'https://github.com/react-navigation',
+          position: 'right',
+          className: 'navbar-social-link navbar-social-link-github',
+          'aria-label': 'GitHub',
+          position: 'right',
         },
       ],
     },

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -208,6 +208,63 @@ footer {
     var(--ifm-navbar-padding-horizontal);
 }
 
+.dropdown > .navbar__link:after {
+  top: 4px;
+  transform: rotate(90deg);
+  width: 10px;
+  height: 10px;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")
+    no-repeat;
+  mask-size: 100% 100%;
+  background-color: currentColor;
+}
+
+.navbar div[class*='colorModeToggle'] {
+  margin: 0 0.5em;
+}
+
+.navbar .DocSearch-Button {
+  border-radius: var(--ifm-global-radius);
+}
+
+.navbar .DocSearch-Button svg {
+  width: 16px;
+  height: 16px;
+}
+
+@media (min-width: 997px) {
+  .navbar__brand {
+    width: calc(
+      var(--doc-sidebar-width) - var(--ifm-navbar-padding-horizontal)
+    );
+    box-shadow: 1px 0 0 0 var(--ifm-toc-border-color);
+  }
+}
+
+.navbar-social-link::before {
+  content: '';
+  display: flex;
+  background-color: var(--ifm-navbar-link-color);
+  transition: background-color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.navbar-social-link:hover::before {
+  background-color: var(--ifm-navbar-link-hover-color);
+}
+
+.navbar-social-link-x::before {
+  width: 18px;
+  height: 18px;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E");
+}
+
+.navbar-social-link-github::before {
+  width: 20px;
+  height: 20px;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
+}
+
 .menu {
   font-size: 93.75%;
   font-weight: var(--ifm-font-weight-normal);