chore: misc ui and mobile fixes

Author: KyleRoss

site/components/base/Header.jsx

@@ -1,27 +1,27 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import { IoLogoGithub } from 'react-icons/io5';
-import { BreakpointContext } from '@utils/BreakpointContext';
 import Logo from '@components/Logo';
 import Link from '@components/Link';
 import VersionSelect from '@components/VersionSelect';
 import styles from './Header.module.css';
 
 const Header = () => {
-  const breakpoint = useContext(BreakpointContext);
-
   return (
-    <nav id="navigation" className={clsx(styles.mainNav, (breakpoint.isMobile || breakpoint.isTablet) ? 'mobile-nav' : null)}>
-      <div className={clsx('container-wrapper', styles.navInner)}>
-        <Logo withText linked className={styles.navBrand} aria-label="Lambda Log Home" />
-
-        <VersionSelect className="ml-auto mr-5 hidden lg:block" />
+    <header className={styles.header}>
+      <div className={clsx('container-wrapper', styles.inner)}>
+        <div className={styles.headerBrand}>
+          <Logo withText linked className={styles.brand} aria-label="Lambda Log Home" />
+        </div>
+        <div className={styles.headerRight}>
+          <VersionSelect className="ml-auto mr-5 hidden lg:block" />
 
-        <Link plain href="https://github.com/KyleRoss/node-lambda-log" className={styles.github} aria-label="View on Github">
-          <IoLogoGithub />
-        </Link>
+          <Link plain href="https://github.com/KyleRoss/node-lambda-log" className={styles.github} aria-label="View on Github">
+            <IoLogoGithub />
+          </Link>
+        </div>
       </div>
-    </nav>
+    </header>
   );
 };
 

site/components/base/Header.module.css

@@ -1,12 +1,23 @@
-.mainNav {
-  @apply sticky top-0 left-0 right-0 py-3 h-[70px] z-100 bg-warm-50;
+.header {
+  @apply sticky top-0 left-0 right-0 z-100 bg-warm-50;
 }
 
-.navInner {
-  @apply flex justify-between items-center h-[46px];
+.header,
+.inner,
+.headerBrand,
+.headerRight {
+  @apply h-[70px];
 }
 
-.navBrand {
+.inner {
+  @apply flex;
+}
+
+.headerBrand {
+  @apply flex items-center py-3 w-60 border-b-1 border-warm-300 lg:border-b-0;
+}
+
+.brand {
   @apply flex items-center;
 
   & svg {
@@ -22,6 +33,10 @@
   }
 }
 
+.headerRight {
+  @apply flex items-center justify-end py-3 flex-grow border-b-1 border-warm-300;
+}
+
 a.github {
   @apply text-warm-500 transition-all;
 

site/pages/docs/[version]/[[...slug]].jsx

@@ -101,7 +101,8 @@ const DocsPage = ({ meta, nav, source, slug }) => {
         </button>
         <aside className={clsx('docs-sidebar', menuOpen ? 'mobile-open' : null)}>
           <div className="hidden lg:block h-12 pointer-events-none absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-warm-50" />
-          <ul role="menu">
+          <div className="docs-nav-overlay" role="presentation" onClick={() => setMenuOpen(!menuOpen)} onKeyUp={event => event.key === 'Escape' && setMenuOpen(false)} />
+          <ul className="docs-nav" role="menu">
             {menuOpen && (
               <li role="menuitem" className="!mb-8">
                 <VersionSelect className="block lg:hidden" />

site/styles/partials/docs.css

@@ -26,7 +26,7 @@
   @apply hidden lg:block fixed top-[70px] w-52;
   height: calc(100% - 70px);
 
-  & > ul {
+  & ul.docs-nav {
     @apply overflow-y-auto w-52 h-full py-10 pr-4;
   }
 
@@ -38,7 +38,7 @@
     }
   }
 
-  & > ul > li > ul {
+  & ul.docs-nav > li > ul {
     @apply ml-5 my-3;
 
     & > li {
@@ -74,10 +74,18 @@
     }
   }
 
+  & .docs-nav-overlay {
+    @apply hidden;
+  }
+
   &.mobile-open {
-    @apply block w-screen left-0 right-0 bg-warm-800 bg-opacity-30 backdrop-blur-sm z-100;
+    @apply block w-screen top-0 left-0 h-screen z-100;
+
+    & .docs-nav-overlay {
+      @apply block fixed inset-0 bg-warm-800 bg-opacity-30 backdrop-blur-sm -z-1;
+    }
 
-    & > ul {
+    & ul.docs-nav {
       @apply bg-white pl-8 shadow-2xl max-w-[290px];
       width: 80vw;
     }