diff --git a/src/App.js b/src/App.js index 96d88caa..30436d90 100644 --- a/src/App.js +++ b/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" /> -
- - - - - - + +
+ + + + + + +
); diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 00000000..d679e792 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/menu.svg b/src/assets/menu.svg new file mode 100644 index 00000000..e8a84a95 --- /dev/null +++ b/src/assets/menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js new file mode 100644 index 00000000..5cf5e74d --- /dev/null +++ b/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 ? ( + + ) : null; + return ( +
+ + {children} +
+ ); +}; diff --git a/src/components/Layout/layout.scss b/src/components/Layout/layout.scss new file mode 100644 index 00000000..027e4101 --- /dev/null +++ b/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; +} diff --git a/src/index.scss b/src/index.scss index a163e530..aa288bfa 100644 --- a/src/index.scss +++ b/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 */