Skip to content

Commit 14fbb87

Browse files
lethalNeutrinolethalNeutrino
authored
Merge pull request #53 from berkeleymt/mobile-navbar
feat: replace mobile navbar with hamburger menu overlay
2 parents 81a055a + f760448 commit 14fbb87

2 files changed

Lines changed: 40 additions & 18 deletions

File tree

‎templates/base.html‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,21 +55,48 @@
5555
<meta name="theme-color" content="#ffffff">
5656

5757
<script>
58-
function thing() {
59-
document.getElementById("navbar").classList.toggle("open");
58+
function toggleMobileMenu() {
59+
const menu = document.getElementById("mobile-menu");
60+
const btn = document.getElementById("mobile-menu-btn");
61+
const icon = btn.querySelector("i");
62+
menu.classList.toggle("hidden");
63+
const isOpen = !menu.classList.contains("hidden");
64+
icon.classList.toggle("bi-list", !isOpen);
65+
icon.classList.toggle("bi-x-lg", isOpen);
6066
}
6167
</script>
6268
</head>
6369

6470
<body>
71+
<div id="mobile-menu" class="md:hidden hidden fixed inset-x-0 top-0 bg-white z-50 border-b shadow-lg">
72+
<div class="flex justify-between items-center p-4">
73+
<img src="/assets/logo.svg" alt="BMT Logo" width="44" class="-mt-1">
74+
<button class="p-2" onclick="toggleMobileMenu()">
75+
<i class="bi bi-x-lg text-2xl"></i>
76+
</button>
77+
</div>
78+
<nav class="flex flex-col gap-2 p-4 pt-0">
79+
{{ macros::mobile_nav_link(path="@/_index.md", label="Home") }}
80+
{{ macros::mobile_nav_link(path="@/news/_index.md", label="News") }}
81+
{{ macros::mobile_nav_link(path="@/blog/_index.md", label="Blog") }}
82+
{{ macros::mobile_nav_link(path="@/about.md", label="About") }}
83+
{{ macros::mobile_nav_link(path="@/resources/index.md", label="Resources") }}
84+
{{ macros::mobile_nav_link(path="@/events/bmmt-2026.md", label="BmMT 2026") }}
85+
{{ macros::mobile_nav_link(path="@/events/bmt-2025-online.md", label="BMT 2025 Online") }}
86+
</nav>
87+
</div>
88+
6589
<div class="max-w-4xl min-h-screen p-4 md:p-8 mx-auto flex flex-col gap-8">
90+
<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()">
91+
<i class="bi bi-list text-xl"></i>
92+
</button>
93+
6694
{% block header %}
6795
<header class="flex flex-col gap-4 text-center">
6896
<a class="mx-auto" href="/"><img src="/assets/logo.svg" alt="BMT Logo" width="80"></a>
6997
<p class="text-2xl font-bold">Berkeley Math Tournament</p>
7098

71-
<nav id="navbar"
72-
class="[&.open>a.nav-hidden]:block [&>a.nav-hidden]:hidden flex flex-col md:flex-row md:mx-auto gap-4 items-stretch">
99+
<nav class="hidden md:flex md:flex-row md:mx-auto gap-4 items-stretch">
73100
{{ macros::nav_link(path="@/_index.md", label="Home") }}
74101
{{ macros::nav_link(path="@/news/_index.md", label="News") }}
75102
{{ macros::nav_link(path="@/blog/_index.md", label="Blog") }}

‎templates/macros.html‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -43,29 +43,24 @@ <h2 class="mt-4 col-span-2 text-sm text-gray-400">{{ year }}</h2>
4343
{% set href = get_url(path=path) %}
4444
{% set active = current_url | default(value='') == href %}
4545

46-
{# Desktop version #}
47-
<p class="hidden md:block first:hidden text-gray-400">⁄</p>
48-
<div class="hidden md:block relative">
46+
<p class="first:hidden text-gray-400">⁄</p>
47+
<div class="relative">
4948
<span class="invisible font-semibold">{{ label }}</span>
5049
<a href="{{ href }}"
5150
class="absolute inset-0 text-center text-gray-600 {% if active %} !text-black font-semibold {% endif %}">
5251
{{ label }}
5352
</a>
5453
</div>
54+
{% endmacro nav_link %}
5555

56-
{# Mobile version #}
57-
{% if active %}
58-
<button class="md:hidden order-1 font-semibold border py-2 px-3 rounded-xl relative" onclick="thing()">
59-
{{ label }}
60-
<i class="bi bi-chevron-down [.open_&]:-scale-y-100 transition-transform absolute right-4"></i>
61-
</button>
62-
{% else %}
63-
<a href="{{ href }}" class="py-2 px-3 bg-gray-100 border rounded-xl nav-hidden order-2">
56+
{% macro mobile_nav_link(path, label) %}
57+
{% set href = get_url(path=path) %}
58+
{% set active = current_url | default(value='') == href %}
59+
60+
<a href="{{ href }}" class="py-2 px-3 rounded-lg {% if active %} bg-gray-100 font-semibold {% endif %}">
6461
{{ label }}
6562
</a>
66-
{% endif %}
67-
68-
{% endmacro nav_link %}
63+
{% endmacro mobile_nav_link %}
6964

7065
{% macro index_math() %}
7166
<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>

0 commit comments

Comments
 (0)