From add41bdd1ef5b26df947f7a890c1c33e8851c3aa Mon Sep 17 00:00:00 2001
From: "guilhem.carron" <gcarron@grandlyon.com>
Date: Wed, 28 Jul 2021 10:28:40 +0200
Subject: [PATCH] Edit mobile menu
---
src/assets/icons/editing.svg | 2 +
src/assets/icons/login.svg | 2 +
src/assets/icons/settings.svg | 48 +++++++++++++++++++
src/components/DateSelector/DateSelector.tsx | 2 +-
src/components/Layout/layout.module.scss | 4 +-
.../Modal/{AlertModal.tsx => Modal.tsx} | 0
src/components/Navbar/Navbar.tsx | 32 ++++++-------
src/components/Navbar/navbar.scss | 24 ++++++++--
8 files changed, 90 insertions(+), 24 deletions(-)
create mode 100644 src/assets/icons/editing.svg
create mode 100644 src/assets/icons/login.svg
create mode 100644 src/assets/icons/settings.svg
rename src/components/Modal/{AlertModal.tsx => Modal.tsx} (100%)
diff --git a/src/assets/icons/editing.svg b/src/assets/icons/editing.svg
new file mode 100644
index 00000000..c475b8e4
--- /dev/null
+++ b/src/assets/icons/editing.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path xmlns="http://www.w3.org/2000/svg" d="m368 511.957031h-309.332031c-32.363281 0-58.667969-26.304687-58.667969-58.667969v-309.332031c0-32.363281 26.304688-58.667969 58.667969-58.667969h181.332031c8.832031 0 16 7.167969 16 16 0 8.832032-7.167969 16-16 16h-181.332031c-14.699219 0-26.667969 11.96875-26.667969 26.667969v309.332031c0 14.699219 11.96875 26.667969 26.667969 26.667969h309.332031c14.699219 0 26.667969-11.96875 26.667969-26.667969v-181.332031c0-8.832031 7.167969-16 16-16s16 7.148438 16 16v181.332031c0 32.363282-26.304688 58.667969-58.667969 58.667969zm0 0" fill="#fafafa" data-original="#000000" style="" class=""/><path xmlns="http://www.w3.org/2000/svg" d="m187.136719 340.820312c-4.203125 0-8.300781-1.664062-11.308594-4.691406-3.796875-3.777344-5.417969-9.21875-4.371094-14.445312l15.082031-75.433594c.617188-3.113281 2.152344-5.953125 4.371094-8.171875l220.953125-220.925781c22.867188-22.871094 60.074219-22.871094 82.964844 0 11.070313 11.070312 17.171875 25.792968 17.171875 41.472656s-6.101562 30.398438-17.195312 41.472656l-220.925782 220.949219c-2.21875 2.238281-5.078125 3.753906-8.171875 4.371094l-75.414062 15.082031c-1.046875.214844-2.113281.320312-3.15625.320312zm75.433593-31.082031h.214844zm-45.609374-52.457031-9.410157 47.144531 47.125-9.429687 217.515625-217.511719c5.035156-5.058594 7.808594-11.734375 7.808594-18.859375s-2.773438-13.804688-7.808594-18.859375c-10.367187-10.390625-27.285156-10.390625-37.714844 0zm0 0" fill="#fafafa" data-original="#000000" style="" class=""/><path xmlns="http://www.w3.org/2000/svg" d="m453.332031 134.976562c-4.09375 0-8.191406-1.558593-11.304687-4.695312l-60.332032-60.351562c-6.25-6.25-6.25-16.382813 0-22.632813s16.382813-6.25 22.636719 0l60.328125 60.351563c6.25 6.25 6.25 16.382812 0 22.632812-3.136718 3.117188-7.230468 4.695312-11.328125 4.695312zm0 0" fill="#fafafa" data-original="#000000" style="" class=""/></g></svg>
diff --git a/src/assets/icons/login.svg b/src/assets/icons/login.svg
new file mode 100644
index 00000000..0d21d776
--- /dev/null
+++ b/src/assets/icons/login.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path xmlns="http://www.w3.org/2000/svg" d="m512 256c0-141.488281-114.496094-256-256-256-141.488281 0-256 114.496094-256 256 0 140.234375 113.539062 256 256 256 141.875 0 256-115.121094 256-256zm-256-226c124.617188 0 226 101.382812 226 226 0 45.585938-13.558594 89.402344-38.703125 126.515625-100.96875-108.609375-273.441406-108.804687-374.59375 0-25.144531-37.113281-38.703125-80.929687-38.703125-126.515625 0-124.617188 101.382812-226 226-226zm-168.585938 376.5c89.773438-100.695312 247.421876-100.671875 337.167969 0-90.074219 100.773438-247.054687 100.804688-337.167969 0zm0 0" fill="#fafafa" data-original="#000000" style=""/><path xmlns="http://www.w3.org/2000/svg" d="m256 271c49.625 0 90-40.375 90-90v-30c0-49.625-40.375-90-90-90s-90 40.375-90 90v30c0 49.625 40.375 90 90 90zm-60-120c0-33.085938 26.914062-60 60-60s60 26.914062 60 60v30c0 33.085938-26.914062 60-60 60s-60-26.914062-60-60zm0 0" fill="#fafafa" data-original="#000000" style=""/></g></svg>
diff --git a/src/assets/icons/settings.svg b/src/assets/icons/settings.svg
new file mode 100644
index 00000000..c1f4a66d
--- /dev/null
+++ b/src/assets/icons/settings.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 477.867 477.867" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
+<g xmlns="http://www.w3.org/2000/svg">
+ <g>
+ <path d="M460.8,221.867H185.31c-9.255-36.364-46.237-58.34-82.602-49.085c-24.116,6.138-42.947,24.969-49.085,49.085H17.067 C7.641,221.867,0,229.508,0,238.934S7.641,256,17.067,256h36.557c9.255,36.364,46.237,58.34,82.602,49.085 c24.116-6.138,42.947-24.969,49.085-49.085H460.8c9.426,0,17.067-7.641,17.067-17.067S470.226,221.867,460.8,221.867z M119.467,273.067c-18.851,0-34.133-15.282-34.133-34.133c0-18.851,15.282-34.133,34.133-34.133s34.133,15.282,34.133,34.133 C153.6,257.785,138.318,273.067,119.467,273.067z" fill="#fafafa" data-original="#000000" style="" class=""/>
+ </g>
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+ <g>
+ <path d="M460.8,51.2h-53.623c-9.255-36.364-46.237-58.34-82.602-49.085C300.459,8.253,281.628,27.084,275.49,51.2H17.067 C7.641,51.2,0,58.841,0,68.267s7.641,17.067,17.067,17.067H275.49c9.255,36.364,46.237,58.34,82.602,49.085 c24.116-6.138,42.947-24.969,49.085-49.085H460.8c9.426,0,17.067-7.641,17.067-17.067S470.226,51.2,460.8,51.2z M341.334,102.4 c-18.851,0-34.133-15.282-34.133-34.133s15.282-34.133,34.133-34.133s34.133,15.282,34.133,34.133S360.185,102.4,341.334,102.4z" fill="#fafafa" data-original="#000000" style="" class=""/>
+ </g>
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+ <g>
+ <path d="M460.8,392.534h-87.757c-9.255-36.364-46.237-58.34-82.602-49.085c-24.116,6.138-42.947,24.969-49.085,49.085H17.067 C7.641,392.534,0,400.175,0,409.6s7.641,17.067,17.067,17.067h224.29c9.255,36.364,46.237,58.34,82.602,49.085 c24.116-6.138,42.947-24.969,49.085-49.085H460.8c9.426,0,17.067-7.641,17.067-17.067S470.226,392.534,460.8,392.534z M307.2,443.734c-18.851,0-34.133-15.282-34.133-34.133s15.282-34.133,34.133-34.133c18.851,0,34.133,15.282,34.133,34.133 S326.052,443.734,307.2,443.734z" fill="#fafafa" data-original="#000000" style="" class=""/>
+ </g>
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+<g xmlns="http://www.w3.org/2000/svg">
+</g>
+</g></svg>
diff --git a/src/components/DateSelector/DateSelector.tsx b/src/components/DateSelector/DateSelector.tsx
index 6387e242..8a3e4bc7 100644
--- a/src/components/DateSelector/DateSelector.tsx
+++ b/src/components/DateSelector/DateSelector.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
import './dateSelector.scss'
import leftChevron from '../../assets/icons/left-chevron.svg'
import rightChevron from '../../assets/icons/right-chevron.svg'
-import Modal from '../Modal/AlertModal'
+import Modal from '../Modal/Modal'
interface DateSelectorProps {
date: Date
diff --git a/src/components/Layout/layout.module.scss b/src/components/Layout/layout.module.scss
index 59439161..9b8b6b8e 100644
--- a/src/components/Layout/layout.module.scss
+++ b/src/components/Layout/layout.module.scss
@@ -19,7 +19,7 @@
}
.mobileNavWrapper {
position: fixed;
- top: 0;
+ bottom: 0;
left: 0;
height: $navbar-height;
width: 100%;
@@ -34,7 +34,7 @@
background: $dark-light;
@media screen and(max-width: $width-phone) {
margin-left: 0;
- margin-top: $navbar-height;
+ padding-bottom: $navbar-height;
}
main {
width: 100%;
diff --git a/src/components/Modal/AlertModal.tsx b/src/components/Modal/Modal.tsx
similarity index 100%
rename from src/components/Modal/AlertModal.tsx
rename to src/components/Modal/Modal.tsx
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index ec6161f1..a8e60e23 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -3,6 +3,9 @@ import { NavLink } from 'react-router-dom'
import routes from '../../constants/routes.json'
import burger from '../../assets/icons/menu.svg'
import logo from '../../assets/icons/ecolyo-logo.svg'
+import login from '../../assets/icons/login.svg'
+import editing from '../../assets/icons/editing.svg'
+import settings from '../../assets/icons/settings.svg'
import './navbar.scss'
@@ -10,26 +13,21 @@ const Navbar: React.FC = () => {
const [isLogged] = useState<boolean>(false)
return (
<div className="navbar">
- {/* <img src={burger} alt="Menu Icon" className="burger" /> */}
<img src={logo} alt="Ecolyo logo" className="logo" />
<div className="menu-list">
- {routes.map((route: any, index: number) => {
- return (
- <NavLink key={index} to={route.path} activeClassName="active">
- {route.label}
- </NavLink>
- )
- })}
- </div>
- <div className="administration">
- {isLogged ? (
- <p>Account</p>
- ) : (
- <NavLink to="/login" activeClassName="active">
- Login
- </NavLink>
- )}
+ <NavLink to={'/editing'} activeClassName="active">
+ <img src={editing} className="navbar-icon" alt="Editing icon" />
+ Edition
+ </NavLink>
+ <NavLink to={'/settings'} activeClassName="active">
+ <img src={settings} className="navbar-icon" alt="Settings icon" />
+ Paramètres
+ </NavLink>
+ <NavLink to="/login" activeClassName="active">
+ <img src={login} className="navbar-icon" alt="Login icon" />
+ Login
+ </NavLink>
</div>
</div>
)
diff --git a/src/components/Navbar/navbar.scss b/src/components/Navbar/navbar.scss
index 070ad66d..dc06856e 100644
--- a/src/components/Navbar/navbar.scss
+++ b/src/components/Navbar/navbar.scss
@@ -8,20 +8,36 @@
);
display: flex;
align-items: center;
+ justify-content: center;
padding: 0 1rem;
+ .menu-list {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
.burger,
.logo {
width: 2rem;
- margin-right: 1rem;
+ left: 1rem;
+ position: absolute;
}
a {
text-decoration: none;
- margin-left: 0.5rem;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ font-size: 0.9rem;
+ &:not(:first-of-type) {
+ margin-left: 1rem;
+ }
+ img {
+ margin-bottom: 0.3rem;
+ }
}
.active {
color: $gold;
}
- .administration {
- margin-left: auto;
+ .navbar-icon {
+ width: 1.3rem;
}
}
--
GitLab