Burger menu logic & stuff

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 />