feat(website): mobile toggle menu

apps/website/src/assets/boxicons/bx-menu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><!--Boxicons v3.0 https://boxicons.com | License  https://docs.boxicons.com/free--><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/></svg>

apps/website/src/components/Button.tsx

@@ -8,6 +8,7 @@ interface LinkProps {
     openExternally?: boolean;
     children: ComponentChildren;
     title?: string;
+    onClick?: (e: MouseEvent) => void;
 }
 
 interface ButtonProps extends Omit<LinkProps, "children"> {

apps/website/src/components/Header.css

@@ -36,7 +36,7 @@ header img {
 }
 
 header img+span {
-    font-size: 1.1em;
+    font-size: 1.3em;
 }
 
 header nav {
@@ -55,6 +55,48 @@ header nav a.active {
     font-weight: bold;
 }
 
+@media (max-width: 719px) {
+    header .content-wrapper {
+        display: block;
+    }
+    
+    header .first-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-grow: 1;
+        align-self: stretch;
+    }
+
+    header .menu-toggle {
+        color: inherit;
+    }
+
+    header nav {
+        flex-direction: column;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 200ms ease-in-out;        
+    }
+
+    header nav.mobile-shown {
+        display: flex;
+        max-height: 100vh;
+        padding: 2em 0;
+    }
+
+    header nav a {
+        font-size: 1.25em;
+        padding: 0.5em 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    }
+
+    header nav a:last-of-type {
+        border-bottom: unset;
+    }
+
+}
+
 @media (min-width: 720px) {
     header {
         font-size: inherit;

apps/website/src/components/Header.tsx

@@ -1,7 +1,11 @@
 import "./Header.css";
 import { useLocation } from 'preact-iso';
 import DownloadButton from './DownloadButton';
+import { Link } from "./Button";
+import Icon from "./Icon";
 import logoPath from "../assets/icon-color.svg";
+import menuIcon from "../assets/boxicons/bx-menu.svg?raw";
+import { useState } from "preact/hooks";
 
 interface HeaderLink {
     url: string;
@@ -10,21 +14,36 @@ interface HeaderLink {
 }
 
 const HEADER_LINKS: HeaderLink[] = [
+    { url: "/get-started/", text: "Get started" },
     { url: "https://docs.triliumnotes.org/", text: "Documentation", external: true },
     { url: "/support-us/", text: "Support us" }
 ]
 
 export function Header() {
 	const { url } = useLocation();
+    const [ mobileMenuShown, setMobileMenuShown ] = useState(false);
 
 	return (
 		<header>
             <div class="content-wrapper">
-                <a class="banner" href="/">
+                <div class="first-row">
-                    <img src={logoPath} width="300" height="300" />&nbsp;<span>Trilium Notes</span>
+                    <a class="banner" href="/">
-                </a>
+                        <img src={logoPath} width="300" height="300" />&nbsp;<span>Trilium Notes</span>
+                    </a>
 
-                <nav>
+                    <Link
+                        href="#"
+                        className="mobile-only menu-toggle"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            setMobileMenuShown(!mobileMenuShown)
+                        }}
+                    >
+                        <Icon svg={menuIcon} />
+                    </Link>
+                </div>
+
+                <nav className={`${mobileMenuShown ? "mobile-shown" : ""}`}>
                     {HEADER_LINKS.map(link => (
                         <a
                             href={link.url}