From 2763ae085bc157712571b42ff0d77481a31160bc Mon Sep 17 00:00:00 2001
From: Ariel Costas <94913521+arielcostas@users.noreply.github.com>
Date: Sat, 3 Feb 2024 00:46:23 +0100
Subject: Responsive navbar

---
 layouts/_default/baseof.html |  3 ++
 layouts/partials/header.html | 66 +++++++++++++++++++++++++++++++++++---------
 2 files changed, 56 insertions(+), 13 deletions(-)

(limited to 'layouts')

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 115b754..9bac02c 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -29,6 +29,9 @@
 	</main>
 
 	{{ partial "partials/footer.html" . }}
+
+	{{ $script := resources.Get "js/navbar.js" | minify }}
+	<script src='{{ $script.RelPermalink }}'></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 5cf34fc..e3b55c7 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,22 +1,62 @@
-<header>
-	<div>
+<header class="collapsed">
+	<div id="brand">
+		<button id="mobile-menu" type="button">
+			<img src="/icons/menu-2.svg" alt="Menu" width="24" height="24" />
+		</button>
+
 		<h1>
 			<a href="{{ .Site.Home.RelPermalink }}">
 				CostasDEV
 			</a>
 		</h1>
-
-		<nav>
-			{{$current := .}}
-			{{ range .Site.Home.Pages }}
-			<a href="{{ .RelPermalink }}"{{ if eq .RelPermalink $current.RelPermalink }} class="active"{{ end }}>{{ .Title }}</a>
-			{{ end }}
-		</nav>
 	</div>
 
-	<nav>
-		<a rel="me" href="https://masto.es/@arielcg">Mastodon</a>
-		<a href="https://github.com/arielcostas">GitHub</a>
-		<a href="https://linkedin.com/in/ariel-costas">LinkedIn</a>
+	<nav id="nav-pages">
+		{{$current := .}}
+		{{ range .Site.Home.Pages }}
+		<a href="{{ .RelPermalink }}" {{ if eq .RelPermalink $current.RelPermalink }} class="active" {{ end }}>{{ .Title
+			}}</a>
+		{{ end }}
+	</nav>
+
+	<nav id="nav-socials">
+		<a rel="me" href="https://masto.es/@arielcg" title="Mastodon">
+
+			<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-mastodon" width="32"
+				height="32" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
+				stroke-linecap="round" stroke-linejoin="round">
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path
+					d="M18.648 15.254c-1.816 1.763 -6.648 1.626 -6.648 1.626a18.262 18.262 0 0 1 -3.288 -.256c1.127 1.985 4.12 2.81 8.982 2.475c-1.945 2.013 -13.598 5.257 -13.668 -7.636l-.026 -1.154c0 -3.036 .023 -4.115 1.352 -5.633c1.671 -1.91 6.648 -1.666 6.648 -1.666s4.977 -.243 6.648 1.667c1.329 1.518 1.352 2.597 1.352 5.633s-.456 4.074 -1.352 4.944z" />
+				<path
+					d="M12 11.204v-2.926c0 -1.258 -.895 -2.278 -2 -2.278s-2 1.02 -2 2.278v4.722m4 -4.722c0 -1.258 .895 -2.278 2 -2.278s2 1.02 2 2.278v4.722" />
+			</svg>
+
+		</a>
+		<a href="https://github.com/arielcostas" title="GitHub">
+
+			<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github" width="32"
+				height="32" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
+				stroke-linecap="round" stroke-linejoin="round">
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path
+					d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
+			</svg>
+
+		</a>
+		<a href="https://linkedin.com/in/ariel-costas" title="LinkedIn">
+
+			<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-linkedin" width="32"
+				height="32" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
+				stroke-linecap="round" stroke-linejoin="round">
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
+				<path d="M8 11l0 5" />
+				<path d="M8 8l0 .01" />
+				<path d="M12 16l0 -5" />
+				<path d="M16 16v-3a2 2 0 0 0 -4 0" />
+			</svg>
+
+		</a>
 	</nav>
 </header>
\ No newline at end of file
-- 
cgit v1.3