Skip to content
Snippets Groups Projects
Commit add41bdd authored by Guilhem CARRON's avatar Guilhem CARRON
Browse files

Edit mobile menu

parent dabd7f4b
No related branches found
No related tags found
2 merge requests!7feat: add front office,!1Feat/design
Hide whitespace changes
Inline Side-by-side
Showing
with 90 additions and 24 deletions
src/assets/icons/editing.svg 0 → 100644
+ 2
− 0
View file @ add41bdd
<?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>
src/assets/icons/login.svg 0 → 100644
+ 2
− 0
View file @ add41bdd
<?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>
src/assets/icons/settings.svg 0 → 100644
+ 48
− 0
View file @ add41bdd
<?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>
src/components/DateSelector/DateSelector.tsx
+ 1
− 1
View file @ add41bdd
......@@ -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
......
src/components/Layout/layout.module.scss
+ 2
− 2
View file @ add41bdd
......@@ -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%;
......
src/components/Navbar/Navbar.tsx
+ 15
− 17
View file @ add41bdd
......@@ -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>
)
......
src/components/Navbar/navbar.scss
+ 20
− 4
View file @ add41bdd
......@@ -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;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment