From 9b089541aaa21a9b88ebe15003eb3186d8ac750b Mon Sep 17 00:00:00 2001
From: Jacob Hilker <jacob.hilker2@gmail.com>
Date: Tue, 12 Mar 2024 14:24:57 -0400
Subject: [PATCH] added icons

---
 src/components/Header.astro          | 14 +++++++++++++-
 src/components/MobileSidebar.astro   |  5 +++++
 src/components/Pagination.astro      |  3 +++
 src/components/blog/PostHeader.astro |  6 +++++-
 src/layouts/BaseLayout.astro         |  4 ++--
 5 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index b2a00ac..b2ed22d 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -61,13 +61,25 @@ const currentPath = pathname.slice(1); // remove the first "/"
         class="h-full p-3 duration-75 hover:backdrop-brightness-75 inline-flex place-items-center dark:hover:backdrop-brightness-125"
         aria-label="Toggle Dark Mode"
         @click="darkMode = !darkMode">
-        
+        <Icon
+          name="heroicons:sun-solid"
+          class="text-branding-white hidden dark:inline-block w-5 h-5"
+        />
+        <Icon
+          name="heroicons:moon-solid"
+          class="text-branding-black dark:hidden inline-block w-5 h-5"
+        />
       </button>
       <button
         type="button"
         aria-label="Toggle mobile menu"
         class="h-full p-3 hover:backdrop-brightness-75 dark:hover:backdrop-brightness-125 duration-150 lg:hidden text-branding-black dark:text-branding-white"
         x-on:click="mobileOpen = !mobileOpen">
+        <Icon
+          name="heroicons:bars-3-20-solid"
+          class="w-5 h-5 transition duration-150 text-branding-black dark:text-branding-white"
+          :class="{'rotate-90': mobileOpen === true}"
+        />
       </button>
     </div>
   </div>
diff --git a/src/components/MobileSidebar.astro b/src/components/MobileSidebar.astro
index 1afe2b4..2e27448 100644
--- a/src/components/MobileSidebar.astro
+++ b/src/components/MobileSidebar.astro
@@ -18,6 +18,11 @@ import { Icon } from "astro-icon/components";
       aria-label="Close mobile sidebar"
       class="p-4 transition hover:backdrop-brightness-75 dark:hover:backdrop-brightness-125 duration-100"
       @click="sidebarOpen = !sidebarOpen">
+      <Icon
+        name="heroicons:x-mark-solid"
+        class="fill-branding-white h-5 w-5 duration-150"
+        :class="{'rotate-45': !sidebarOpen}"
+      />
     </button>
   </div>
   <div
diff --git a/src/components/Pagination.astro b/src/components/Pagination.astro
index 2283d79..a4dae0f 100644
--- a/src/components/Pagination.astro
+++ b/src/components/Pagination.astro
@@ -1,5 +1,6 @@
 ---
 // component imports
+import { Icon } from "astro-icon/components";
 const { prevUrl, nextUrl } = Astro.props;
 ---
 
@@ -11,6 +12,7 @@ const { prevUrl, nextUrl } = Astro.props;
       <a
         href={prevUrl}
         class="align-baseline p-2 bg-branding-navy text-white uppercase rounded justify-start mr-auto ml-0">
+        <Icon name="heroicons:backward-20-solid" class="inline w-5 h-5 mb-1" />
         Previous
       </a>
     )
@@ -22,6 +24,7 @@ const { prevUrl, nextUrl } = Astro.props;
         href={nextUrl}
         class="align-baseline p-2 bg-branding-navy text-white uppercase rounded justify-end ml-auto mr-0">
         Next
+        <Icon name="heroicons:forward-20-solid" class="inline w-5 h-5 mb-1" />
       </a>
     )
   }
diff --git a/src/components/blog/PostHeader.astro b/src/components/blog/PostHeader.astro
index 8e6b700..a1e9f08 100644
--- a/src/components/blog/PostHeader.astro
+++ b/src/components/blog/PostHeader.astro
@@ -8,6 +8,8 @@ interface Props {
 }
 
 import { formatPostDate, hashtagPostTags, slugifyUrl } from "@lib/utils";
+import { Icon } from "astro-icon/components";
+
 const {
   title,
   pubDate,
@@ -20,6 +22,7 @@ const postTags = hashtagPostTags(tags);
 
 <header class="align-baseline">
   <h1 class="mt-1 text-wrap-balance">{title}</h1>
+  <Icon name="mdi:calendar" class="w-5 mb-1 mr-1 inline-block" />
   <span class="font-bold mr-1 dark:text-neutral-300 text-neutral-700"
     >Posted:</span
   >
@@ -38,6 +41,7 @@ const postTags = hashtagPostTags(tags);
   }
 
   <div class="block">
+    <Icon name="heroicons:tag-20-solid" class="h-5 w-5 mr-1 inline mb-1" />
     <strong class="mr-1 dark:text-neutral-300 text-neutral-700">Tags:</strong>
     {
       postTags.map((tag, index) => {
@@ -55,7 +59,7 @@ const postTags = hashtagPostTags(tags);
     }
   </div>
   <div class="block">
-    <MdiFolderOpen class="h-5 w-5 mr-1 inline mb-1" />
+    <Icon name="mdi:folder-open" class="h-5 w-5 mr-1 inline mb-1" />
     <strong class="mr-1 dark:text-neutral-300 text-neutral-700"
       >Categories:</strong
     >
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index c079712..d8d9776 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -18,7 +18,7 @@ const { title, description } = Astro.props;
 
 <html
   lang="en"
-  x-data="{darkMode: false}"
+  x-data="{darkMode: false, sidebarOpen: false}"
   x-init="darkMode = JSON.parse(localStorage.getItem('darkMode')); $watch('darkMode', value => JSON.stringify(localStorage.setItem('darkMode', value)))"
   :data-theme="darkMode === true ? 'dark' : 'light'">
   <head>
@@ -57,6 +57,6 @@ const { title, description } = Astro.props;
         <slot />
       </main>
     </div>
-    <!-- <MobileSidebar /> -->
+    <MobileSidebar />
   </body>
 </html>