Add services page, update to collapse menu on mobile

Author: wkirby

bun.lock

@@ -30,6 +30,7 @@
     "embla-carousel-react": "^8.6.0",
     "fast-glob": "^3.3.3",
     "gray-matter": "^4.0.3",
+    "hamburger-react": "^2.5.2",
     "highlight.js": "^11.11.1",
     "husky": "^9.1.7",
     "js-yaml": "^4.1.0",

package.json

@@ -10,9 +10,24 @@ export const CheckList: React.FC<{
   className?: string;
   variant?: ColorVariant;
   icon?: LucideIcon;
-}> = ({ listItems = [], className, variant, icon: Icon = Check, ...props }) => {
+  columns?: boolean;
+}> = ({
+  listItems = [],
+  className,
+  variant,
+  columns = false,
+  icon: Icon = Check,
+  ...props
+}) => {
   return (
-    <ul className={clsx(styles.check_list, className)} {...props}>
+    <ul
+      className={clsx(
+        styles.check_list,
+        columns && styles["check_list--columns"],
+        className
+      )}
+      {...props}
+    >
       {listItems.map((item, i) => (
         <li key={i}>
           <Icon

public/img/dots.svg

@@ -1,10 +1,13 @@
-import styles from "styles/components/Navbar.module.scss";
 import clsx from "clsx";
-import Link from "next/link";
 import { LogoType } from "components/LogoType";
+import { Cross as Hamburger } from "hamburger-react";
+import Link from "next/link";
+import { useState } from "react";
+import styles from "styles/components/Navbar.module.scss";
 
 const NAV_ITEMS = [
   { href: "/", label: "Home", hideMobile: true },
+  { href: "/services", label: "Services" },
   { href: "/team", label: "Team" },
   { href: "/mission", label: "Mission" },
   {
@@ -17,43 +20,57 @@ export const Navbar: React.FC<{
   showTagline?: boolean;
   actions?: React.ReactNode;
 }> = ({ showTagline = true, actions }) => {
+  const [expanded, setExpanded] = useState(false);
+
   return (
     <nav className={styles.navbar}>
-      <Link href="/" className={styles.navbar__logo}>
-        <LogoType />
-      </Link>
+      <div className={styles.navbar__header}>
+        <Link href="/" className={styles.navbar__logo}>
+          <LogoType />
+        </Link>
 
-      <nav className={styles.navbar__nav}>
-        {NAV_ITEMS.map((n) => {
-          return (
-            <Link
-              key={n.href}
-              href={n.href}
-              className={clsx(
-                styles.navbar__nav_item,
-                n.hideMobile && styles["navbar__nav_item--hide_mobile"],
-              )}
-            >
-              {n.label}
-            </Link>
-          );
-        })}
-      </nav>
-
-      <div className={styles.navbar__right}>
-        {actions && <div className={styles.navbar__actions}>{actions}</div>}
+        <span
+          className={clsx(styles.navbar__toggle, "text-primary text-muted")}
+        >
+          <Hamburger size={24} toggled={expanded} toggle={setExpanded} />
+        </span>
+      </div>
 
-        {showTagline && (
-          <a
-            href="/team"
-            className={styles.navbar__tagline}
-          >
-            <span className={styles.navbar__attention}>
-              small but <span className={styles.navbar__highlight}>mighty</span>
-            </span>
-          </a>
+      <div
+        className={clsx(
+          styles.navbar__body,
+          expanded && styles["navbar__body--expanded"]
         )}
+      >
+        <nav className={clsx(styles.navbar__nav)}>
+          {NAV_ITEMS.map((n) => {
+            return (
+              <Link
+                key={n.href}
+                href={n.href}
+                className={clsx(
+                  styles.navbar__nav_item,
+                  n.hideMobile && styles["navbar__nav_item--hide_mobile"]
+                )}
+              >
+                {n.label}
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className={styles.navbar__right}>
+          {actions && <div className={styles.navbar__actions}>{actions}</div>}
+        </div>
       </div>
+
+      {showTagline && (
+        <a href="/team" className={styles.navbar__tagline}>
+          <span className={styles.navbar__attention}>
+            small but <span className={styles.navbar__highlight}>mighty</span>
+          </span>
+        </a>
+      )}
     </nav>
   );
 };