Skip to content

Commit

Permalink
Merge pull request #7 from tuatmcc/feat/navigation
Browse files Browse the repository at this point in the history 
fix navigation
  • Loading branch information
@OJII3
OJII3 authored Aug 13, 2024
2 parents 8f1c95c + aaa1af5 commit ddd5ac0
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 105 deletions.
6 changes: 3 additions & 3 deletions src/components/Navigation/Navigation.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ const links = [
---

<NavigationContainer client:only="react">
<div class="w-full p-8 pt-24">
<div class="w-full pl-8 pt-24">
<ul class="flex flex-col gap-8">
{links.map((link) => (
<li class="link-item relative flex text-white text-2xl font-orbitron tracking-wider p-2">
<a href={link.href} class=" flex w-full">{link.label}</a>
<li class="link-item relative flex overflow-hidden text-white text-2xl font-orbitron tracking-wider">
<a href={link.href} class=" flex w-full p-2">{link.label}</a>
</li>
))}
</ul>
Expand Down
210 changes: 109 additions & 101 deletions src/components/Navigation/NavigationContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,111 +3,119 @@ import { type ReactNode, useState } from "react";
export const NavigationContainer = ({ children }: { children: ReactNode }) => {
const [active, setActive] = useState(false);
return (
<header>
<button
type="button"
className="fixed top-0 right-0 p-2"
aria-label="Menu Button"
onClick={() => setActive((prev) => !prev)}
>
<svg
className=""
width="40"
height="40"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
<>
<div
className="fixed top-0 left-0 w-full h-full bg-blue-100 bg-opacity-50 z-[-10] transition-opacity"
style={{ opacity: active ? 1 : 0 }}
onClick={() => setActive(false)}
onKeyDown={(e) => e.key === "Escape" && setActive(false)}
/>
<header>
<button
type="button"
className="fixed top-0 right-0 p-2"
aria-label="Menu Button"
onClick={() => setActive((prev) => !prev)}
>
<title>Menu</title>
<path
d="M4 6L20 6"
stroke="black"
stroke-width="2"
stroke-linecap="round"
className="horizon1"
/>
<path
d="M4 12L20 12"
stroke="black"
stroke-width="2"
stroke-linecap="round"
className="horizon2"
/>
<path
d="M4 18L20 18"
stroke="black"
stroke-width="2"
stroke-linecap="round"
className="horizon3"
/>
</svg>
</button>
<nav
className={`fixed pl-16 grid top-0 bottom-0 right-0 w-[500px] max-w-[80vw] transition-transform ${active ? "translate-x-0" : "translate-x-full"}`}
>
<svg
className="text-gray-500 absolute top-0 left-0 z-[-1]"
height="100%"
viewBox="0 0 160 80"
fill="none"
xmlns="http://www.w3.org/2000/svg"
<svg
className=""
width="40"
height="40"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Menu</title>
<path
d="M4 6L20 6"
stroke="black"
stroke-width="2"
stroke-linecap="round"
className="horizon1"
/>
<path
d="M4 12L20 12"
stroke="black"
stroke-width="2"
stroke-linecap="round"
className="horizon2"
/>
<path
d="M4 18L20 18"
stroke="black"
stroke-width="2"
stroke-linecap="round"
className="horizon3"
/>
</svg>
</button>
<nav
className={`fixed pl-16 grid top-0 bottom-0 right-0 w-[500px] max-w-[95vw] transition-transform ${active ? "translate-x-0" : "translate-x-full"}`}
>
<title>Deco</title>
<polygon
points="0 0 0 10 5 15 5 65 0 70 0 80 160 80 160 0"
fill="currentColor"
/>
</svg>
<div className="relative flex flex-col items-end bg-gray-500 p-2">
<div className="bottom-0 absolute h-full">
<img
src="/logo/logo-vertical.svg"
alt="Logo"
className="opacity-40 py-4 pt-16 h-full"
<svg
className="text-gray-500 absolute top-0 left-0 z-[-1]"
height="100%"
viewBox="0 0 160 80"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Deco</title>
<polygon
points="0 0 0 10 5 15 5 65 0 70 0 80 160 80 160 0"
fill="currentColor"
/>
</div>
<div className="relative w-full flex justify-end items-center">
<button
type="button"
aria-label="Menu Button"
onClick={() => setActive((prev) => !prev)}
>
<svg
className=""
width="40"
height="40"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
</svg>
<div className="relative flex flex-col bg-gray-500 p-2">
<div className="bottom-0 right-0 absolute h-full">
<img
src="/logo/logo-vertical.svg"
alt="Logo"
className="opacity-40 py-4 pt-16 h-full"
/>
</div>
<div className="relative w-full flex justify-end items-center">
<button
type="button"
aria-label="Menu Button"
onClick={() => setActive((prev) => !prev)}
>
<title>Menu</title>
<path
d="M4 6L20 6"
stroke="white"
stroke-width="2"
stroke-linecap="round"
className="horizon1"
/>
<path
d="M4 12L20 12"
stroke="white"
stroke-width="2"
stroke-linecap="round"
className="horizon2"
/>
<path
d="M4 18L20 18"
stroke="white"
stroke-width="2"
stroke-linecap="round"
className="horizon3"
/>
</svg>
</button>
<svg
className=""
width="40"
height="40"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Menu</title>
<path
d="M4 6L20 6"
stroke="white"
stroke-width="2"
stroke-linecap="round"
className="horizon1"
/>
<path
d="M4 12L20 12"
stroke="white"
stroke-width="2"
stroke-linecap="round"
className="horizon2"
/>
<path
d="M4 18L20 18"
stroke="white"
stroke-width="2"
stroke-linecap="round"
className="horizon3"
/>
</svg>
</button>
</div>
{children}
</div>
{children}
</div>
</nav>
</header>
</nav>
</header>
</>
);
};
1 change: 0 additions & 1 deletion src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import Layout from "../layouts/Layout.astro";

<Layout title="MCC" path="" og={{enabled: true}} pagefind={false}>
<Navigation />
<button>Click me</button>
<slot />
</Layout>
<style>
Expand Down

0 comments on commit ddd5ac0

Please sign in to comment.