Hamburger menu (#19)

* feat:add hamburger menu * fix:layout for the nav mobile
CoderDojoAlbaIulia · Jan 26, 2024 · af6189d · af6189d
1 parent 3712dd9
commit af6189d
Show file tree

Hide file tree

Showing 13 changed files with 139 additions and 33 deletions.
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -2,7 +2,7 @@
 import Button from "./Button.astro";
 ---
 
-<div class="bg-white">
+<div class="bg-white pt-28 md:pt-0">
   <div class="relative">
     <div class="mx-auto max-w-7xl">
       <div class="relative z-10 pt-0 lg:pt-14 lg:w-full lg:max-w-2xl">

diff --git a/src/components/MobileNav.jsx b/src/components/MobileNav.jsx
@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from "react";
+import { navLinks } from "../data";
+
+export default function MobileNav() {
+  const [showNav, setShowNav] = useState(false);
+  const [currentPath, setCurrentPath] = useState();
+
+  useEffect(() => {
+    setCurrentPath(window.location.pathname);
+  }, []);
+
+  return (
+    <div className="relative md:hidden">
+      <button
+        onClick={() => setShowNav(!showNav)}
+        className={` z-50 -ml-12 px-3 py-2 border rounded ${
+          showNav ? "border-white fixed" : "border-gray-600 absolute"
+        } transition`}
+      >
+        {showNav ? (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-6 h-6 z-50 text-white"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M6 18 18 6M6 6l12 12"
+            />
+          </svg>
+        ) : (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-6 h-6 z-50"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+            />
+          </svg>
+        )}
+      </button>
+      {showNav ? (
+        <div className="overflow-hidden fixed flex flex-col gap-y-8 justify-center items-center top-0 left-0 bg-gray-600/80 h-screen w-full transition-all delay-75">
+          {navLinks.map((nav) => (
+            <button onClick={() => setShowNav(false)}>
+              <a
+                href={nav.href}
+                className={` tracking-wider text-2xl ${
+                  currentPath === nav.href ? "text-accent" : "text-white"
+                }`}
+              >
+                {nav.name}
+              </a>
+            </button>
+          ))}
+        </div>
+      ) : (
+        <div className="overflow-hidden fixed flex flex-col gap-y-8 justify-center items-center top-0 left-0 bg-gray-600/80 h-0 w-full transition-all delay-75">
+          {navLinks.map((nav) => (
+            <button onClick={() => setShowNav(false)}>
+              <a
+                href={nav.href}
+                className={`tracking-wider text-2xl shadow ${
+                  currentPath === nav.href ? "text-accent" : "text-white"
+                }`}
+              >
+                {nav.name}
+              </a>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/NavLinks.astro b/src/components/NavLinks.astro
@@ -9,7 +9,7 @@ const currentPath = new URL(Astro.url).pathname;
     navLinks.map((link) => (
       <a
         href={link.href}
-        class={`text-sm font-semibold leading-6 hover:text-hover transition-all ${
+        class={`hidden md:block text-sm font-semibold leading-6 hover:text-hover transition-all ${
           currentPath === link.href ? "text-accent" : "text-gray-600"
         }`}
       >

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -1,18 +1,21 @@
 ---
 import NavLinks from "./NavLinks.astro";
+import MobileNav from "./MobileNav.jsx";
 ---
 
 <div
-  class="mx-auto md:max-w-7xl relative z-50 flex md:block justify-center items-center"
+  class="fixed mx-auto w-full bg-indigo-500/40 backdrop-blur md:bg-white flex justify-between md:max-w-7xl md:relative z-50 md:block md:justify-center items-center"
 >
-  <div class="px-6 pt-6 lg:max-w-3xl lg:pl-8 lg:pr-0 block lg:absolute">
+  <div
+    class="px-6 h-36 pt-6 w-full lg:max-w-3xl lg:pl-8 lg:pr-0 block lg:absolute"
+  >
     <nav
-      class="flex flex-col md:flex-row items-center  lg:justify-start"
+      class="flex items-center justify-between lg:justify-start"
       aria-label="Global"
     >
       <a
         href="/"
-        class="-m-1.5 p-1.5"
+        class="-m-1.5 p-0 md:p-1.5 z-50"
       >
         <span class="sr-only">CoderDojo Alba Iulia</span>
         <img
@@ -22,6 +25,7 @@ import NavLinks from "./NavLinks.astro";
         />
       </a>
       <NavLinks />
+      <MobileNav client:idle />
     </nav>
   </div>
 </div>
diff --git a/src/components/Post.astro b/src/components/Post.astro
@@ -9,21 +9,20 @@ const { post } = Astro.props;
 
 <article class="relative isolate flex flex-col gap-8 lg:flex-row">
   <a href={`/blog/${post.slug}`}>
-
-  <div
-    class="relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-square lg:w-64 lg:shrink-0"
-  >
-    <img
-      src={post.data.image}
-      alt=""
-      class="absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover"
-    />
     <div
-      class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"
+      class="relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-square lg:w-64 lg:shrink-0"
     >
+      <img
+        src={post.data.image}
+        alt=""
+        class="absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover"
+      />
+      <div
+        class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"
+      >
+      </div>
     </div>
-  </div>
-</a>
+  </a>
   <div>
     <div class="text-xs">
       <time
@@ -69,4 +68,4 @@ const { post } = Astro.props;
       </div>
     </div>
   </div>
-</article>
+</article>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -4,9 +4,10 @@ import Footer from "../components/Footer.astro";
 
 interface Props {
   title: string;
+  paddingTop: string;
 }
 
-const { title } = Astro.props;
+const { title, paddingTop } = Astro.props;
 ---
 
 <!doctype html>
@@ -54,7 +55,9 @@ const { title } = Astro.props;
   </head>
   <body>
     <Navbar />
-    <slot />
+    <div class={`pt-${paddingTop} md:pt-0`}>
+      <slot />
+    </div>
     <Footer />
   </body>
 </html>

diff --git a/src/layouts/OtherLayout.astro b/src/layouts/OtherLayout.astro
@@ -5,9 +5,10 @@ import Pattern from "../components/Pattern.astro";
 
 interface Props {
   title: string;
+  paddingTop: string;
 }
 
-const { title } = Astro.props;
+const { title, paddingTop } = Astro.props;
 ---
 
 <!doctype html>
@@ -56,7 +57,7 @@ const { title } = Astro.props;
   <body>
     <Navbar />
     <div
-      class="max-w-4xl mx-auto prose bg-white px-6 md:px-0 py-32 pb-16 pt-12 md:pt-48"
+      class={`pt-${paddingTop} pt-48 max-w-4xl mx-auto prose bg-white px-6 md:px-0 py-32 pb-16 md:pt-48 `}
     >
       <slot />
     </div>

diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -4,9 +4,12 @@ import PostsList from "../components/PostsList.astro";
 import Pattern from "../components/Pattern.astro";
 ---
 
-<Layout title="Blog | CoderDojo Alba Iulia">
+<Layout
+  title="Blog | CoderDojo Alba Iulia"
+  paddingTop="28"
+>
   <div class="bg-white py-24 sm:py-32">
-    <div class="relative z-50">
+    <div class="relative">
       <div class="mx-auto max-w-7xl px-6 lg:px-8 -mt-4 md:pt-24">
         <div class="mx-auto max-w-2xl lg:max-w-4xl">
           <h2
@@ -25,6 +28,6 @@ import Pattern from "../components/Pattern.astro";
         </div>
       </div>
     </div>
-    <Pattern/>
+    <Pattern />
   </div>
-</Layout>
+</Layout>
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
@@ -28,10 +28,13 @@ export const getStaticPaths = async () => {
 const { Content } = await post.render();
 ---
 
-<Layout title={post.data.title}>
+<Layout
+  paddingTop="36"
+  title={post.data.title}
+>
   <div class="max-w-7xl mx-auto py-10 md:py-48 px-4 md:px-0">
     <div class="overflow-hidden bg-white">
-      <div class="relative mx-auto max-w-7xl px-6 py-16 lg:px-8">
+      <div class="relative mx-auto max-w-7xl px-6 py-8 md:py-16 lg:px-8">
         <div
           class="absolute bottom-0 left-3/4 top-0 hidden w-screen bg-gray-50 lg:block"
         >

diff --git a/src/pages/confidentialitate.md b/src/pages/confidentialitate.md
@@ -1,6 +1,7 @@
 ---
 layout: ../layouts/OtherLayout.astro
 title: "Politica de confidențialitate a CoderDojo Alba Iulia"
+paddingTop: 56
 permalink: /confidentialitate
 ---
 

diff --git a/src/pages/despre.astro b/src/pages/despre.astro
@@ -4,8 +4,11 @@ import Mentors from "../components/Mentors.astro";
 import Pattern from "../components/Pattern.astro";
 ---
 
-<Layout title="Despre | CoderDojo Alba Iulia">
-  <div class="bg-white px-6 py-32 pb-16 lg:px-8 pt-12 md:pt-48 relative">
+<Layout
+  title="Despre | CoderDojo Alba Iulia"
+  paddingTop="28"
+>
+  <div class="bg-white px-6 lg:px-8 pt-12 md:pt-48 relative">
     <div class="mx-auto max-w-4xl text-base leading-7 text-gray-700">
       <p class="text-base font-semibold leading-7 text-accent">
         Coder Dojo Alba Iulia
@@ -134,6 +137,6 @@ import Pattern from "../components/Pattern.astro";
       </figure>
       <Mentors />
     </div>
-    <Pattern/>
+    <Pattern />
   </div>
 </Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -7,7 +7,10 @@ import BlogSection from "../components/BlogSection.astro";
 import Contact from "../components/Contact.astro";
 ---
 
-<Layout title="CoderDojo Alba Iulia – comunitatea micilor programatori">
+<Layout
+  title="CoderDojo Alba Iulia – comunitatea micilor programatori"
+  paddingTop="0"
+>
   <Hero />
   <About />
   <Sponsors />

diff --git a/src/pages/regulament.md b/src/pages/regulament.md
@@ -1,6 +1,7 @@
 ---
 layout: ../layouts/OtherLayout.astro
 title: "Regulament CoderDojo Alba Iulia"
+paddingTop: 70
 permalink: /regulament
 ---