Fix navigation menu styles

slab · Jan 9, 2024 · 2eaa476 · 2eaa476
1 parent 0ba3414
commit 2eaa476
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/packages/website/src/components/Default.jsx b/packages/website/src/components/Default.jsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 import Helmet from 'react-helmet';
 import LogoIcon from '../svg/logo.svg';
 import GitHub from './GitHub';
+import * as styles from './Default.module.scss';
 
 const Default = ({ children, pageType }) => {
   const [isNavOpen, setIsNavOpen] = useState(false);
@@ -50,7 +51,7 @@ const Default = ({ children, pageType }) => {
                 Blog
               </a>
             </li>
-            <li className="navbar-item">
+            <li className={classNames('navbar-item', styles.githubMenuItem)}>
               <GitHub dark />
             </li>
           </ul>
@@ -99,7 +100,7 @@ const Default = ({ children, pageType }) => {
                 Blog
               </a>
             </li>
-            <li className="navbar-link">
+            <li className="download-item">
               <a className="action" href="/docs/download/">
                 Download
               </a>

diff --git a/packages/website/src/components/Default.module.scss b/packages/website/src/components/Default.module.scss
@@ -0,0 +1,5 @@
+.githubMenuItem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/packages/website/static/assets/css/styles.css b/packages/website/static/assets/css/styles.css
@@ -309,7 +309,7 @@ header:not(.home) .logo path {
   list-style: none;
   padding: 5em 0 1em;
   position: absolute;
-  transition: margin-bottom 1s ease-out 0s;
+  transition: margin-bottom 0.4s ease-out 0s;
   width: 100%;
   z-index: 10;
 }
@@ -1270,8 +1270,8 @@ body:not(.home) .navbar-link:before {
     display: inline-block;
   }
   .navbar-drop.active {
-    margin-bottom: -25em;
-    transition: margin-bottom 1s ease-out 0s;
+    margin-bottom: -22em;
+    transition: margin-bottom 0.4s ease-out 0s;
   }
   .navbar-list .navbar-item,
   .navbar-list .download-item {