Merge pull request #6 from VincentGonnet/dev

Site : base navigation
VincentGonnet · Oct 5, 2023 · 31d4faa · 31d4faa
2 parents 8aa41ea + 68b22a7
commit 31d4faa
Show file tree

Hide file tree

Showing 13 changed files with 185 additions and 101 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,14 @@
+{
+	"tabWidth": 4,
+	"useTabs": true,
+	"plugins": ["prettier-plugin-astro"],
+	"overrides": [
+		{
+			"files": "*.astro",
+			"options": {
+				"parser": "astro",
+				"bracketSameLine": true
+			}
+		}
+	]
+}
diff --git a/package.json b/package.json
@@ -12,7 +12,5 @@
     "tailwindcss": "^3.0.24",
     "astro": "^3.1.4"
   },
-  "devDependencies": {
-
-  }
+  "devDependencies": { "prettier": "^3.0.3", "prettier-plugin-astro": "^0.12.0" }
 }
diff --git a/src/components/Card.astro b/src/components/Card.astro
diff --git a/src/components/Hamburger.astro b/src/components/Hamburger.astro
@@ -0,0 +1,29 @@
+---
+import Sidebar from "./Sidebar.astro";
+---
+
+<div class="hamburger self-center m-4 lg:hidden">
+	<span class="hamburger-line"></span>
+	<span class="hamburger-line"></span>
+	<span class="hamburger-line"></span>
+</div>
+
+<Sidebar />
+
+<style>
+	@tailwind base;
+	@tailwind components;
+	@tailwind utilities;
+
+	@layer components {
+		.hamburger {
+			@apply cursor-pointer;
+		}
+
+		.hamburger-line {
+			@apply block w-8 h-[3px] my-[7px] bg-[var(--color-text)];
+		}
+	}
+</style>
+
+<script src="../scripts/nav-menu.ts"></script>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,11 +1,32 @@
 ---
-
+import Hamburger from "./Hamburger.astro";
+import Navbar from "./Navbar.astro";
 ---
-<header class="flex w-full">
-    <div>
-        <a href="/">
-            <img width="48" height="48" src="https://img.icons8.com/fluency-systems-regular/48/language.png" alt="language"/>
-        </a>
-    </div>
 
+<header class="flex w-full h-20 overflow-hidden">
+	<a href="/" class="self-center flex items-center lg:flex-start">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="currentColor"
+			class="w-8 h-8 m-2 lg:m-5">
+			<path
+				d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z"
+			></path>
+			<path
+				d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z"
+			></path>
+		</svg>
+	</a>
+
+	<spacer class="flex-auto lg:hidden"></spacer>
+
+	<a href="/" class="self-center flex items-center lg:justify-center">
+		<p class="font-extrabold text-xl md:text-[1.5rem]">Vincent Gonnet</p>
+	</a>
+
+	<spacer class="flex-auto"></spacer>
+
+	<Navbar />
+	<Hamburger />
 </header>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -0,0 +1,17 @@
+---
+
+---
+
+<nav class="hidden lg:flex items-center">
+	<ul class="list-none text-[var(--color-text)]">
+		<li class="inline m-4 text-lg hover:underline">
+			<a href="/timeline">Timeline</a>
+		</li>
+		<li class="inline m-4 text-lg hover:underline">
+			<a href="/projects">Projects</a>
+		</li>
+		<li class="inline m-4 text-lg hover:underline">
+			<a href="/contact">Contact</a>
+		</li>
+	</ul>
+</nav>
diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
@@ -0,0 +1,11 @@
+---
+
+---
+
+<aside
+	class="nav-menu fixed top-0 right-0 z-10 w-80 h-screen shadow-2xl transition-transform translate-x-80 bg-[#121D2F] lg:hidden flex flex-col items-center">
+	<hr class="h-12" />
+	<a class="m-2 text-lg" href="/timeline">Timeline</a>
+	<a class="m-2 text-lg" href="/projects">Projects</a>
+	<a class="m-2 text-lg" href="/contact">Contact</a>
+</aside>
diff --git a/src/layouts/GlobalLayout.astro b/src/layouts/GlobalLayout.astro
@@ -1,40 +1,49 @@
 ---
 import Header from "../components/Header.astro";
