add nav drawer

components/hamburger-button.tsx

@@ -1,5 +1,3 @@
-import { Button } from '@geist-ui/react';
-
 const HamburgerLine = () => {
   return (
     <div
@@ -19,18 +17,19 @@ const HamburgerLine = () => {
 
 export default function HamburgerButton(props: { onClick: () => void }) {
   return (
-    <Button
-      iconRight={
-        <div>
-          <HamburgerLine />
-          <HamburgerLine />
-          <HamburgerLine />
-        </div>
-      }
-      auto
-      size="small"
+    <button
       aria-label="open-menu"
       onClick={props.onClick}
-    />
+      css={{
+        background: 'none',
+        outline: 'none',
+        border: 'none',
+        cursor: 'pointer',
+      }}
+    >
+      <HamburgerLine />
+      <HamburgerLine />
+      <HamburgerLine />
+    </button>
   );
 }

components/nav-drawer-item.tsx

@@ -0,0 +1,78 @@
+import Link from 'next/link';
+
+/**
+ * Navbar drawer item.
+ */
+export default function NavDrawerItem(props: {
+  children: React.ReactNode;
+  to: string;
+  newTab?: boolean;
+}) {
+  const { children, to, newTab } = props;
+
+  if (newTab) {
+    return (
+      <li
+        css={{
+          margin: 0,
+          padding: '8px 0',
+          '&::before': {
+            content: 'none',
+          },
+        }}
+      >
+        <a
+          href={to}
+          target="_blank"
+          rel="noreferrer"
+          css={{
+            textDecoration: 'none',
+            fontSize: 18,
+            fontWeight: 500,
+            color: 'white',
+            marginLeft: 50,
+            userSelect: 'none',
+            transition: '250ms ease',
+            '&:hover': {
+              color: '#fafafa',
+            },
+          }}
+        >
+          {children}
+        </a>
+      </li>
+    );
+  }
+
+  return (
+    <li
+      css={{
+        margin: 0,
+        padding: '8px 0',
+        '&::before': {
+          content: 'none',
+        },
+      }}
+    >
+      <Link href={to}>
+        <a
+          href={to}
+          css={{
+            textDecoration: 'none',
+            fontSize: 18,
+            fontWeight: 500,
+            color: 'white',
+            marginLeft: 50,
+            userSelect: 'none',
+            transition: '250ms ease',
+            '&:hover': {
+              color: '#fafafa',
+            },
+          }}
+        >
+          {children}
+        </a>
+      </Link>
+    </li>
+  );
+}

components/nav-drawer.tsx

@@ -1,10 +1,23 @@
+import NavDrawerItem from './nav-drawer-item';
+import routes from '../routes';
+
 /**
  * Navbar drawer.
  */
-export default function NavDrawer(props: {
-  open: () => void;
-  onClose: () => void;
-  onOpen: () => void;
-}) {
-  return <></>;
+export default function NavDrawer() {
+  return (
+    <ul
+      css={{
+        margin: 0,
+        padding: '24px 0',
+        backgroundColor: 'black',
+      }}
+    >
+      <NavDrawerItem to={routes.theory.index}>theory</NavDrawerItem>
+      <NavDrawerItem to={routes.theory.caseStudy}>case study</NavDrawerItem>
+      <NavDrawerItem to={routes.blog} newTab>
+        blog
+      </NavDrawerItem>
+    </ul>
+  );
 }

components/nav-item.tsx

@@ -14,6 +14,7 @@ export default function NavItem(props: {
     return (
       <li
         css={{
+          margin: 0,
           '&::before': {
             content: 'none',
           },
@@ -45,6 +46,7 @@ export default function NavItem(props: {
   return (
     <li
       css={{
+        margin: 0,
         '&::before': {
           content: 'none',
         },

components/navbar.tsx

@@ -11,33 +11,14 @@ import routes from '../routes';
  * Navbar.
  */
 export default function Navbar() {
-  const [state, setState] = useState({
-    drawerOpen: false,
-  });
+  const [showDrawer, setShowDrawer] = useState(false);
 
-  const theme = useTheme();
   const isCollapsed = useMediaQuery('sm', { match: 'down' });
 
-  const toggleDrawer = () => {
-    setState({
-      drawerOpen: !state.drawerOpen,
-    });
-  };
-
-  const onCloseDrawer = () => {
-    setState({
-      drawerOpen: false,
-    });
-  };
-
-  const onOpenDrawer = () => {
-    setState({
-      drawerOpen: true,
-    });
-  };
+  const toggleDrawer = () => setShowDrawer(!showDrawer);
 
   const LinkList = () => {
-    if (isCollapsed) return <HamburgerButton onClick={() => {}} />;
+    if (isCollapsed) return <HamburgerButton onClick={toggleDrawer} />;
 
     return (
       <>
@@ -76,6 +57,7 @@ export default function Navbar() {
         >
           <li
             css={{
+              margin: 0,
               '&::before': {
                 content: 'none',
               },
@@ -96,6 +78,7 @@ export default function Navbar() {
           <LinkList />
         </ul>
       </nav>
+      {showDrawer && isCollapsed && <NavDrawer />}
     </>
   );
 }