From ac45617d8f7b466c3009a3a755ea57a39d7e236d Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 27 Sep 2025 17:22:34 +0300
Subject: [PATCH] feat(website): mobile toggle menu

---
 apps/website/src/assets/boxicons/bx-menu.svg |  1 +
 apps/website/src/components/Button.tsx       |  1 +
 apps/website/src/components/Header.css       | 44 +++++++++++++++++++-
 apps/website/src/components/Header.tsx       | 27 ++++++++++--
 4 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 apps/website/src/assets/boxicons/bx-menu.svg

diff --git a/apps/website/src/assets/boxicons/bx-menu.svg b/apps/website/src/assets/boxicons/bx-menu.svg
new file mode 100644
index 000000000..1c1eebcb5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/apps/website/src/components/Button.tsx b/apps/website/src/components/Button.tsx
index cb0e5022e..c48cf66df 100644
--- a/apps/website/src/components/Button.tsx
+++ b/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"> {
diff --git a/apps/website/src/components/Header.css b/apps/website/src/components/Header.css
index 6a0b58ace..a3c968fe3 100644
--- a/apps/website/src/components/Header.css
+++ b/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;
diff --git a/apps/website/src/components/Header.tsx b/apps/website/src/components/Header.tsx
index 32bad58af..d8e52c0c2 100644
--- a/apps/website/src/components/Header.tsx
+++ b/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="/">
-                    <img src={logoPath} width="300" height="300" />&nbsp;<span>Trilium Notes</span>
-                </a>
+                <div class="first-row">
+                    <a class="banner" href="/">
+                        <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}