+import { ViewTransitions } from "astro:transitions";
 
 interface Props {
-    title: string;
+	title: string;
 }
 const { title } = Astro.props;
 ---
 
 <!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="description" content="Astro description" />
-        <meta name="viewport" content="width=device-width" />
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-        <meta name="generator" content={Astro.generator} />
-        <title>{title}</title>
-    </head>
-    <body>
-        <Header />
-        <slot />
-    </body>
-</html>
-<style is:global>
-    :root {
-        --color-primary: #38bdf8;
-    }
+<html lang="en" class="flex justify-center max-w-full min-w-full">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="description" content="Astro description" />
+		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+		<ViewTransitions />
+	</head>
+	<body
+		class="max-w-full min-w-full min-h-screen lg:max-w-5xl lg:min-w-[1024px] overflow-x-hidden">
+		<Header transition:persist />
+		<main class="p-5">
+			<slot />
+		</main>
+		<style is:global>
+			:root {
+				/* Color constants */
+				--color-primary: #38bdf8;
+				--color-text: #ccccb5;
+			}
 
-    html {
-        margin: 0px;
-        box-sizing: border-box;
-        background-color: #1e293b;
-    }
+			html {
+				margin: 0px;
+				box-sizing: border-box;
+				background-color: #1e293b;
+				color: var(--color-text);
+			}
 
-    body {
-        min-width: 100vw;
-        min-height: 100vh;
-    }
-</style>
+			h1 {
+				font-size: 2rem;
+				font-weight: 700;
+				margin: 0px;
+			}
+		</style>
+	</body>
+</html>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
@@ -0,0 +1,8 @@
+---
+import GlobalLayout from "../layouts/GlobalLayout.astro";
+---
+
+<GlobalLayout title="Vincent Gonnet - Contact">
+	<h1>Contact</h1>
+	<p>Coming soon...</p>
+</GlobalLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -2,4 +2,7 @@
 import GlobalLayout from "../layouts/GlobalLayout.astro";
 ---
 
-<GlobalLayout title="Vincent Gonnet - Home" />
+<GlobalLayout title="Vincent Gonnet - Home">
+	<h1>Home</h1>
+	<p>Coming soon...</p>
+</GlobalLayout>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
@@ -0,0 +1,8 @@
+---
+import GlobalLayout from "../layouts/GlobalLayout.astro";
+---
+
+<GlobalLayout title="Vincent Gonnet - Projects">
+	<h1>Projects</h1>
+	<p>Coming soon...</p>
+</GlobalLayout>
diff --git a/src/pages/timeline.astro b/src/pages/timeline.astro
@@ -0,0 +1,8 @@
+---
+import GlobalLayout from "../layouts/GlobalLayout.astro";
+---
+
+<GlobalLayout title="Vincent Gonnet - Timeline">
+	<h1>Timeline</h1>
+	<p>Coming soon...</p>
+</GlobalLayout>
diff --git a/src/scripts/nav-menu.ts b/src/scripts/nav-menu.ts
@@ -0,0 +1,19 @@
+function sideBar() {
+	document.querySelector(".hamburger").addEventListener("click", () => {
+		document.querySelector(".nav-menu").classList.toggle("translate-x-80");
+	});
+
+	window.onclick = (event) => {
+		if (
+			(!(event.target as HTMLElement).matches(".hamburger") &&
+				!(event.target as HTMLElement).matches(".hamburger span") &&
+				!(event.target as HTMLElement).matches(".nav-menu") &&
+				!(event.target as HTMLElement).matches(".nav-menu a")) ||
+			(event.target as HTMLElement).matches(".opacity-0")
+		) {
+			document.querySelector(".nav-menu").classList.add("translate-x-80");
+		}
+	};
+}
+
+document.addEventListener("astro:page-load", sideBar);