✨ Created navbar

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 (
+		<nav
+			className='navbar'
+			style={{
+				gridTemplateColumns: `repeat(${config.length}, 1fr)`,
+			}}
+		>
+			{config.map((element) => (
+				<Link
+					key={element.title}
+					href={element.link}
+					className={`navButton ${
+						element.link == pathname ? 'selected' : ''
+					}`}
+				>
+					{element.icon()}
+					<span className='navButtonLabel'>{element.title}</span>
+				</Link>
+			))}
+		</nav>
+	);
+};
+
+export default Navbar;

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;

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