feat: implement a simple layout & menu system

src/App.js

@@ -1,8 +1,9 @@
 import React from "react";
 import { Helmet } from "react-helmet";
-import { Link, Router } from "@reach/router";
+import { Router } from "@reach/router";
 import "./App.css";
 
+import Layout from "./components/Layout";
 import Home from "./pages/Home";
 import Event from "./pages/Event";
 import Events from "./pages/Events";
@@ -18,16 +19,15 @@ function App() {
           content="An open forum for geeks to connect, discuss & learn latest ideas, technologies and trends in software development"
         />
       </Helmet>
-      <div class="app-container">
-        <nav>
-          <Link to="/">Home</Link> | <Link to="/events">Events</Link> |{" "}
-          <Link to="/events/123">Event</Link>
-        </nav>
-        <Router>
-          <Home path="/" />
-          <Events path="/events" />
-          <Event path="/events/:eventId" />
-        </Router>
+
+      <div className="app-container">
+        <Layout>
+          <Router>
+            <Home path="/" />
+            <Events path="/events" />
+            <Event path="/events/:eventId" />
+          </Router>
+        </Layout>
       </div>
     </>
   );

src/components/Layout/index.js

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import { Link } from "@reach/router";
+
+import "./layout.scss";
+import logo from "../../assets/logo.svg";
+import menu from "../../assets/menu.svg";
+
+const isPartiallyActive = ({ isPartiallyCurrent }) => {
+  return isPartiallyCurrent ? { className: "active" } : {};
+};
+const isActive = ({ isCurrent }) => {
+  return isCurrent ? { className: "active" } : {};
+};
+
+export default ({ children }) => {
+  const [menuState, setMenuState] = useState(false);
+  const toggleMenu = () => setMenuState(!menuState);
+
+  const Menu = menuState ? (
+    <ul className="menu">
+      <Link getProps={isActive} to="/">
+        <li>Home</li>
+      </Link>
+      <Link getProps={isPartiallyActive} to="/events">
+        <li>Events</li>
+      </Link>
+    </ul>
+  ) : null;
+  return (
+    <div className="layout">
+      <nav>
+        <div className="topbar">
+          <Link to="/">
+            <img className="logo" src={logo} alt="GeekNight Logo" />
+          </Link>
+          <div className="menu-toggle" onClick={toggleMenu}>
+            <span>
+              <b>Menu</b>
+            </span>
+            <img src={menu} alt="Menu icon" />
+          </div>
+        </div>
+        {Menu}
+      </nav>
+      {children}
+    </div>
+  );
+};

src/components/Layout/layout.scss

@@ -0,0 +1,42 @@
+body {
+  background: red;
+}
+
+nav {
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-start;
+  min-height: 60px;
+  background: white;
+}
+
+.topbar {
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  margin: 15px;
+}
+
+.logo {
+  height: 40px;
+}
+.menu-toggle {
+  margin: auto 0;
+}
+.menu-toggle:hover {
+  cursor: pointer;
+}
+
+.menu-toggle img {
+  margin: 0;
+  display: inline-block;
+  vertical-align: middle;
+}
+.menu-toggle span {
+  vertical-align: middle;
+  margin-right: 5px;
+}
+
+.active {
+  color: blueviolet;
+}

src/index.scss

@@ -1,3 +1,2 @@
 @import-normalize; /* bring in normalize.css styles */
-@import '~bulma/css/bulma.css'; /* import our bulma css framework */
-
+@import "~bulma/css/bulma.css"; /* import our bulma css framework */