Hamburger.astro created. Navigation.astro and Search.astro tweaked

src/components/FormattedDate.astro

@@ -1,5 +1,5 @@
 ---
-interface Props {
+type Props = {
   date: Date
 }
 
@@ -8,10 +8,10 @@ const { date } = Astro.props
 
 <time datetime={date.toISOString()}>
   {
-    date.toLocaleDateString('en-us', {
+    new Intl.DateTimeFormat('en-us', {
       year: 'numeric',
       month: 'short',
       day: 'numeric',
-    })
+    }).format(date)
   }
 </time>

src/components/Hamburger.astro

@@ -0,0 +1,98 @@
+---
+import HeaderLink from './HeaderLink.astro'
+import Svg from '@/components/Svg/index.astro'
+---
+
+<div class="hamburger-menu">
+  <input type="checkbox" id="menu-toggle-check" />
+  <label for="menu-toggle-check" class="hamburger-icon-btn"><span></span></label
+  >
+  <nav class="menu-content">
+    <div class="nav-links">
+      <HeaderLink href="/">Home</HeaderLink>
+      <HeaderLink href="/blog">Blog</HeaderLink>
+      <HeaderLink href="/about">About</HeaderLink>
+    </div>
+    <div class="icon-links">
+      <a href="https://twitter.com/astrodotbuild" target="_blank">
+        <span class="sr-only">Follow Me on X(previous Twitter)</span>
+        <Svg iconName="twitter" width={32} height={32} />
+      </a>
+      <a href="https://github.com/brklntmhwk" target="_blank">
+        <span class="sr-only">Go to the GitHub repo</span>
+        <Svg iconName="github" width={32} height={32} />
+      </a>
+    </div>
+  </nav>
+</div>
+<style>
+  nav.menu-content {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 100%;
+    z-index: 80;
+    padding-top: 3rem;
+    margin-top: 4rem;
+    background-color: #f4f4f4;
+    transition: all 0.2s;
+  }
+  nav.menu-content > * {
+    padding: 0.75rem 2.25rem;
+  }
+  .nav-links {
+    display: grid;
+    row-gap: 1rem;
+  }
+  .icon-links {
+    display: flex;
+    column-gap: 1rem;
+  }
+  .hamburger-icon-btn {
+    /* position: fixed;
+    top: 10px;
+    right: 10px; */
+    height: 2.5rem;
+    width: 2.5rem;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 90;
+  }
+  .hamburger-icon-btn span,
+  .hamburger-icon-btn span:before,
+  .hamburger-icon-btn span:after {
+    content: '';
+    display: block;
+    height: 3px;
+    width: 25px;
+    border-radius: 3px;
+    background-color: #000000;
+    position: absolute;
+  }
+  .hamburger-icon-btn span:before {
+    bottom: 8px;
+  }
+  .hamburger-icon-btn span:after {
+    top: 8px;
+  }
+  #menu-toggle-check:checked ~ .hamburger-icon-btn span {
+    background-color: transparent;
+  }
+  #menu-toggle-check:checked ~ .hamburger-icon-btn span::before {
+    bottom: 0;
+    transform: rotate(45deg);
+  }
+  #menu-toggle-check:checked ~ .hamburger-icon-btn span::after {
+    top: 0;
+    transform: rotate(-45deg);
+  }
+  #menu-toggle-check:checked ~ nav.menu-content {
+    left: 0;
+  }
+  #menu-toggle-check {
+    display: none;
+  }
+</style>

src/components/Navigation.astro

@@ -1,47 +1,52 @@
 ---
-import { getEntry } from 'astro:content'
+// import { getEntry } from 'astro:content'
 import HeaderLink from './HeaderLink.astro'
 import Svg from '@/components/Svg/index.astro'
 import Search from '@/components/Search.astro'
+import Hamburger from '@/components/Hamburger.astro'
 
-const meta = await getEntry('meta', 'site-data')
+// const meta = await getEntry('meta', 'site-data')
 ---
 
 <nav>
-  <h2><a href="/">{meta.data.site.title}</a></h2>
+  <a href="/"><Svg iconName="site-logo" width={32} height={32} /></a>
   <div class="nav-links">
     <HeaderLink href="/">Home</HeaderLink>
     <HeaderLink href="/blog">Blog</HeaderLink>
     <HeaderLink href="/about">About</HeaderLink>
   </div>
-  <div class="social-links">
+  <div class="icon-links">
     <Search />
     <a href="https://twitter.com/astrodotbuild" target="_blank">
-      <span class="sr-only">Follow Astro on Twitter</span>
-      <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
-        ><path
-          fill="currentColor"
-          d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
-        ></path></svg
-      >
+      <span class="sr-only">Follow Me on X(previous Twitter)</span>
+      <Svg iconName="twitter" width={32} height={32} />
     </a>
     <a href="https://github.com/brklntmhwk" target="_blank">
       <span class="sr-only">Go to the GitHub repo</span>
       <Svg iconName="github" width={32} height={32} />
     </a>
   </div>
   <div class="mobile-menu">
