added header, footer, eslint/prettier, and typedoc

components/TheHeader.vue

@@ -1,44 +1,101 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import LogoSVG from "public/sera-logo-no-text.svg";
+import type { DropDownEntry } from "~/utils/dropDown";
+
+const exploreDropDownEntries: Array<DropDownEntry> = [
+    { text: "Home", link: "/" },
+    { text: "Projects", link: "/projects" },
+    { text: "CanSat", link: "/projects/cansat" },
+    { text: "Edu-Robot", link: "/projects/edu-robot" },
+    { text: "CubeSat Kosen-X", link: "/projects/kosen-x" },
+    { text: "Rocket", link: "/projects/rocket" },
+    { text: "About", link: "/about" },
+];
+
+const mediaDropDownEntries: Array<DropDownEntry> = [
+    { text: "News", link: "/news" },
+    { text: "Gallery", link: "/about/gallery" },
+];
+</script>
 
 <template>
-  <div>
-    <ul>
-      <li>
-        <NuxtLink to="/news">
-          News
-        </NuxtLink>
-      </li>
-      <li>
-        <NuxtLink to="/projects">
-          Projects
-        </NuxtLink>
-      </li>
-      <li>Link</li>
-      <li>Contact</li>
-      <li>
-        <NuxtLink to="/about">
-          About SERA
-        </NuxtLink>
-      </li>
-    </ul>
-    <NuxtLink to="/">
-      <img ref="/sera-logo-no-text.svg">
-    </NuxtLink>
-    <ul>
-      <li>
-        <NuxtLink to="/">For non-member</NuxtLink>
-      </li>
-      <li>
-        <NuxtLink to="/">Info</NuxtLink>
-      </li>
-    </ul>
-  </div>
+    <header>
+        <div class="navigation-menu">
+            <div id="header-left">
+                <DropDown
+                    label="Explore"
+                    :mode="DropDownMode.onClick"
+                    :alignment="DropDownAlignment.Left"
+                    :entries="exploreDropDownEntries"
+                    :show-in-mobile="false"
+                />
+            </div>
+            <div id="logo-link">
+                <NuxtLink to="/">
+                    <LogoSVG role="img" id="logo-img" />
+                </NuxtLink>
+            </div>
+            <div id="header-right">
+                <DropDown
+                    label="Media"
+                    :mode="DropDownMode.onClick"
+                    :alignment="DropDownAlignment.Right"
+                    :entries="mediaDropDownEntries"
+                    :show-in-mobile="false"
+                />
+            </div>
+        </div>
+    </header>
 </template>
 
 <style scoped>
-div {
-  display: grid;
-  grid-row: 1fr;
-  grid-template-columns: 1fr 1fr 1fr;
+.navigation-menu {
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
+    line-height: 1.8;
+    padding: 1.25rem 3rem;
+    height: 64px;
+    background: var(--deep-space);
+}
+
+#header-left,
+#header-right {
+    display: flex;
+}
+
+#header-left {
+    flex-direction: row;
+}
+
+#header-right {
+    flex-direction: row-reverse;
+    & ul {
+        list-style: none;
+        display: flex;
+        justify-items: space-between;
+    }
+}
+
+#logo-link {
+    display: flex;
+    justify-content: center;
+    & a {
+        width: fit-content;
+        background: var(--moonlight);
+        padding: 0.5rem;
+        margin-top: -0.5rem;
+        border-radius: 3rem;
+        filter: drop-shadow(0 0 0.5rem var(--moonlight));
+    }
+    & a:hover {
+        transform: scale(110%);
+        transition: 0.2s ease-in;
+    }
+}
+
+#logo-img {
+    width: 128px;
+    height: auto;
 }
 </style>