From 7a1c4d98c9c43ba4352dbe9d3c2319057b8f93c8 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Tue, 3 May 2022 17:32:41 -0400
Subject: [PATCH] Cool hamburger icon

---
 public/index.html | 11 +++++++-
 public/style.css  | 71 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 81 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index b6781f8..93327d9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,7 +40,16 @@
       <div class="container-fluid top-nav">
         <a class="navbar-brand" href="#"><img src="Images/tea-main-logo.svg" style="width:100px;"></a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
+          <span>
+            <input type="checkbox" id="checkbox1" class="checkbox1 visuallyHidden">
+        <label for="checkbox1">
+            <div class="hamburger hamburger1">
+                <span class="bar bar1"></span>
+                <span class="bar bar2"></span>
+                <span class="bar bar3"></span>
+                <span class="bar bar4"></span>
+            </div>
+        </label></span>
         </button>
         <div class="collapse navbar-collapse pt-2 pb-2" id="navbarSupportedContent">
           <ul class="navbar-nav ms-auto me-4 my-auto">
diff --git a/public/style.css b/public/style.css
index cdd63db..fa11e2a 100644
--- a/public/style.css
+++ b/public/style.css
@@ -4,6 +4,77 @@ body{
   background-color: #2B3033;
 }
 
+.navbar-dark .navbar-toggler{
+  border:none;
+}
+
+.visuallyHidden {
+    position: absolute;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    height: 1px; width: 1px;
+    margin: -1px; padding: 0; border: 0;
+}
+
+.hamburger {
+    margin: 0 auto;
+    margin-top: 0px;
+    width: 30px;
+    height: 30px;
+    position: relative;
+}
+
+.hamburger .bar {
+    padding: 0;
+    width: 30px;
+    height: 4px;
+    background-color: #8EC7BF;
+    display: block;
+    border-radius: 4px;
+    transition: all 0.4s ease-in-out;
+    position: absolute;
+}
+
+.bar1 {
+    top: 0;
+}
+
+.bar2,
+.bar3 {
+    top: 13.5px;
+}
+
+.bar3 {
+    right: 0;
+}
+
+.bar4 {
+    bottom: 0;
+}
+
+/* HAMBURGER 1 */
+.checkbox1:checked + label > .hamburger1 > .bar1{
+    transform: rotate(45deg);
+    transform-origin: 5%;
+    width: 41px
+}
+
+.checkbox1:checked + label > .hamburger1 > .bar2 {
+    transform: translateX(-40px);
+    background-color: transparent;
+}
+
+.checkbox1:checked + label > .hamburger1 > .bar3 {
+    transform: translateX(40px);
+    background-color: transparent;
+}
+
+.checkbox1:checked + label > .hamburger1 > .bar4 {
+    transform-origin: 5%;
+    transform: rotate(-45deg);
+    width: 41px;
+}
+
 .container,
 .top-nav{
   max-width: 1280px;