-    <button><Svg iconName="hamburger" width={32} height={32} /></button>
+    <Search />
+    <Hamburger />
   </div>
 </nav>
 
 <style>
   nav {
-    grid-area: navigation;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    /* width: 100%; */
+    height: 2.5rem;
+    margin: 1.5rem 1.05rem;
+    box-sizing: border-box;
+    /* padding: 1.5rem 1.05rem; */
+    /* grid-area: navigation; */
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 8px;
   }
   nav a {
     /* padding: 1em 0.5em; */
@@ -53,12 +58,14 @@ const meta = await getEntry('meta', 'site-data')
     text-decoration: none;
     border-bottom-color: var(--accent);
   }
-  .social-links,
+  .icon-links,
   .nav-links {
     display: none;
   }
   .mobile-menu {
-    display: block;
+    display: flex;
+    align-items: center;
+    column-gap: 1rem;
   }
   .mobile-menu button {
     background-color: transparent;
@@ -67,9 +74,10 @@ const meta = await getEntry('meta', 'site-data')
   }
   @media (min-width: 768px) {
     nav {
-      padding: 0 10px;
+      height: 2.5rem;
+      padding: 1rem 1.25rem;
     }
-    .social-links,
+    .icon-links,
     .nav-links {
       display: flex;
       column-gap: 15px;
@@ -85,7 +93,7 @@ const meta = await getEntry('meta', 'site-data')
       grid-template-areas:
         'blog-title'
         'nav-links'
-        'social-links';
+        'icon-links';
       justify-content: start;
       align-items: start;
       position: sticky;
@@ -104,12 +112,15 @@ const meta = await getEntry('meta', 'site-data')
       grid-area: nav-links;
       gap: 15px;
     }
-    .social-links {
-      grid-area: social-links;
+    .icon-links {
+      grid-area: icon-links;
       display: flex;
       justify-content: space-evenly;
       column-gap: 10px;
       align-self: end;
     }
+    .mobile-menu {
+      display: none;
+    }
   }
 </style>

src/components/Search.astro

@@ -19,21 +19,36 @@ import Svg from '@/components/Svg/index.astro'
     left: 0;
     width: 100%;
     height: 100vh;
-    z-index: 40;
+    z-index: 90;
+
+    background-color: hsla(223, 13%, 10%, 0.66);
+    backdrop-filter: blur(0.25rem);
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
+    --pagefind-ui-background: var(--bg);
+    --pagefind-ui-border: var(--line);
+    --pagefind-ui-text: var(--fg);
+    --pagefind-ui-primary: var(--fg);
+    --pagefind-ui-border-width: 1px;
+    --pagefind-ui-font: initial;
+    --pagefind-ui-tag: color-mix(in srgb, var(--code) 95%, var(--fg) 5%);
   }
   #search-modal.hidden {
     display: none;
   }
   #search-wrapper {
+    background-color: color-mix(in srgb, var(--bg) 97%, var(--fg) 3%);
     max-width: 30rem;
     max-height: 100vh;
     padding: 1rem;
     border-radius: 0.25rem;
+    margin: 0 auto;
+    overflow-y: auto;
   }
   #search-icon-button {
     background-color: transparent;
     border: none;
     cursor: pointer;
+    padding: 0;
   }
 </style>
 <script>
@@ -42,7 +57,48 @@ import Svg from '@/components/Svg/index.astro'
   function initPagefind() {
     new PagefindUI({
       element: '#search',
+      translations: {
+        placeholder: 'Search articles',
+      },
     })
+
+    const modalButton = document.querySelector('#search-icon-button')
+    const modal = document.querySelector('#search-modal')
+    const input = document.querySelector(
+      '.pagefind-ui__search-input'
+    ) as HTMLInputElement | null
+
+    if (modalButton && modal && input) {
+      listen(modalButton, modal, input)
+    }
+
+    function listen(
+      modalButton: Element,
+      modal: Element,
+      input: HTMLInputElement
+    ) {
+      modalButton.addEventListener('click', () => {
+        modal.classList.toggle('hidden')
+        input.focus()
+      })
+
+      modal.addEventListener('click', (e) => {
+        if (e.target === modal) {
+          modal.classList.toggle('hidden')
+        }
+      })
+
+      window.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+          modal.classList.add('hidden')
+        }
+        if (e.code === 'KeyF' && e.ctrlKey && e.shiftKey) {
+          e.preventDefault()
+          modal.classList.toggle('hidden')
+          input.focus()
+        }
+      })
+    }
   }
 
   document.addEventListener('DOMContentLoaded', initPagefind)

src/env.d.ts

@@ -16,7 +16,19 @@ declare module '@pagefind/default-ui' {
       showEmptyFilters?: boolean
       debounceTimeoutMs?: number
       mergeIndex?: any
-      translations?: any
+      translations?: {
+        placeholder?: string
+        clear_search?: string
+        load_more?: string
+        search_label?: string
+        filters_label?: string
+        zero_results?: string
+        many_results?: string
+        one_result?: string
+        alt_search?: string
+        search_suggestion?: string
+        searching?: string
+      }
       autofocus?: boolean
       sort?: any
     })