Skip to content

feat: replace mobile navbar with hamburger menu overlay #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lethalNeutrino merged 2 commits into from
Jan 28, 2026
Merged

feat: replace mobile navbar with hamburger menu overlay #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3c360f4
feat: replace mobile navbar with hamburger menu overlay
lethalNeutrino Jan 27, 2026
f760448
fix: balance logo and close button sizes in mobile menu
lethalNeutrino Jan 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 31 additions & 4 deletions templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,21 +55,48 @@
<meta name="theme-color" content="#ffffff">

<script>
function thing() {
document.getElementById("navbar").classList.toggle("open");
function toggleMobileMenu() {
const menu = document.getElementById("mobile-menu");
const btn = document.getElementById("mobile-menu-btn");
const icon = btn.querySelector("i");
menu.classList.toggle("hidden");
const isOpen = !menu.classList.contains("hidden");
icon.classList.toggle("bi-list", !isOpen);
icon.classList.toggle("bi-x-lg", isOpen);
}
</script>
</head>

<body>
<div id="mobile-menu" class="md:hidden hidden fixed inset-x-0 top-0 bg-white z-50 border-b shadow-lg">
<div class="flex justify-between items-center p-4">
<img src="/assets/logo.svg" alt="BMT Logo" width="44" class="-mt-1">
<button class="p-2" onclick="toggleMobileMenu()">
<i class="bi bi-x-lg text-2xl"></i>
</button>
</div>
<nav class="flex flex-col gap-2 p-4 pt-0">
{{ macros::mobile_nav_link(path="@/_index.md", label="Home") }}
{{ macros::mobile_nav_link(path="@/news/_index.md", label="News") }}
{{ macros::mobile_nav_link(path="@/blog/_index.md", label="Blog") }}
{{ macros::mobile_nav_link(path="@/about.md", label="About") }}
{{ macros::mobile_nav_link(path="@/resources/index.md", label="Resources") }}
{{ macros::mobile_nav_link(path="@/events/bmmt-2026.md", label="BmMT 2026") }}
{{ macros::mobile_nav_link(path="@/events/bmt-2025-online.md", label="BMT 2025 Online") }}
</nav>
</div>

<div class="max-w-4xl min-h-screen p-4 md:p-8 mx-auto flex flex-col gap-8">
<button id="mobile-menu-btn" class="md:hidden fixed top-4 right-4 border py-2 px-3 rounded-xl bg-white z-50" onclick="toggleMobileMenu()">
<i class="bi bi-list text-xl"></i>
</button>

{% block header %}
<header class="flex flex-col gap-4 text-center">
<a class="mx-auto" href="/"><img src="/assets/logo.svg" alt="BMT Logo" width="80"></a>
<p class="text-2xl font-bold">Berkeley Math Tournament</p>

<nav id="navbar"
class="[&.open>a.nav-hidden]:block [&>a.nav-hidden]:hidden flex flex-col md:flex-row md:mx-auto gap-4 items-stretch">
<nav class="hidden md:flex md:flex-row md:mx-auto gap-4 items-stretch">
{{ macros::nav_link(path="@/_index.md", label="Home") }}
{{ macros::nav_link(path="@/news/_index.md", label="News") }}
{{ macros::nav_link(path="@/blog/_index.md", label="Blog") }}
Expand Down
23 changes: 9 additions & 14 deletions templates/macros.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,29 +43,24 @@ <h2 class="mt-4 col-span-2 text-sm text-gray-400">{{ year }}</h2>
{% set href = get_url(path=path) %}
{% set active = current_url | default(value='') == href %}

{# Desktop version #}
<p class="hidden md:block first:hidden text-gray-400">⁄</p>
<div class="hidden md:block relative">
<p class="first:hidden text-gray-400">⁄</p>
<div class="relative">
<span class="invisible font-semibold">{{ label }}</span>
<a href="{{ href }}"
class="absolute inset-0 text-center text-gray-600 {% if active %} !text-black font-semibold {% endif %}">
{{ label }}
</a>
</div>
{% endmacro nav_link %}

{# Mobile version #}
{% if active %}
<button class="md:hidden order-1 font-semibold border py-2 px-3 rounded-xl relative" onclick="thing()">
{{ label }}
<i class="bi bi-chevron-down [.open_&]:-scale-y-100 transition-transform absolute right-4"></i>
</button>
{% else %}
<a href="{{ href }}" class="py-2 px-3 bg-gray-100 border rounded-xl nav-hidden order-2">
{% macro mobile_nav_link(path, label) %}
{% set href = get_url(path=path) %}
{% set active = current_url | default(value='') == href %}

<a href="{{ href }}" class="py-2 px-3 rounded-lg {% if active %} bg-gray-100 font-semibold {% endif %}">
{{ label }}
</a>
{% endif %}

{% endmacro nav_link %}
{% endmacro mobile_nav_link %}

{% macro index_math() %}
<span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>F</mi><mo stretchy="false">(</mo><mi>z</mi><mo stretchy="false">)</mo><mo>=</mo><munderover><mo>∑</mo><mrow><mi>n</mi><mo>=</mo><mn>0</mn></mrow><mi mathvariant="normal">∞</mi></munderover><msub><mi>f</mi><mi>n</mi></msub><mfrac><msup><mi>z</mi><mi>n</mi></msup><mrow><mi>n</mi><mo stretchy="false">!</mo></mrow></mfrac></mrow><annotation encoding="application/x-tex">F(z) = \sum_{n=0}^\infty f_n \frac{z^n}{n!}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height: 1em; vertical-align: -0.25em;"></span><span class="mord mathnormal" style="margin-right: 0.1389em;">F</span><span class="mopen">(</span><span class="mord mathnormal" style="margin-right: 0.044em;">z</span><span class="mclose">)</span><span class="mspace" style="margin-right: 0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right: 0.2778em;"></span></span><span class="base"><span class="strut" style="height: 2.9185em; vertical-align: -1.2671em;"></span><span class="mop op-limits"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 1.6514em;"><span class="" style="top: -1.8829em; margin-left: 0em;"><span class="pstrut" style="height: 3.05em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathnormal mtight">n</span><span class="mrel mtight">=</span><span class="mord mtight">0</span></span></span></span><span class="" style="top: -3.05em;"><span class="pstrut" style="height: 3.05em;"></span><span class=""><span class="mop op-symbol large-op">∑</span></span></span><span class="" style="top: -4.3em; margin-left: 0em;"><span class="pstrut" style="height: 3.05em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">∞</span></span></span></span><span class="vlist-s">&ZeroWidthSpace;</span></span><span class="vlist-r"><span class="vlist" style="height: 1.2671em;"><span class=""></span></span></span></span></span><span class="mspace" style="margin-right: 0.1667em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right: 0.1076em;">f</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 0.1514em;"><span class="" style="top: -2.55em; margin-left: -0.1076em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight">n</span></span></span></span><span class="vlist-s">&ZeroWidthSpace;</span></span><span class="vlist-r"><span class="vlist" style="height: 0.15em;"><span class=""></span></span></span></span></span></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 1.3414em;"><span class="" style="top: -2.314em;"><span class="pstrut" style="height: 3em;"></span><span class="mord"><span class="mord mathnormal">n</span><span class="mclose">!</span></span></span><span class="" style="top: -3.23em;"><span class="pstrut" style="height: 3em;"></span><span class="frac-line" style="border-bottom-width: 0.04em;"></span></span><span class="" style="top: -3.677em;"><span class="pstrut" style="height: 3em;"></span><span class="mord"><span class="mord"><span class="mord mathnormal" style="margin-right: 0.044em;">z</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.6644em;"><span class="" style="top: -3.063em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight">n</span></span></span></span></span></span></span></span></span></span></span><span class="vlist-s">&ZeroWidthSpace;</span></span><span class="vlist-r"><span class="vlist" style="height: 0.686em;"><span class=""></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span></span>
Expand Down
Loading