Merge pull request #23 from coderdojo-japan/feature/mini-navbar

TOPで画面幅が小さいときに使うプルダウン式のナビバーの実装

Author: Fukusan64

_includes/header.html

@@ -1,5 +1,52 @@
-<h1 class="max-w-lg mx-auto pt-5 px-8">
+<h1 class="xl:block hidden mx-auto max-w-lg pt-5 px-8">
   <a href="/">
     <img src="/img/common/header-logo.webp" alt="DojoCon Japan 2025 Inspire Next." />
   </a>
 </h1>
+
+<div class="fixed xl:hidden left-0 top-7 z-10 flex w-screen min-h-18 justify-center">
+  <div
+    class="flex flex-col h-full w-[calc(100%-60px)] items-stretch rounded-[10px] bg-[#f5f5f5] px-5 py-3 shadow-[7px_7px_10px_rgba(125,125,125,0.15)] inset-shadow-[0px_-2px_10px_rgba(125,125,125,0.25)]">
+    <div class="flex items-center justify-between gap-2">
+      <a href="/" class="flex h-full items-center">
+        <img src="/img/common/header-logo.webp" class="w-full max-w-[250px] max-h-full"
+          alt="DojoCon Japan 2025 Inspire Next." />
+      </a>
+      <button id="menu-btn" type="button" aria-label="メニューを開く"
+        class="flex p-2 shrink-0 flex-col items-center justify-center rounded border border-gray-300 bg-white cursor-pointer">
+        <i class="fa-solid fa-bars"></i>
+      </button>
+    </div>
+    <nav id="menu-nav" class="hidden my-2 flex-col items-stretch transition-all duration-300">
+      <ul
+        class="flex flex-col min-h-20 items-stretch gap-2 *:px-6 *:text-center *:text-[20px] *:leading-[1.75] *:text-[#cc8f2e] [&_a]:block">
+        <li><a href="#outline">開催概要</a></li>
+        <li><a href="#session">セッション</a></li>
+        <li><a href="/events">企画</a></li>
+        <li><a href="/contest">コンテスト</a></li>
+        <li><a href="https://suzuri.jp/DojoConJapan" target="_blank">グッズ</a></li>
+        <li><a href="/sponsorship">スポンサー募集</a></li>
+        <li><a href="{{ site.contact }}" target="_blank">お問い合わせ</a></li>
+      </ul>
+    </nav>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const menuBtn = document.getElementById('menu-btn');
+    const menuNav = document.getElementById('menu-nav');
+    if (!menuBtn || !menuNav) return;
+
+    menuBtn.addEventListener('click', function () {
+      menuNav.classList.toggle('flex');
+      menuNav.classList.toggle('hidden');
+    });
+    menuNav.querySelectorAll('a').forEach(function (link) {
+      link.addEventListener('click', function () {
+        menuNav.classList.remove('flex');
+        menuNav.classList.add('hidden');
+      });
+    });
+  });
+</script>

_includes/navbar.html

@@ -1,4 +1,4 @@
-<div class="mx-4 sticky top-4 z-10">
+<div class="hidden xl:block sticky mx-4 top-4 z-10">
   <nav
     class="rounded-[40px] w-fit mx-auto bg-[#f5f5f5] mt-8 inset-shadow-[0px_-2px_10px_rgba(125,125,125,0.25)] shadow-[7px_7px_10px_rgba(125,125,125,0.15)]">
     <ul class="flex flex-wrap min-h-20 items-center p-5 justify-center divide-x-2 gap-y-2 *:text-[#cc8f2e] *:px-6">

_includes/top/sections/hero.html

@@ -1,4 +1,4 @@
-<div class="max-w-[1500px] mt-2 xl:-mt-14 mx-auto px-[2%] md:px-8">
+<div class="max-w-[1500px] mt-25 xl:-mt-14 mx-auto px-[2%] md:px-8 ">
   <img src="/img/top/hero-image.webp" alt="好奇心に火をつけよう！！ Inspire Next" />
 </div>
 

_includes/top/sections/outline.html

@@ -1,4 +1,4 @@
-<h2 id="outline" class="text-4xl text-center mb-8 pt-20">
+<h2 id="outline" class="text-4xl text-center mb-8 pt-28 -mt-8">
   開催概要
   <span class="block mt-5 text-2xl">OUTLINE</span>
 </h2>

_includes/top/sections/session.html

@@ -1,4 +1,4 @@
-<div id="session" class="max-w-3xl lg:max-w-[1800px] px-8 mx-auto mt-8 mb-16 flex flex-col lg:-mt-64 lg:flex-row items-center lg:items-start">
+<div id="session" class="max-w-3xl lg:max-w-[1800px] pt-28 pb-8 mx-auto -mt-12 mb-16 flex flex-col lg:-mt-64 lg:flex-row items-center lg:items-start">
   <div class="w-full lg:w-2/5 mb-8 lg:mt-68">
     <div class="lg:max-w-sm lg:place-self-end lg:mr-[10%]">
       <h2 class="text-4xl mb-4 text-center lg:text-left">