Merge pull request #12 from acmucsd/website-responsiveness

feat(website): add mobile support

Author: duanwilliam

website/src/components/Navbar/MobileDrawer/_vars.scss

@@ -0,0 +1 @@
+$navbar-drawer-width: 80vw;

website/src/components/Navbar/MobileDrawer/index.tsx

@@ -0,0 +1,50 @@
+import c from "clsx"
+
+import s from "./styles.module.scss"
+
+import { Dispatch, ReactNode, SetStateAction, useState } from "react"
+
+interface MobileDrawerProps {
+  isOpen: boolean
+  setIsOpen: Dispatch<SetStateAction<boolean>>
+  secondaryMenu?: ReactNode
+  children: ReactNode
+}
+
+const MobileDrawer = ({ isOpen, setIsOpen, secondaryMenu, children }: MobileDrawerProps) => {
+  const [menu, setMenu] = useState<'primary' | 'secondary'>(secondaryMenu ? 'secondary' : 'primary')
+
+  return (
+    <>
+      <div
+        className={c(s.backdrop, isOpen && s.backdropVisible)}
+        role="presentation"
+        onClick={() => { setIsOpen(false); }}
+      />
+      <div className={c(s.drawer, isOpen && s.show)}>
+        <div className={c(s.panes, menu === 'secondary' && s.showSecondaryPane)}>
+          <div className={s.pane}>
+            <button
+              className={s.switchPaneButton}
+              onClick={() => { setMenu('secondary') }}
+            >
+                Go to secondary menu →
+            </button>
+            {children}
+          </div>
+          <div className={s.pane}>
+            <button
+              className={s.switchPaneButton}
+              onClick={() => { setMenu('primary') }}
+            >
+              ← Back to primary menu
+            </button>
+            {secondaryMenu}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default MobileDrawer

website/src/components/Navbar/MobileDrawer/styles.module.scss

@@ -0,0 +1,66 @@
+@use "./vars";
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  visibility: hidden;
+  opacity: 0;
+  background-color: hsl(0 0% 0% / 0.1);
+  
+  &.backdropVisible {
+    visibility: visible;
+    opacity: 1; 
+  }
+}
+
+.drawer {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: vars.$navbar-drawer-width;
+  
+  transform: translate3d(-100%, 0, 0);
+  visibility: hidden;
+  opacity: 0;
+  
+  background-color: #fff; // TODO
+  box-shadow: 0px 8px 8px hsl(0 0 0 / 0.3); // TODO
+  
+  overflow-x: hidden;
+  
+  transition: opacity 400ms ease,
+    visibility 400ms ease,
+    transform 400ms ease;
+  
+  &.show {
+    transform: translateZ(0);
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .panes {
+    display: flex;
+    height: 100%;
+    
+    transition: transform 400ms ease;
+
+    &.showSecondaryPane {
+      transform: translate3d(#{-1 * vars.$navbar-drawer-width}, 0, 0);
+    }
+
+    .pane {
+      flex-shrink: 0;
+      padding: 1rem 0.5rem 0.5rem;
+      width: vars.$navbar-drawer-width;
+      overflow-x: hidden;
+
+      .switchPaneButton {
+        width: 100%;
+        padding: 0.5rem 1.5rem;
+        background-color: hsl(0 0% 0% / 0.05);
+        margin-bottom: 0.5rem;
+      }
+    }
+  }
+}

website/src/components/Navbar/MobileDrawer/styles.module.scss.d.ts

@@ -0,0 +1,17 @@
+// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY
+declare namespace StylesModuleScssNamespace {
+  export interface IStylesModuleScss {
+    backdrop: string;
+    backdropVisible: string;
+    drawer: string;
+    pane: string;
+    panes: string;
+    show: string;
+    showSecondaryPane: string;
+    switchPaneButton: string;
+  }
+}
+
+declare const StylesModuleScssModule: StylesModuleScssNamespace.IStylesModuleScss;
+
+export = StylesModuleScssModule;

website/src/components/Navbar/MobileMenuButton/_exports.module.scss

@@ -0,0 +1,6 @@
+@use "@/styles/utils";
+@use "./vars" as *;
+
+:export {
+  iconSize: utils.strip-units($icon-size);
+}

website/src/components/Navbar/MobileMenuButton/_exports.module.scss.d.ts

@@ -0,0 +1,10 @@
+// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY
+declare namespace ExportsModuleScssNamespace {
+  export interface IExportsModuleScss {
+    iconSize: string;
+  }
+}
+
+declare const ExportsModuleScssModule: ExportsModuleScssNamespace.IExportsModuleScss;
+
+export = ExportsModuleScssModule;

website/src/components/Navbar/MobileMenuButton/_vars.scss

@@ -0,0 +1 @@
+$icon-size: 32px;

website/src/components/Navbar/MobileMenuButton/index.tsx

@@ -0,0 +1,46 @@
+import c from "clsx";
+import type { MouseEventHandler } from "react";
+
+import { iconSize as iconSizeString } from "./_exports.module.scss";
+import s from "./styles.module.scss"
+
+
+interface MobileMenuButtonProps {
+  isOpen?: boolean
+  onClick: MouseEventHandler<HTMLButtonElement>
+  className?: string
+}
+
+const MobileMenuButton = ({ isOpen, onClick, className }: MobileMenuButtonProps) => {
+  return (
+    <button
+      type="button"
+      title={isOpen ? 'Close menu' : 'Open menu'}
+      className={c(s.button, className)}
+      onClick={onClick}
+    >
+      <span className={s.icon} aria-hidden="true">
+        <svg
+          className={c(s.hamburgerIcon, isOpen ? s.closed : s.open)}
+          width={iconSizeString}
+          height={iconSizeString}
+          viewBox="0 0 32 32"
+        >
+          <path d="M4 24V22H28V24ZM4 17V15H28V17ZM4 10V8H28V10Z" />
+        </svg>
+      </span>
+      <span className={s.icon} aria-hidden="true">
+        <svg
+          className={c(s.closeIcon, isOpen ? s.open : s.closed)}
+          width={iconSizeString}
+          height={iconSizeString}
+          viewBox="0 0 32 32"
+        >
+          <path d="M8.3 25.1 6.9 23.7 14.6 16 6.9 8.3 8.3 6.9 16 14.6 23.7 6.9 25.1 8.3 17.4 16 25.1 23.7 23.7 25.1 16 17.4Z"/>
+        </svg>
+      </span>
+    </button>
+  )
+}
+
+export default MobileMenuButton

website/src/components/Navbar/MobileMenuButton/styles.module.scss

@@ -0,0 +1,35 @@
+@use "./vars";
+
+.button {
+  width: vars.$icon-size;
+  height: vars.$icon-size;
+  cursor: pointer;
+  position: relative;
+
+  .icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    
+    .hamburgerIcon, .closeIcon {
+      position: relative;
+      transition: all 0.15s ease;
+      width: vars.$icon-size;
+      height: vars.$icon-size;
+    }
+  
+    .closeIcon {
+      transform-origin: center center;
+    }
+
+    .open {
+      transform: scale(1);
+      opacity: 1;
+    }
+
+    .closed {
+      transform: scale(0);
+      opacity: 0;
+    }
+  }
+}

website/src/components/Navbar/MobileMenuButton/styles.module.scss.d.ts

@@ -0,0 +1,15 @@
+// AUTOGENERATED FILE -- DO NOT EDIT DIRECTLY
+declare namespace StylesModuleScssNamespace {
+  export interface IStylesModuleScss {
+    button: string;
+    closeIcon: string;
+    closed: string;
+    hamburgerIcon: string;
+    icon: string;
+    open: string;
+  }
+}
+
+declare const StylesModuleScssModule: StylesModuleScssNamespace.IStylesModuleScss;
+
+export = StylesModuleScssModule;