Internalise theme

5 files changed, 82 insertions, 20 deletions

diff --git a/layouts/partials/header/avatar.html b/layouts/partials/header/avatar.html
index e3c1021..5c9447d 100644
--- a/layouts/partials/header/avatar.html
+++ b/layouts/partials/header/avatar.html
@@ -1,7 +1,14 @@
-{{ $avatar := resources.GetMatch .Site.Params.avatar }}
+{{ $avatar := resources.GetMatch .Site.Params.avatar }} 
 {{ $tiny := ($avatar.Fill "80x80 q90") }}
-<div class="flex-none w-20 h-20 rounded-full overflow-hidden" >
-    <a href="{{ .Site.BaseURL }}">
-        <img srcset="{{- with $tiny.RelPermalink -}}{{.}} 80w{{- end -}}" src="{{ $avatar.RelPermalink }}" width="{{ $avatar.Width }}" height="{{ $avatar.Height }}" alt="{{ .Site.Title }}">
-    </a>
+
+<div class="flex-none w-20 h-20 rounded-full overflow-hidden">
+  <a href="{{ .Site.BaseURL }}">
+    <img
+      srcset="{{- with $tiny.RelPermalink -}}{{.}} 80w{{- end -}}"
+      src="{{ $avatar.RelPermalink }}"
+      width="{{ $avatar.Width }}"
+      height="{{ $avatar.Height }}"
+      alt="{{ .Site.Title }}"
+    />
+  </a>
 </div>
diff --git a/layouts/partials/header/index.html b/layouts/partials/header/index.html
new file mode 100644
index 0000000..43debba
--- /dev/null
+++ b/layouts/partials/header/index.html
@@ -0,0 +1,8 @@
+<header class="flex flex-col sm:flex-row items-center gap-5 sm:gap-10 pt-16 py-12">
+  {{ partial "header/avatar" . }}
+  
+  <div class="flex flex-col gap-5">
+    {{ partial "header/title" . }} 
+    {{ partial "header/nav" . }}
+  </div>
+</header>
diff --git a/layouts/partials/header/nav.html b/layouts/partials/header/nav.html
index c0c20b3..94b073d 100644
--- a/layouts/partials/header/nav.html
+++ b/layouts/partials/header/nav.html
@@ -1,10 +1,14 @@
 <nav>
-    <ul class="flex flex-wrap justify-center uppercase text-xs font-semibold gap-7 text-gray-500 ">
-        {{ $currentPage := . }}
-        {{ range site.Menus.main }}
-        {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
-        {{- $page_url:= $currentPage.Permalink | absLangURL }}
-        <li class="{{- if eq $menu_item_url $page_url }}text-gray-900{{else}}hover:text-gray-500{{ end -}}"><a href="{{ .URL }}">{{ .Name }}</a></li>
-        {{ end }}
-    </ul>
-</nav>
\ No newline at end of file
+  <ul>
+    {{ $currentPage := . }} 
+    {{ range site.Menus.main }} 
+    {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }} 
+    {{- $page_url := $currentPage.Permalink | absLangURL }}
+    <li>
+      <a href="{{ .URL }}" class="{{ if eq $menu_item_url $page_url }} active {{ end }}">
+        {{ .Name }}
+      </a>
+    </li>
+    {{ end }}
+  </ul>
+</nav>
diff --git a/layouts/partials/header/theme-button.html b/layouts/partials/header/theme-button.html
new file mode 100644
index 0000000..0a8313b
--- /dev/null
+++ b/layouts/partials/header/theme-button.html
@@ -0,0 +1,47 @@
+<button class="toggle-theme" aria-label="Toggle Theme" title="Toggle Theme" onclick="toggleTheme()">
+  <span class="theme-icon light"> {{ partial "utils/icon" "sun" }} </span>
+  <span class="theme-icon dark"> {{ partial "utils/icon" "moon" }} </span>
+</button>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const theme = localStorage.getItem('theme');
+
+    if (!theme || theme === 'light') {
+      setTheme('light');
+    } else {
+      setTheme(theme);
+    }
+  });
+
+  function setTheme(theme) {
+    const html = document.querySelector('html');
+    localStorage.setItem('theme', theme);
+
+    if (theme === 'light') {
+      if (html.classList.contains('dark')) {
+        document.querySelector('html').classList.remove('dark');
+      }
+
+      document.querySelector('.theme-icon.light').style.display = 'none';
+      document.querySelector('.theme-icon.dark').style.display = 'block';
+    } else {
+      if (!html.classList.contains('dark')) {
+        document.querySelector('html').classList.add('dark');
+      }
+
+      document.querySelector('.theme-icon.dark').style.display = 'none';
+      document.querySelector('.theme-icon.light').style.display = 'block';
+    }
+  }
+
+  function toggleTheme() {
+    const theme = localStorage.getItem('theme');
+
+    if (theme === 'light') {
+      setTheme('dark');
+    } else {
+      setTheme('light');
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/layouts/partials/header/title.html b/layouts/partials/header/title.html
index d6e6ba3..11bc434 100644
--- a/layouts/partials/header/title.html
+++ b/layouts/partials/header/title.html
@@ -1,7 +1,3 @@
 <a href="{{ .Site.BaseURL }}">
-    {{ if .IsHome }}
-    <h1 class="text-center sm:text-left text-4xl font-extrabold text-gray-800 ">{{ .Site.Title }}</h1>
-    {{ else }}
-    <h3 class="text-center sm:text-left text-4xl font-extrabold text-gray-800 ">{{ .Site.Title }}</h3>
-    {{ end }}
-</a>
\ No newline at end of file
+  <h1 id="site-title">{{ .Site.Title }}</h1>
+</a>