feat(Homepage): Added navbar for mobile

GodotID · Jan 19, 2024 · 46a5c2e · 46a5c2e
1 parent 751b0b7
commit 46a5c2e
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 1 deletion.
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
@@ -4,18 +4,27 @@ 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">
 				<GodotIDLogo style={{ fill: "var(--primary-text)" }} />
 			</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
@@ -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;
+    }
 }