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;
+ }
+ }
+}