Responsive navbar

4 files changed, 152 insertions, 36 deletions

diff --git a/assets/css/partials/header.scss b/assets/css/partials/header.scss
index 1562952..e35d9ec 100644
--- a/assets/css/partials/header.scss
+++ b/assets/css/partials/header.scss
@@ -4,40 +4,55 @@ header {
 	color: black;
 
 	display: flex;
-	flex-direction: row;
-	align-items: center;
+	flex-direction: column;
 	justify-content: space-between;
 
-	padding: 0 2rem;
+	padding: 0 1rem;
 	margin-bottom: 1rem;
 
 	a {
 		display: inline-block;
-		padding-top: 1rem;
-		padding-bottom: calc(1rem - 4px);
+		padding-top: 0.5rem;
+		padding-bottom: calc(0.5rem - 4px);
 	}
 
-	>div {
+	#brand {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		gap: 1rem;
-	}
 
-	h1 {
-		font-size: 2rem;
-		margin: 0;
-		font-weight: 900;
-		letter-spacing: 0.15rem;
+		h1 {
+			font-size: 2rem;
+			margin: 0;
+			font-weight: 900;
+			letter-spacing: 0.15rem;
 
-		a {
-			text-decoration: none;
+			a {
+				text-decoration: none;
+			}
 		}
 	}
 
-	p {
-		font-size: 1.2rem;
-		font-weight: 300;
+	#nav-pages {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+
+		padding-inline-start: 2.5rem;
+	}
+
+	#nav-socials {
+		align-self: center;
+
+		display: flex;
+		gap: 1.5rem;
+
+		a {
+			font-size: 1.5rem;
+			transition: color 0.2s ease-in-out;
+			line-height: 1;
+		}
 	}
 
 	nav>a {
@@ -46,7 +61,6 @@ header {
 		font-size: 1.2rem;
 		text-transform: uppercase;
 		letter-spacing: 0.1rem;
-		margin: 0 0.5rem;
 		transition: color 0.2s ease-in-out;
 
 		&:hover {
@@ -57,20 +71,69 @@ header {
 			border-bottom: 2px solid var(--accent-3);
 		}
 	}
+
+	button#mobile-menu {
+		display: block;
+		background-color: transparent;
+		border: none;
+		font-size: 2rem;
+		cursor: pointer;
+	}
+
+	&.collapsed {
+
+		#nav-pages,
+		#nav-socials {
+			display: none;
+		}
+	}
 }
 
-@media (max-width: 768px) {
+@media (min-width: 480px) {
 	header {
-		flex-direction: column;
+		flex-direction: row;
 		align-items: center;
-		justify-content: center;
+		justify-content: space-between;
+
+		a {
+			padding-top: 1rem;
+			padding-bottom: calc(1rem - 4px);
+		}
+
+		#nav-pages {
+			justify-self: start;
+			flex-direction: row;
+			gap: 1.5rem;
+			padding-inline-start: 0;
+		}
+
+		button#mobile-menu {
+			display: none;
+		}
+
+		&.collapsed {
+
+			#nav-pages,
+			#nav-socials {
+				display: flex;
+			}
+		}
+	}
+}
+
+@media (min-width: 1024px) {
+	header {
+		padding: 0 1rem;
+		gap: 1.5rem;
+		justify-content: start;
 
 		h1 {
 			margin-bottom: 0.5rem;
 		}
 
-		p {
-			margin-bottom: 0;
+		#nav-socials {
+			align-self: flex-end;
+			margin-left: auto;
 		}
 	}
 }
\ No newline at end of file
diff --git a/assets/js/navbar.js b/assets/js/navbar.js
new file mode 100644
index 0000000..902ed8f
--- /dev/null
+++ b/assets/js/navbar.js
@@ -0,0 +1,10 @@
+/** @type {HTMLElement} */
+const header = document.querySelector('body > header');
+/** @type {HTMLButtonElement} */
+const toggleButton = document.querySelector('button#mobile-menu');
+
+function toggleNavbar() {
+	header.classList.toggle('collapsed');
+}
+
+toggleButton.addEventListener('click', toggleNavbar);
\ No newline at end of file
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