Further reworked appbar

Naapperas · Dec 21, 2023 · 2504da5 · 2504da5
1 parent b31b2f6
commit 2504da5
Show file tree

Hide file tree

Showing 12 changed files with 161 additions and 107 deletions.
diff --git a/src/components/AppBar/Mobile.astro b/src/components/AppBar/Mobile.astro
@@ -0,0 +1,48 @@
+---
+import Close from "../Icons/Close.astro";
+import Github from "../Icons/Github.astro";
+import Hamburger from "../Icons/Hamburger.astro";
+import Home from "../Icons/Home.astro";
+
+import NavLink from "./Nav/Link.astro";
+
+import { type Page } from "./Nav/Link.astro";
+
+interface Props {
+    pages: Page[];
+    customClasses?: string;
+}
+
+const { pages, customClasses } = Astro.props;
+---
+
+<header
+    class="flex flex-row p-5 justify-between text-2xl"
+    class:list={customClasses}
+>
+    <a href="/">
+        <Home />
+    </a>
+    <nav class="flex gap-3">
+        <label id="nav-menu-mobile" class="block md:hidden relative">
+            <input
+                type="checkbox"
+                name="hamburger-input"
+                id="hamburger-input"
+                class="peer hidden"
+            />
+
+            <!-- Do this thios way so that we can correctly use the sibling selector -->
+            <div class="items-center hidden peer-checked:inline-flex">
+                <Close />
+            </div>
+            <div class="inline-flex items-center peer-checked:hidden">
+                <Hamburger />
+            </div>
+        </label>
+
+        <a href="https://github.com/Naapperas">
+            <Github />
+        </a>
+    </nav>
+</header>
diff --git a/src/components/AppBar/Nav/Link.astro b/src/components/AppBar/Nav/Link.astro
@@ -0,0 +1,50 @@
+---
+import Icon from "../../Icons/Icon.astro";
+
+export type Page = {
+    name: string;
+    url: string;
+    icon?: {
+        pack: string;
+        name: string;
+        enabled: boolean;
+    };
+};
+
+export const backgroundColorForPageLink = (
+    url: URL,
+    page: Page,
+): Record<string, boolean> => ({
+    "bg-color-4": url.pathname.includes(page.url),
+    "text-color-1": url.pathname.includes(page.url),
+});
+
+export const hasIcon = (
+    page: Page,
+): page is Omit<Page, "icon"> & { icon: NonNullable<Page["icon"]> } => {
+    return page.icon !== undefined && page.icon.enabled;
+};
+
+interface Props {
+    page: Page;
+}
+
+const { page } = Astro.props;
+---
+
+<li
+    class:list={[
+        "h-full flex flex-col justify-center p-1",
+        { ...backgroundColorForPageLink(Astro.url, page) },
+    ]}
+>
+    <a title={page.name} href={page.url}>
+        {
+            hasIcon(page) ? (
+                <Icon pack={page.icon.pack} name={page.icon.name} />
+            ) : (
+                page.name
+            )
+        }
+    </a>
+</li>
diff --git a/src/components/AppBar/PC.astro b/src/components/AppBar/PC.astro
@@ -0,0 +1,32 @@
+---
+import Github from "../Icons/Github.astro";
+import Home from "../Icons/Home.astro";
+
+import NavLink from "./Nav/Link.astro";
+
+import { type Page } from "./Nav/Link.astro";
+
+interface Props {
+    pages: Page[];
+    customClasses?: string;
+}
+
+const { pages, customClasses } = Astro.props;
+---
+
+<header
+    class="flex flex-row p-5 justify-between text-2xl"
+    class:list={customClasses}
+>
+    <a href="/">
+        <Home />
+    </a>
+    <nav class="w-max">
+        <ul class="flex gap-4 h-full">
+            {pages.map((page) => <NavLink page={page} />)}
+        </ul>
+    </nav>
+    <a href="https://github.com/Naapperas">
+        <Github />
+    </a>
+</header>
diff --git a/src/components/AppBar/index.astro b/src/components/AppBar/index.astro
@@ -1,20 +1,8 @@
 ---
-import Icon from "../Icons/Icon.astro";
-import Github from "../Icons/Github.astro";
-import Hamburger from "../Icons/Hamburger.astro";
-import Close from "../Icons/Close.astro";
+import Mobile from "./Mobile.astro";
+import { type Page } from "./Nav/Link.astro";
 
-type Icon = {
-  pack: string;
-  name: string;
-  enabled: boolean;
-};
-
-type Page = {
-  name: string;
-  url: string;
-  icon?: Icon;
-};
+import PC from "./PC.astro";
 
 const pages: Page[] = [
   {
@@ -45,83 +33,7 @@ const pages: Page[] = [
     },
   },
 ];
-
-const backgroundColorForPageLink = (page: Page): Record<string, boolean> => ({
-  "bg-color-4": Astro.url.pathname.includes(page.url),
-  "text-color-1": Astro.url.pathname.includes(page.url),
-});
-
-const hasIcon = (
-  page: Page,
-): page is Omit<Page, "icon"> & { icon: NonNullable<Page["icon"]> } => {
-  return page.icon !== undefined && page.icon.enabled;
-};
 ---
 
