From 46a5c2eef3c4a64b2c719e183eba7fa76560f12b Mon Sep 17 00:00:00 2001
From: Hanz <hanz@godot.id>
Date: Fri, 19 Jan 2024 16:21:32 +0700
Subject: [PATCH] feat(Homepage): Added navbar for mobile

---
 src/components/NavBar.jsx        | 11 +++++++++-
 src/styles/components/navbar.css | 35 ++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
index 3e51c17..5b8cb21 100644
--- a/src/components/NavBar.jsx
+++ b/src/components/NavBar.jsx
@@ -4,10 +4,13 @@ import { Link } from 'react-router-dom'
 import 'styles/components/navbar.css'
 
 import { ReactComponent as GodotIDLogo } from 'misc/imgs/logo.svg'
+import { Menu, X } from 'lucide-react';
 
 const NavBar = ({ color }) => {
     if (!color) color = 'primary';
 
+    let [isClosed, setClose] = useState('navbar__closed');
+
 	return (
 		<div className={["navbar__navbar", color].join(' ')}>
 			<div className="navbar__logoWrapper">
@@ -15,7 +18,13 @@ const NavBar = ({ color }) => {
 			</div>
 			<div className="navbar__spaceWrapper">
 				<h3>Godot Indonesia</h3>
-				<div className="navbar__linksWrapper">
+                <div className="navbar__mobile">
+                    <Menu onClick={() => setClose('')}/>
+                </div>
+				<div className={"navbar__linksWrapper " + isClosed}>
+                    <div className='navbar__mobile navbar__mobile__close'>
+                        <X onClick={() => setClose('navbar__closed')} />
+                    </div>
 					<a href="#profil">Profil</a>
 					<a href="https://itch.io/jams/hosted-by-hanzceo">Kompetisi</a>
 					<Link to="/gallery">Galeri</Link>
diff --git a/src/styles/components/navbar.css b/src/styles/components/navbar.css
index 23ec233..561c3f0 100644
--- a/src/styles/components/navbar.css
+++ b/src/styles/components/navbar.css
@@ -53,5 +53,40 @@
 @media screen and (max-width: 660px) {
 	.navbar__linksWrapper {
 		display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+        background: var(--secondary-text);
+        padding: 1rem;
 	}
+
+    .navbar__mobile {
+        display: block;
+        color: var(--primary-text);
+    }
+
+    .navbar__linksWrapper:not(.navbar__closed) {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        gap: 1rem;
+    }
+
+    .navbar__linksWrapper > * {
+        height: min-content !important;
+        padding: 1rem 1rem;
+        width: 100%;
+    }
+
+    .navbar__mobile__close {
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    .navbar__closed {
+        display: none;
+    }
 }