Started reworking navbar

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

Hide file tree

Showing 4 changed files with 81 additions and 77 deletions.
diff --git a/src/components/AppBar/index.astro b/src/components/AppBar/index.astro
@@ -1,6 +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";
 
 type Icon = {
   pack: string;
@@ -56,84 +58,70 @@ const hasIcon = (
 };
 ---
 
+<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 flex-row">
-    <div id="pc" class="hidden md:block">
-      <ul class="flex md:gap-4 h-full">
-        {
-          pages.map((page) => (
-            <li
-              class:list={[
-                "h-full flex flex-col justify-center",
-                {
-                  ...(hasIcon(page)
-                    ? {
-                        /* no custom styles */
-                      }
-                    : {
-                        /* add custom styles here */
-                        ...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>
-    </div>
-    <input
-      type="checkbox"
-      name="mobile_hamburger"
-      id="mobile_hamburger"
-      class="peer/mobile_hamburger hidden"
-    />
-    <label for="mobile_hamburger" class="md:hidden">
-      <Icon pack="mdi" name="hamburger-menu" />
+  <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>
-    <a href="https://github.com/Naapperas" class="pl-5">
+
+    <div class="hidden">Boas</div>
+
+    <a href="https://github.com/Naapperas">
       <Github />
     </a>
-    <div id="mobile" class="hidden peer-checked/mobile_hamburger:hidden">
-      <!-- TODO: change this last one to flex once we found a way -->
-      <ul class="flex flex-col md:hidden md:gap-4">
-        {
-          pages.map((page) => (
-            <li
-              class:list={[
-                "txt-center",
-                {
-                  ...(hasIcon(page)
-                    ? {
-                        /* no custom styles */
-                      }
-                    : {
-                        /* add custom styles here */
-                        ...backgroundColorForPageLink(page),
-                      }),
-                },
-              ]}
-            >
-              <a title={page.name} href={page.url}>
-                {hasIcon(page) ? (
-                  <Icon pack={page.icon.pack} name={page.icon.name} />
-                ) : null}
-                {page.name}
-              </a>
-            </li>
-          ))
-        }
-      </ul>
-    </div>
   </nav>
 </header>
diff --git a/src/components/Icons/Close.astro b/src/components/Icons/Close.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="mdi" name="close" iconClasses={iconClasses} />
diff --git a/src/components/Icons/Hamburger.astro b/src/components/Icons/Hamburger.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="mdi" name="hamburger-menu" iconClasses={iconClasses} />
diff --git a/src/components/Page/Home/Introduction.astro b/src/components/Page/Home/Introduction.astro
@@ -2,15 +2,13 @@
 import { Image } from "astro:assets";
 
 import banner from "./me.jpg";
-
-const size = 300;
 ---
 
 <header class="flex flex-col md:flex-row gap-10 md:mt-40 w-4/5 md:w-3/5">
     <Image
         src={banner}
         alt="Home Page Banner"
-        class="rounded-2xl self-center"
+        class="rounded-2xl self-center max-md:w-1/2 md:max-w-none md:w-3/5"
     />
     <div class="border border-color-4 opacity-25 hidden md:inline-block flex-1">
     </div>
@@ -19,11 +17,11 @@ const size = 300;
             Hi, I'm <span class="text-color-5">Nuno</span>.
         </h1>
         <p class="text-color-4">
-            I'm a Software Engineering Masters student @ <a
+            I'm an Informatics and Computing Engineering Masters student @ <a
                 href="https://sigarra.up.pt/feup/pt/web_page.inicial"
                 target="_blank"
                 class="underline">FEUP</a
-            > in Oporto, Portugal.
+            > in Porto, Portugal.
         </p>
         <p class="text-color-4 text-wrap">
             I'm a passionate learner and a curious person. I love to wrap my