-<script lang="ts">
-  const hamburgerToggle = document.querySelector("[hamburger-toggle]");
-
-  console.log(hamburgerToggle);
-
-  hamburgerToggle?.addEventListener("click", () => {
-    toggleHamburger();
-  });
-
-  const toggleHamburger = () => {
-    console.log("toggle");
-    hamburgerToggle.classList.toggle("hidden");
-    hamburgerToggle.classList.toggle("inline-flex");
-  };
-</script>
-
-<header class="flex flex-row p-5 justify-between text-2xl">
-  <a href="/">
-    <Icon pack="ic" name="round-home" />
-  </a>
-  <nav class="w-max flex-row hidden md:flex">
-    <ul class="flex gap-4 h-full">
-      {
-        pages.map((page) => (
-          <li
-            class:list={[
-              "h-full flex flex-col justify-center p-1",
-              { ...backgroundColorForPageLink(page) },
-            ]}
-          >
-            <a title={page.name} href={page.url}>
-              {hasIcon(page) ? (
-                <Icon pack={page.icon.pack} name={page.icon.name} />
-              ) : (
-                page.name
-              )}
-            </a>
-          </li>
-        ))
-      }
-    </ul>
-  </nav>
-  <nav class="flex gap-3">
-    <label class="block md:hidden" hamburger-toggle>
-      <input
-        type="checkbox"
-        name="hamburger-input"
-        id="hamburger-input"
-        class="peer hidden"
-      />
-
-      <!-- Do this thios way so that we can correctlyu use the sibling selector -->
-      <div class="items-center hidden peer-checked:inline-flex">
-        <Close />
-      </div>
-      <div class="inline-flex items-center peer-checked:hidden">
-        <Hamburger />
-      </div>
-    </label>
-
-    <div class="hidden">Boas</div>
-
-    <a href="https://github.com/Naapperas">
-      <Github />
-    </a>
-  </nav>
-</header>
+<PC pages={pages} customClasses="hidden md:flex" />
+<Mobile pages={pages} customClasses="flex md:hidden" />
diff --git a/src/components/Icons/Close.astro b/src/components/Icons/Close.astro
@@ -6,4 +6,4 @@ type Props = Pick<IconProps, "iconClasses">;
 const { iconClasses } = Astro.props;
 ---
 
-<Icon pack="mdi" name="close" iconClasses={iconClasses} />
+<Icon pack="mdi" name="close" iconClasses={iconClasses} title="Close" />
diff --git a/src/components/Icons/Github.astro b/src/components/Icons/Github.astro
@@ -1,9 +1,9 @@
 ---
-import Icon, {type Props as IconProps} from "./Icon.astro";
+import Icon, { type Props as IconProps } from "./Icon.astro";
 
-type Props = Pick<IconProps, "iconClasses" >;
+type Props = Pick<IconProps, "iconClasses">;
 
-const {iconClasses} = Astro.props;
+const { iconClasses } = Astro.props;
 ---
 
-<Icon pack="mdi" name="github" iconClasses={iconClasses}/>
+<Icon pack="mdi" name="github" iconClasses={iconClasses} title="Github" />
diff --git a/src/components/Icons/Hamburger.astro b/src/components/Icons/Hamburger.astro
@@ -6,4 +6,4 @@ type Props = Pick<IconProps, "iconClasses">;
 const { iconClasses } = Astro.props;
 ---
 
-<Icon pack="mdi" name="hamburger-menu" iconClasses={iconClasses} />
+<Icon pack="mdi" name="hamburger-menu" iconClasses={iconClasses} title="Menu" />
diff --git a/src/components/Icons/Home.astro b/src/components/Icons/Home.astro
@@ -0,0 +1,9 @@
+---
+import Icon, { type Props as IconProps } from "./Icon.astro";
+
+type Props = Pick<IconProps, "iconClasses">;
+
+const { iconClasses } = Astro.props;
+---
+
+<Icon pack="ic" name="round-home" iconClasses={iconClasses} title="Menu" />
diff --git a/src/components/Icons/Icon.astro b/src/components/Icons/Icon.astro
@@ -4,16 +4,15 @@ import { Icon as AstroIcon } from "astro-icon";
 export type Props = {
   pack: string;
   name: string;
+  title?: string;
   iconClasses?: string[];
 };
 
-const { pack, name, iconClasses } = Astro.props;
+const { pack, name, iconClasses, title } = Astro.props;
 
-const classes = ["w-10"]
-
-if (iconClasses !== undefined)
-  classes.push(...iconClasses)
+const classes = ["w-10"];
 
+if (iconClasses !== undefined) classes.push(...iconClasses);
 ---
 
-<AstroIcon class={classes.join(" ")} pack={pack} name={name} />
+<AstroIcon title={title} class={classes.join(" ")} pack={pack} name={name} />
diff --git a/src/components/Icons/Laravel.astro b/src/components/Icons/Laravel.astro
@@ -6,4 +6,4 @@ type Props = Pick<IconProps, "iconClasses">;
 const { iconClasses } = Astro.props;
 ---
 
-<Icon pack="mdi" name="laravel" iconClasses={iconClasses} />```
+<Icon pack="mdi" name="laravel" iconClasses={iconClasses} title="Laravel"/>```
diff --git a/src/components/Icons/index.astro b/src/components/Icons/index.astro
@@ -2,10 +2,14 @@
 import Github from "./Github.astro";
 import Laravel from "./Laravel.astro";
 import type { Props as IconProps } from "./Icon.astro";
+import Close from "./Close.astro";
+import Hamburger from "./Hamburger.astro";
 
 const icons = {
   github: Github,
   laravel: Laravel,
+  close: Close,
+  menu: Hamburger,
 };
 
 type Props = {

diff --git a/src/components/Page/Home/Introduction.astro b/src/components/Page/Home/Introduction.astro
@@ -8,7 +8,7 @@ import banner from "./me.jpg";
     <Image
         src={banner}
         alt="Home Page Banner"
-        class="rounded-2xl self-center max-md:w-1/2 md:max-w-none md:w-3/5"
+        class="rounded-2xl self-center max-md:w-3/4 md:max-w-none md:w-3/5"
     />
     <div class="border border-color-4 opacity-25 hidden md:inline-block flex-1">
     </div>