From 10b03fa476d400b013a65e6b2a4381cd3ca30e61 Mon Sep 17 00:00:00 2001
From: "E. Almqvist" <elalmqvist@gmail.com>
Date: Sun, 3 Jul 2022 21:59:59 +0200
Subject: [PATCH] Burger menu logic & stuff

---
 components/burgermenu.tsx | 31 ++++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/components/burgermenu.tsx b/components/burgermenu.tsx
index 46e135c..bd68f97 100644
--- a/components/burgermenu.tsx
+++ b/components/burgermenu.tsx
@@ -1,8 +1,9 @@
-import styled from 'styled-components'
-import Link from "next/link"
+import styled, {css} from "styled-components"
+import React, {useState} from "react"
+//import Link from "next/link"
 
 const MenuLine = styled.div`
-	width: 2rem;
+	width: 1.8rem;
 	height: 2px;
 	border-radius: 2px;
 	background-color: var(--fg);
@@ -11,9 +12,17 @@ const MenuLine = styled.div`
 	}
 `
 
-const BurgerContainer = styled.div`
+const BurgerContainer = styled.div<{open: boolean}>`
 	display: none;
+	width: 1.8rem;
+	height: 1.8rem;
+	background-color: yellow;
 	flex-direction: column;
+	justify-content: center;
+
+	&:hover {
+		cursor: pointer;
+	}
 
 	@media screen and (max-width: 960px) {
 		display: flex;
@@ -22,11 +31,23 @@ const BurgerContainer = styled.div`
 			display: none;
 		}
 	}
+
+	${({open}) => open && css`
+		background-color: red;
+		div:not(:last-child) {
+			background-color: green;
+		}
+
+		div:last-child {
+			display: none;
+		}
+	`}
 `
 
 const Menu = () => {
+	const [open, setOpen] = useState(false);
 	return (
-		<BurgerContainer>
+		<BurgerContainer open={open} onClick={() => setOpen(!open)}>
 				<MenuLine />
 				<MenuLine />
 				<MenuLine />