diff --git a/src/assets/icons/tabbar/profile/off.svg b/src/assets/icons/tabbar/profile/off.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4fc19edd02653eb34830cac2f699a3cb5a17cfe7
--- /dev/null
+++ b/src/assets/icons/tabbar/profile/off.svg
@@ -0,0 +1,4 @@
+<svg width="64" height="36" viewBox="0 0 64 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="31.5" cy="15.5" r="6" stroke="#ABABAB"/>
+<path d="M26.3256 22.6206L26.1536 22.4729L25.9292 22.505C24.0866 22.7686 22.7128 23.7203 21.8109 25.0837C20.9172 26.4346 20.5 28.1667 20.5 30V31V31.3904L20.8787 31.485L21 31C20.8787 31.485 20.8788 31.4851 20.879 31.4851L20.8793 31.4852L20.8802 31.4854L20.8831 31.4861L20.8933 31.4886L20.9311 31.4977C20.964 31.5055 21.0122 31.5167 21.0753 31.5309C21.2015 31.5591 21.3874 31.5991 21.63 31.6468C22.1154 31.7423 22.8279 31.8689 23.7442 31.9953C25.5765 32.248 28.2245 32.5 31.5 32.5C34.7755 32.5 37.4235 32.248 39.2558 31.9953C40.1721 31.8689 40.8846 31.7423 41.37 31.6468C41.6126 31.5991 41.7985 31.5591 41.9247 31.5309C41.9878 31.5167 42.036 31.5055 42.0689 31.4977L42.1067 31.4886L42.1169 31.4861L42.1198 31.4854L42.1207 31.4852L42.121 31.4851C42.1212 31.4851 42.1213 31.485 42 31L42.1213 31.485L42.5 31.3904V31V30C42.5 28.1667 42.0828 26.4346 41.1891 25.0837C40.2872 23.7203 38.9134 22.7686 37.0708 22.505L36.8816 22.478L36.7226 22.584C36.4258 22.7819 36.1612 22.9836 35.9205 23.1671C35.8447 23.2249 35.7713 23.2809 35.7 23.3344C35.3955 23.5628 35.1112 23.7604 34.7764 23.9278C34.1181 24.2569 33.2019 24.5 31.5 24.5C29.6215 24.5 27.5528 23.6738 26.3256 22.6206Z" stroke="#ABABAB"/>
+</svg>
diff --git a/src/assets/icons/tabbar/profile/on.svg b/src/assets/icons/tabbar/profile/on.svg
new file mode 100644
index 0000000000000000000000000000000000000000..03291d21d107f6390afb0f9e021b25496fca624a
--- /dev/null
+++ b/src/assets/icons/tabbar/profile/on.svg
@@ -0,0 +1,4 @@
+<svg width="64" height="36" viewBox="0 0 64 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="31.5" cy="15.5" r="5.5" fill="#E3B82A"/>
+<path d="M21 30C21 26.4735 22.6077 23.4852 26 23C27.3163 24.1296 29.5 25 31.5 25C35 25 35.5 24 37 23C40.3923 23.4852 42 26.4735 42 30V31C42 31 38 32 31.5 32C25 32 21 31 21 31V30Z" fill="#E3B82A"/>
+</svg>
diff --git a/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx
index a4b973251c128e001891585a7cfe2d2c2f63a978..5d1854bcd01f2bba5edab212b7ec7b4c96221556 100644
--- a/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx
@@ -21,7 +21,6 @@ const ParametersViewContainer: React.FC = () => {
></Header>
<Content height={headerHeight}>
<FAQContainer />
- <KonnectorViewerContainer isParam={true} />
<LegalNoticeContainer />
<Version />
</Content>
diff --git a/src/components/ContainerComponents/ViewContainer/ProfileViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/ProfileViewContainer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..339158a24795ae9e8189fd1a9b7c0a4430813ba6
--- /dev/null
+++ b/src/components/ContainerComponents/ViewContainer/ProfileViewContainer.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
+import Header from 'components/ContainerComponents/Header/Header'
+import Content from 'components/ContainerComponents/Content/Content'
+import KonnectorViewerContainer from 'components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer'
+
+const ProfileViewContainer: React.FC = () => {
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+ const defineHeaderHeight = (height: number) => {
+ setHeaderHeight(height)
+ }
+ return (
+ <>
+ <CozyBar titleKey={'COMMON.APP_PARAMETERS_TITLE'} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'COMMON.APP_PARAMETERS_TITLE'}
+ ></Header>
+ <Content height={headerHeight}>
+ <KonnectorViewerContainer isParam={true} />
+ </Content>
+ </>
+ )
+}
+
+export default ProfileViewContainer
diff --git a/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
index d2f2184cbb710559f2fed8b43d6a8ec18f9d8234..9ddce6b16d0b543ba90d86b57c050c283a466a69 100644
--- a/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
@@ -20,6 +20,7 @@ import AvailableChallengeDetailsViewContainer from './AvailableChallengeDetailsV
import SplashContainer from 'components/ContainerComponents/SplashContainer/SplashContainer'
import LegalNoticeViewContainer from './LegalNoticeViewContainer'
import FeedbackContainer from 'components/ContainerComponents/FeedbackContainer/FeedbackContainer'
+import ProfileViewContainer from './ProfileViewContainer'
export const history = createBrowserHistory()
@@ -118,6 +119,18 @@ export const ViewContainer = () => {
</>
)}
/>
+ <Route
+ path="/profile"
+ render={({ match: { url } }) => (
+ <>
+ <Route
+ path={`${url}/`}
+ component={ProfileViewContainer}
+ exact
+ />
+ </>
+ )}
+ />
<Route path="/splash" component={SplashContainer} />
<Redirect from="/" to="/consumption" />
<Redirect from="*" to="/consumption" />
diff --git a/src/components/ContentComponents/Navbar/Navbar.tsx b/src/components/ContentComponents/Navbar/Navbar.tsx
index e6f6047774cffeebfad0b4d42d705aa4b9c95c8d..4cc276017ab15801a18e7760416af14e5a438e48 100644
--- a/src/components/ContentComponents/Navbar/Navbar.tsx
+++ b/src/components/ContentComponents/Navbar/Navbar.tsx
@@ -10,6 +10,8 @@ import ChallengeIconOff from 'assets/icons/tabbar/defi/off.svg'
import ParameterIconOff from 'assets/icons/tabbar/parametre/off.svg'
import ConsoIconOn from 'assets/icons/tabbar/conso/on.svg'
import ParameterIconOn from 'assets/icons/tabbar/parametre/on.svg'
+import ProfileIconOn from 'assets/icons/tabbar/profile/on.svg'
+import ProfileIconOff from 'assets/icons/tabbar/profile/off.svg'
import logoGrandLyon from 'assets/icons/tabbar/grand-lyon.svg'
interface NavbarProps {
@@ -48,6 +50,17 @@ export const Navbar = ({ t }: NavbarProps) => {
</NavLink>
</li>
+ <li className="c-nav-item">
+ <NavLink
+ to="/profile"
+ className="c-nav-link"
+ activeClassName="is-active"
+ >
+ <Icon className="c-nav-icon off" icon={ProfileIconOff} />
+ <Icon className="c-nav-icon on" icon={ProfileIconOn} />
+ {t('Nav.profile')}
+ </NavLink>
+ </li>
<li className="c-nav-item">
<NavLink
to="/parameters"
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 032de073e7987a91ed95d4f25c4d88075b846707..c6e5712025f45851e3d8e837d52c54395d69416c 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -13,6 +13,7 @@
"ECOGESTURES": "Ecogestes",
"BADGES": "Badges",
"parameters": "Options",
+ "profile": "Profil",
"connectors": "connecteurs",
"graphs": "graphes"
},
diff --git a/src/styles/components/_nav.scss b/src/styles/components/_nav.scss
index 1c3d2dc6fe710934dffffb019f8912fab3a3042c..5d12b45c7c623c60b8f0c6289f2ace1b9b6bdab4 100644
--- a/src/styles/components/_nav.scss
+++ b/src/styles/components/_nav.scss
@@ -7,13 +7,7 @@
0px 8px 10px rgba(0, 0, 0, 0.14);
border-top: unset;
border-right: unset;
- // justify-content: flex-end;
z-index: 19;
- // position: fixed;
- // bottom: 0;
- // left: 0;
- // display: block;
- // width: 100%;
@media #{$tablet} {
background-color: $primary-color;
}
@@ -28,6 +22,7 @@
}
.c-nav-link {
padding: 0 1rem;
+ font-size: 0.9rem;
.on {
display: none;
}
@@ -40,10 +35,20 @@
// display: flex;
// list-style: none;
// justify-content: space-around;
+// height: 56px;
+// align-items: center;
// }
+@media #{$tablet} {
+ .c-nav-item {
+ height: 54px;
+ margin-top: -0.3rem;
+ padding: 0rem 0 0.8rem 0;
+ }
+}
+
.c-nav-link .c-nav-icon {
padding-right: 0.5rem;
- width: 50px;
+ width: 60px;
height: 36px;
fill: none;
}