From 1fde514aaf7f365c44f57173d3757f7b1bd341ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Un=20=C3=89picier?= Date: Tue, 3 Sep 2024 19:01:03 +0200 Subject: [PATCH] :sparkles: Created navbar --- .prettierrc | 2 +- app/layout.jsx | 6 ++++- assets/AccountIcon.jsx | 27 ++++++++++++++++++++++ assets/HeartIcon.jsx | 20 ++++++++++++++++ assets/MapIcon.jsx | 20 ++++++++++++++++ assets/PeopleIcon.jsx | 43 +++++++++++++++++++++++++++++++++++ components/Navbar/Navbar.jsx | 34 +++++++++++++++++++++++++++ components/Navbar/config.js | 29 +++++++++++++++++++++++ components/Navbar/styles.scss | 39 +++++++++++++++++++++++++++++++ 9 files changed, 218 insertions(+), 2 deletions(-) create mode 100644 assets/AccountIcon.jsx create mode 100644 assets/HeartIcon.jsx create mode 100644 assets/MapIcon.jsx create mode 100644 assets/PeopleIcon.jsx create mode 100644 components/Navbar/Navbar.jsx create mode 100644 components/Navbar/config.js create mode 100644 components/Navbar/styles.scss diff --git a/.prettierrc b/.prettierrc index bff3953..604a6ba 100644 --- a/.prettierrc +++ b/.prettierrc @@ -5,7 +5,7 @@ "jsxSingleQuote": true, "singleQuote": true, "singleAttributePerLine": true, - "arrowParens": "avoid", + "arrowParens": "always", "trailingComma": "es5", "semi": true } diff --git a/app/layout.jsx b/app/layout.jsx index 7920590..476837d 100644 --- a/app/layout.jsx +++ b/app/layout.jsx @@ -1,5 +1,6 @@ import { Inter } from 'next/font/google'; import './globals.scss'; +import Navbar from '@/components/Navbar/Navbar'; const inter = Inter({ subsets: ['latin'] }); @@ -10,7 +11,10 @@ export const metadata = { const RootLayout = ({ children }) => { return ( - {children} + + {children} + + ); }; diff --git a/assets/AccountIcon.jsx b/assets/AccountIcon.jsx new file mode 100644 index 0000000..836b616 --- /dev/null +++ b/assets/AccountIcon.jsx @@ -0,0 +1,27 @@ +const AccountIcon = (props) => { + return ( + + + + + ); +}; + +export default AccountIcon; diff --git a/assets/HeartIcon.jsx b/assets/HeartIcon.jsx new file mode 100644 index 0000000..8f57e4d --- /dev/null +++ b/assets/HeartIcon.jsx @@ -0,0 +1,20 @@ +const HeartIcon = (props) => { + return ( + + + + ); +}; + +export default HeartIcon; diff --git a/assets/MapIcon.jsx b/assets/MapIcon.jsx new file mode 100644 index 0000000..f56c4be --- /dev/null +++ b/assets/MapIcon.jsx @@ -0,0 +1,20 @@ +const MapIcon = (props) => { + return ( + + + + ); +}; + +export default MapIcon; diff --git a/assets/PeopleIcon.jsx b/assets/PeopleIcon.jsx new file mode 100644 index 0000000..589c4f9 --- /dev/null +++ b/assets/PeopleIcon.jsx @@ -0,0 +1,43 @@ +const PeopleIcon = (props) => { + return ( + + + + + + + ); +}; + +export default PeopleIcon; diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx new file mode 100644 index 0000000..7ba18d2 --- /dev/null +++ b/components/Navbar/Navbar.jsx @@ -0,0 +1,34 @@ +'use client'; + +import Link from 'next/link'; +import config from './config'; +import './styles.scss'; +import { usePathname } from 'next/navigation'; + +const Navbar = () => { + const pathname = usePathname(); + + return ( + + ); +}; + +export default Navbar; diff --git a/components/Navbar/config.js b/components/Navbar/config.js new file mode 100644 index 0000000..64d5750 --- /dev/null +++ b/components/Navbar/config.js @@ -0,0 +1,29 @@ +import AccountIcon from '@/assets/AccountIcon'; +import HeartIcon from '@/assets/HeartIcon'; +import MapIcon from '@/assets/MapIcon'; +import PeopleIcon from '@/assets/PeopleIcon'; + +const config = [ + { + title: 'Carte', + link: '/', + icon: MapIcon, + }, + { + title: 'Mes loves', + link: '/my-loves', + icon: HeartIcon, + }, + { + title: 'Partenaire', + link: '/partner', + icon: PeopleIcon, + }, + { + title: 'Compte', + link: '/account', + icon: AccountIcon, + }, +]; + +export default config; diff --git a/components/Navbar/styles.scss b/components/Navbar/styles.scss new file mode 100644 index 0000000..d078b8a --- /dev/null +++ b/components/Navbar/styles.scss @@ -0,0 +1,39 @@ +.navbar { + $navSize: 60px; + position: fixed; + bottom: 0; + left: 0; + display: grid; + justify-items: center; + align-items: center; + width: 100svw; + height: $navSize; + background-color: #d94253; + + & > .navButton { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 5px; + width: $navSize; + height: $navSize; + border-radius: 50%; + background-color: #d94253; + color: #ffffff; + + & > svg { + width: $navSize / 2.5; + } + + &.selected { + margin-top: $navSize / -2; + scale: 1.2; + } + + & > .navButtonLabel { + font-size: 0.7rem; + color: #ffffff; + } + } +}