Add header component

2023-04-07 01:44:26 +02:00 · 2023-04-07 01:44:26 +02:00 · 02ecaddd25
parent b9c68eae7c
commit 02ecaddd25
3 changed files with 114 additions and 3 deletions
--- a/public/splash.js
+++ b/public/splash.js
@ -0,0 +1,45 @@
+const a = [
+  "Playtime's over, playtime's now",
+  "永遠のオデッセイ",
+  "0% code coverage",
+  "Type Driven Development",
+  "Free as in Freedom",
+  "Transmitting since 2021",
+  "Approaching the speed of light",
+  "Your Ad Here",
+  "Here be dragons",
+  "Kam was here",
+  "Ayayaya~",
+  "Haskell is nice 😳",
+  "Coding my life away",
+  "Powered by neural networks",
+  "Volle Kraft voraus!",
+  "In a quantum superposition",
+  "IPA: [ka̠mo̞ɕi]",
+  "遥か彼方を巡り廻る",
+  "Disunified Field Theory of Magic",
+  "Sp³ hybridized",
+  "Lorem ipsum dolor sit amet",
+  "Beautifully Imperfect and Hazy",
+  "Destination unknown",
+  "Now on Google's 3rd page 🎉",
+  "A product of boredom",
+  "Rotating multiaxially in R⁵",
+  "Scientifically unproven",
+  "Lost in translation",
+  "Implemented in prolog and YAML",
+  "Computer-aided diary thing",
+  "Integration under the moon",
+  "Spinning in retrograde",
+  "Steady as she goes",
+  "Слава України!",
+  "1 year anniversary",
+  "Because Twitter is passé",
+  "{{ navbar.subtitle.text }}",
+  "You're looking at it!",
+  "a2Ftb3NoaS5vcmc=",
+  ":: (Thought a) => a -> String",
+];
+a.push(`${Math.round(1 / a.length * 10000)/100}% chance for this message`);
+const target = document.getElementById("p-nav-splash");
+target && (target.innerText = a[Math.floor(Math.random() * a.length)]);
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@ -1,6 +1,7 @@
 ---
 import '../styles/styles.scss';
 import Footer from './base/Footer.astro';
+import Header from './base/Header.astro';
 ---
 <html lang="en">
 	<head>
@ -11,8 +12,7 @@ import Footer from './base/Footer.astro';
 		<title>Astro</title>
 	</head>
 	<body>
-		<h1>My Astro Site</h1>
+		<Header />
+    <Footer />
 	</body>
-
-  <Footer />
 </html>
--- a/src/layouts/base/Header.astro
+++ b/src/layouts/base/Header.astro
@ -1,3 +1,69 @@
 ---
+interface MenuItem {
+  identifier: string;
+  name: string;
+  url: string;
+}

+const menu: MenuItem[] = [
+  {
+    identifier: 'projects',
+    name: 'Projects',
+    url: '/projects/',
+  },
+  {
+    identifier: 'posts',
+    name: 'Posts',
+    url: '/posts/',
+  },
+  {
+    identifier: 'slides',
+    name: 'Slides',
+    url: '/slides/',
+  },
+  {
+    identifier: 'aoc',
+    name: 'AoC',
+    url: '/aoc/',
+  },
+  {
+    identifier: 'map',
+    name: 'Map',
+    url: '/map/',
+  },
+  {
+    identifier: 'about',
+    name: 'About',
+    url: '/about/',
+  }
+]
 ---
+<nav class="p-nav">
+  <input id="p-nav-toggle" type="checkbox" hidden>
+
+  <div class="p-nav__bar">
+    <a href="/" class="p-nav__logo">
+      <img height="48px" width="51px" src="/static/svg/aya.svg" alt="">
+      <div class="p-nav__logo-text">
+        <div class="p-nav__logo-main">Kamoshi.org</div>
+        <div class="p-nav__logo-sub" id="p-nav-splash">
+          Doesn't require JavaScript!
+        </div>
+      </div>
+    </a>
+
+    <label class="p-nav__burger" for="p-nav-toggle" tabindex="0">
+      <span class="p-nav__burger-icon"></span>
+    </label>
+  </div>
+
+  <menu class="p-nav__menu">
+    {menu.map(item => (
+      <li class="p-nav__menu-item">
+        <a class="p-nav__menu-link" href={item.url}>
+          {item.name}
+        </a>
+      </li>
+    ))}
+  </menu>
+</nav>