diff --git a/src/App.tsx b/src/App.tsx
index e0306a8946204b032c04e5a31e827b15327cbe63..ed7869cca1cc27b3b8b83e62d411d7ad4f2dac5e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,15 @@
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>
)
}
diff --git a/src/assets/icons/logo.png b/src/assets/icons/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e9f08491e80c9b5b19817c83ab15140f032525a
Binary files /dev/null and b/src/assets/icons/logo.png differ
diff --git a/src/components/Editing/Editing.tsx b/src/components/Editing/Editing.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..866a251523d4548a8d36d62a02978c99ccf36a59
--- /dev/null
+++ b/src/components/Editing/Editing.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Editing: React.FC = () => {
+ return <div>Coming soon !</div>
+}
+
+export default Editing
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..72e3772cece6ead1f6064b3f20c9f59aa13e3741
--- /dev/null
+++ b/src/components/Layout/Layout.tsx
@@ -0,0 +1,22 @@
+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
diff --git a/src/components/Layout/layout.module.scss b/src/components/Layout/layout.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3f0e2345974cbe408b1bb7d5df4ffe2fae34a2fd
--- /dev/null
+++ b/src/components/Layout/layout.module.scss
@@ -0,0 +1,14 @@
+.root {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+.wrapper {
+ display: flex;
+ flex-direction: row;
+ flex: 1;
+ main {
+ flex: 1;
+ }
+}
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1013998cd04523f1030858c71536205684f74add
--- /dev/null
+++ b/src/components/Menu/Menu.tsx
@@ -0,0 +1,22 @@
+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
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d57154afe67e3304b4f74c7507e7d04b792b6ba1
--- /dev/null
+++ b/src/components/Navbar/Navbar.tsx
@@ -0,0 +1,29 @@
+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
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index 21ba5f8829372ef057389a002f3c120c8d8cfafe..99bb4c66a812ab022b74bcaac295050595082d4b 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -1,14 +1,14 @@
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>
)
}
diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..30cfca082884b42997bbed1cb1c6ced7907a8719
--- /dev/null
+++ b/src/components/Settings/Settings.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Settings: React.FC = () => {
+ return <div>A venir</div>
+}
+
+export default Settings
diff --git a/src/components/dummy/Dummy.tsx b/src/components/dummy/Dummy.tsx
deleted file mode 100644
index e5a7480cdf13accece72654bab93c8ecf514ca71..0000000000000000000000000000000000000000
--- a/src/components/dummy/Dummy.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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
diff --git a/src/components/dummy/Dummy2.tsx b/src/components/dummy/Dummy2.tsx
deleted file mode 100644
index c8df13622b406917b665251015edf143c67a8246..0000000000000000000000000000000000000000
--- a/src/components/dummy/Dummy2.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-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
diff --git a/src/components/dummy/dummy.module.scss b/src/components/dummy/dummy.module.scss
deleted file mode 100644
index fa413ce0e9c6439e59459ceacee4bce28c73c57b..0000000000000000000000000000000000000000
--- a/src/components/dummy/dummy.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.root {
- display: flex;
- section {
- color: aqua;
- }
-}
diff --git a/src/components/dummy/dummy2.module.scss b/src/components/dummy/dummy2.module.scss
deleted file mode 100644
index f718c348c7e147eb6e9d95d4e4db883f0505867d..0000000000000000000000000000000000000000
--- a/src/components/dummy/dummy2.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.root {
- display: flex;
- section {
- color: yellow;
- }
-}
diff --git a/src/constants/routes.json b/src/constants/routes.json
new file mode 100644
index 0000000000000000000000000000000000000000..21414496797dd4d776127b0dda9b5ba1e32290a4
--- /dev/null
+++ b/src/constants/routes.json
@@ -0,0 +1,10 @@
+[
+ {
+ "label": "Edition",
+ "path": "/editing"
+ },
+ {
+ "label": "Paramètres",
+ "path": "/settings"
+ }
+]
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 8740006ac62781c8f7d42acd901eb3f87d3992bf..69bb90e0804fbd41aaefd47154e2821962bd1307 100644
--- a/src/styles/index.scss
+++ b/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;
+}