From be6208af22e00950ec15768c8986ce838d2cacca Mon Sep 17 00:00:00 2001
From: Jakub <jakubb.06@protonmail.com>
Date: Fri, 2 Feb 2024 06:31:53 -0500
Subject: [PATCH] wip - hamburger menu

---
 layouts/partials/nav.html                     | 15 ++++-
 .../{colors.css => colorschemes/gruvbox.css}  |  0
 static/css/style.css                          | 61 ++++++++++++++++++-
 3 files changed, 74 insertions(+), 2 deletions(-)
 rename static/css/{colors.css => colorschemes/gruvbox.css} (100%)

diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index 4003535..5a59acd 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -2,9 +2,22 @@
 			<input class="menu-btn" type="checkbox" id="menu-btn" />
 			<ul class="menu" >
 				<li>
-			<label class="menu-icon" for="menu-btn">
 				<a href="/" class="logo" >{{ .Site.Title }}</a>
+			<label class="menu-icon" for="menu-btn">
+
+<div class="hamburger" onclick="myFunction(this)">
+  <div class="bar1"></div>
+  <div class="bar2"></div>
+  <div class="bar3"></div>
+</div>
+
+<script>
+function myFunction(x) {
+  x.classList.toggle("change");
+}
+</script>
 			</label>
+
 					
 					<span class="menu-entries">
 					<a href="/" class="home-link" >Home</a>
diff --git a/static/css/colors.css b/static/css/colorschemes/gruvbox.css
similarity index 100%
rename from static/css/colors.css
rename to static/css/colorschemes/gruvbox.css
diff --git a/static/css/style.css b/static/css/style.css
index 568d812..85433a0 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,4 +1,4 @@
-@import url('./colors.css'); /* Include colorscheme */
+@import url('./colorschemes/gruvbox.css'); /* Include colorscheme */
 
 /* Globals  */
 html, body {
@@ -36,6 +36,10 @@ a{
 
 }
 
+.hamburger {
+	display: none;
+}
+
 .menu-entries a:hover{
 	background-color: var(--acc-1);
 	color: var(--alt-bg);
@@ -105,6 +109,59 @@ a.logo {
 	color: var(--alt-bg);
 	transition: 400ms;
 	}
+
+
+
+
+
+
+
+.hamburger {
+  display: block;
+	float: right;
+	position: absolute;
+	top: 0;
+	right: 0;
+
+	margin-top: 12px;
+	margin-right: 12px;
+  cursor: pointer;
+}
+
+.bar1, .bar2, .bar3 {
+  width: 35px;
+  height: 5px;
+	background-color: var(--acc-1);
+  margin: 6px 0;
+  transition: 0.4s;
+}
+
+.change .bar1 {
+	background-color: var(--alt-bg);
+  transform: translate(0, 11px) rotate(-45deg);
+}
+
+.change .bar2 {
+	opacity: 0;
+}
+
+.change .bar3 {
+  transform: translate(0, -11px) rotate(45deg);
+	background-color: var(--alt-bg);
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
 }
 
 @media screen and (min-width: 1040px) {
@@ -132,3 +189,5 @@ a.logo {
 		box-shadow: inset -22px 0 20px -20px var(--shadow);
 	}
 }
+
+