chore: update dependencies and enhance theme configuration

- Bump versions of several dependencies in package.json and pnpm-lock.yaml, including astro (5.1.9), @types/node (22.10.10), and lint-staged (15.4.2).
- Introduce new Header, Footer, and Navigation components for improved layout structure.
- Update theme configuration to clarify supported font styles and title spacing options.
- Refactor theme toggle button for better accessibility and visual consistency.
- Minor adjustments to CSS for improved button scaling effects and layout responsiveness.

src/components/Header.astro

@@ -0,0 +1,30 @@
+---
+import themeConfig from '@/config'
+
+const { title, subtitle } = themeConfig.site
+const { titleSpace = 2 } = themeConfig.global
+
+const marginClass = {
+  1: 'mb-1',
+  2: 'mb-2',
+  3: 'mb-3',
+  4: 'mb-4',
+}[titleSpace] || 'mb-3'
+---
+
+<header>
+  <h1
+    class={`${marginClass} mt--1.6 text-12 c-primary font-bold font-title`}
+    aria-label="Title Tag"
+  >
+    <a href="/">
+      {title}
+    </a>
+  </h1>
+  <h3
+    class="text-5.6 c-primary font-navbar opacity-50"
+    aria-label="Meta Description"
+  >
+    {subtitle}
+  </h3>
+</header>

src/components/Navigation.astro

@@ -0,0 +1,87 @@
+---
+import themeConfig from '@/config'
+import { ui } from '@/utils/ui'
+
+// Configuration
+const defaultLocale = themeConfig.global.locale
+const moreLocales = themeConfig.global.moreLocale
+const currentPath = Astro.url.pathname
+
+// Path utilities
+const cleanPath = (path: string) => path.replace(/^\/+|\/+$/g, '')
+
+// Language utilities
+function getLangFromPath(path: string) {
+  const secondaryLang = moreLocales.find(lang =>
+    path.startsWith(`/${lang}/`) || path === `/${lang}` || path === `/${lang}/`,
+  )
+  return secondaryLang || defaultLocale
+}
+
+const currentLang = getLangFromPath(currentPath)
+const currentUI = ui[currentLang as keyof typeof ui]
+
+// Localization utilities
+function getLocalizedPath(path: string) {
+  const clean = cleanPath(path)
+  return currentLang === defaultLocale ? `/${clean}` : `/${currentLang}/${clean}`
+}
+
+// Page type detection utilities
+function isHomePage(path: string) {
+  const clean = cleanPath(path)
+  return clean === '' || moreLocales.includes(clean)
+}
+function isPostPage(path: string) {
+  const clean = cleanPath(path)
+  return clean.startsWith('posts') || moreLocales.some(lang => clean.startsWith(`${lang}/posts`))
+}
+function isTagPage(path: string) {
+  const clean = cleanPath(path)
+  return clean.startsWith('tags') || moreLocales.some(lang => clean.startsWith(`${lang}/tags`))
+}
+function isAboutPage(path: string) {
+  const clean = cleanPath(path)
+  return clean.startsWith('about') || moreLocales.some(lang => clean.startsWith(`${lang}/about`))
+}
+
+// Active state detection
+const isPostActive = isHomePage(currentPath) || isPostPage(currentPath)
+const isTagActive = isTagPage(currentPath)
+const isAboutActive = isAboutPage(currentPath)
+---
+
+<nav class="mb-18 mt-10 text-5.6 text-secondary font-semibold leading-11.4 font-navbar">
+  <ul>
+    <li>
+      <a
+        href={getLocalizedPath('/')}
+        class:list={[
+          isPostActive ? 'font-bold opacity-100' : 'opacity-25',
+        ]}
+      >
+        {currentUI.posts}
+      </a>
+    </li>
+    <li>
+      <a
+        href={getLocalizedPath('/tags')}
+        class:list={[
+          isTagActive ? 'font-bold opacity-100' : 'opacity-25',
+        ]}
+      >
+        {currentUI.tags}
+      </a>
+    </li>
+    <li>
+      <a
+        href={getLocalizedPath('/about')}
+        class:list={[
+          isAboutActive ? 'font-bold opacity-100' : 'opacity-25',
+        ]}
+      >
+        {currentUI.about}
+      </a>
+    </li>
+  </ul>
+</nav>

src/components/ThemeToggle.astro

@@ -46,7 +46,7 @@ window.addEventListener('pageshow', (event) => {
 <button
   aria-pressed="false"
   aria-label="Theme Toggle Button"
-  class="absolute right-10 top-10 z-999 aspect-square w-8 c-secondary"
+  class="absolute right-9.6 top-21 z-999 aspect-square w-8 c-secondary active:scale-92"
 >
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
     <path d="m12 1c-6.1 0-11 4.9-11 11s4.9 11 11 11 11-4.9 11-11-4.9-11-11-11m0 20c-5.8 0-10.5-4-10.5-9s4.7-9 10.5-9 10.5 4 10.5 9-4.7 9-10.5 9" />