feat: init Layout and main component without style

src/App.tsx

 import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
+import Layout from './components/Layout/Layout'
 import Routes from './components/Routes/Routes'
 
 function App() {
   return (
-    <BrowserRouter>
-      <Routes />
-    </BrowserRouter>
+    <Layout>
+      <BrowserRouter>
+        <Routes />
+      </BrowserRouter>
+    </Layout>
   )
 }
 

src/components/Editing/Editing.tsx

+import React from 'react'
+
+const Editing: React.FC = () => {
+  return <div>Coming soon !</div>
+}
+
+export default Editing

src/components/Layout/Layout.tsx

+import React from 'react'
+import styles from './layout.module.scss'
+import Menu from '../Menu/Menu'
+import Navbar from '../Navbar/Navbar'
+
+interface LayoutProps {
+  children: React.ReactNode
+}
+
+const Layout: React.FC<LayoutProps> = ({ children }: LayoutProps) => {
+  return (
+    <div className={styles.root}>
+      <Navbar />
+      <div className={styles.wrapper}>
+        <Menu />
+        <main>{children}</main>
+      </div>
+    </div>
+  )
+}
+
+export default Layout

src/components/Layout/layout.module.scss

+.root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  main {
+    flex: 1;
+  }
+}

src/components/Menu/Menu.tsx

+import React from 'react'
+import routes from '../../constants/routes.json'
+
+const Menu: React.FC = () => {
+  // TODO class is-active if link is activated
+
+  return (
+    <aside className="menu">
+      <ul className="menu-list">
+        {routes.map((route: any, index: number) => {
+          return (
+            <li key={index}>
+              <a href={route.path}>{route.label}</a>
+            </li>
+          )
+        })}
+      </ul>
+    </aside>
+  )
+}
+
+export default Menu

src/components/Navbar/Navbar.tsx

+import React from 'react'
+import logo from '../../assets/icons/logo.png'
+
+const Navbar: React.FC = () => {
+  return (
+    <nav className="navbar" role="navigation" aria-label="main navigation">
+      <div className="navbar-brand">
+        <img src={logo} alt="Ecolyo logo" />
+        <div className="navbar-menu">
+          <div className="navbar-start"></div>
+          <div className="navbar-end">
+            <div className="navbar-item">
+              <div className="buttons">
+                <a href="/" className="button is-primary">
+                  <strong>Sign up</strong>
+                </a>
+                <a href="/" className="button is-light">
+                  Log in
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default Navbar

src/components/Routes/Routes.tsx

 import React from 'react'
 import { Redirect, Route, Switch } from 'react-router-dom'
-import Dummy from '../dummy/Dummy'
-import Dummy2 from '../dummy/Dummy2'
+import Editing from '../Editing/Editing'
+import Settings from '../Settings/Settings'
 
 const Routes: React.FC = () => {
   return (
     <Switch>
-      <Route path="/dummy" component={Dummy} />
-      <Route path="/dummy2" component={Dummy2} />
-      <Redirect path="*" to="/dummy" />
+      <Route path="/editing" component={Editing} />
+      <Route path="/settings" component={Settings} />
+      <Redirect path="*" to="/editing" />
     </Switch>
   )
 }

src/components/Settings/Settings.tsx

+import React from 'react'
+
+const Settings: React.FC = () => {
+  return <div>A venir</div>
+}
+
+export default Settings

src/components/dummy/Dummy.tsx

-import React from 'react'
-import styles from './dummy.module.scss'
-
-const Dummy: React.FC = () => {
-  return (
-    <div className={styles.root}>
-      <section>
-        <article>It is a dummy article</article>
-        <article>It is a second dummy article</article>
-      </section>
-    </div>
-  )
-}
-
-export default Dummy

src/components/dummy/Dummy2.tsx

-import React from 'react'
-import styles from './dummy2.module.scss'
-
-const Dummy2: React.FC = () => {
-  return (
-    <div className={styles.root}>
-      <section>
-        <article>It is a dummy article</article>
-        <article>It is a second dummy article</article>
-      </section>
-    </div>
-  )
-}
-
-export default Dummy2

src/components/dummy/dummy.module.scss

-.root {
-  display: flex;
-  section {
-    color: aqua;
-  }
-}

src/components/dummy/dummy2.module.scss

-.root {
-  display: flex;
-  section {
-    color: yellow;
-  }
-}

src/constants/routes.json

+[
+  {
+    "label": "Edition",
+    "path": "/editing"
+  },
+  {
+    "label": "Paramètres",
+    "path": "/settings"
+  }
+]

src/styles/index.scss

@@ -4,3 +4,9 @@
 
 // To customize bulma variables, we set them before importing bulma
 @import 'bulma/bulma.sass';
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}