Merge pull request #6 from tuatmcc/feat/navigation

navigation ui

src/components/Navigation/Navigation.astro

@@ -0,0 +1,49 @@
+---
+import { NavigationContainer } from "./NavigationContainer.tsx";
+
+const links = [
+	{ href: "/", label: "Home" },
+	{ href: "/about", label: "About" },
+	{ href: "/achievements", label: "Achievements" },
+	{ href: "/blog", label: "Blog" },
+];
+---
+
+<NavigationContainer client:only="react">
+  <div class="w-full p-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>
+      ))} 
+    </ul>
+  </div>
+</NavigationContainer>
+
+<style>
+
+.link-item {
+  &::after {
+    position: absolute;
+    content: "";
+    display: block;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    bottom: 0;
+    height: 2px;
+    background: white;
+    transition: all 0.2s;
+    transform: translateX(-50%);
+    opacity: 0;
+  }
+
+  &:hover {
+    &::after {
+      width: 100%;
+      opacity: 1;
+    }
+  }
+}
+</style>

src/components/Navigation/NavigationContainer.tsx

@@ -0,0 +1,113 @@
+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"
+				>
+					<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"
+				>
+					<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"
+						/>
+					</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"
+							>
+								<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>
+			</nav>
+		</header>
+	);
+};

src/pages/about.astro

@@ -1,4 +1,5 @@
 ---
+import Navigation from "../components/Navigation/Navigation.astro";
 import Layout from "../layouts/Layout.astro";
 ---
 
@@ -15,5 +16,7 @@ import Layout from "../layouts/Layout.astro";
     type: 'article'
   }}
 >
+  <Navigation>
   <h1>hello</h1>
+  </Navigation>
 </Layout>

src/pages/index.astro

@@ -1,9 +1,12 @@
 ---
-import Navigation from "../components/Navigation/Navigation";
+import Navigation from "../components/Navigation/Navigation.astro";
 import Layout from "../layouts/Layout.astro";
 ---
 
 <Layout title="MCC" path="" og={{enabled: true}} pagefind={false}>
-  <Navigation client:only="react" />
+  <Navigation />
+  <button>Click me</button>
   <slot />
 </Layout>
+<style>
+</style>

tailwind.config.mjs

@@ -8,5 +8,10 @@ export default {
 			orbitron: ["Orbitron", "sans-serif"],
 		},
 	},
-	plugins: [],
+	plugins: [
+		({ addVariant }) => {
+			addVariant("child", "& > *");
+			addVariant("child-hover", "& > *:hover");
+		},
+	],
 };