✨ Created navbar

2024-09-03 19:01:03 +02:00
parent a4d77952de
commit 1fde514aaf
9 changed files with 218 additions and 2 deletions
@@ -5,7 +5,7 @@
 	"jsxSingleQuote": true,
 	"singleQuote": true,
 	"singleAttributePerLine": true,
-	"arrowParens": "avoid",
+	"arrowParens": "always",
 	"trailingComma": "es5",
 	"semi": true
 }
@@ -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 (
 		<html lang='fr'>
-			<body className={inter.className}>{children}</body>
+			<body className={inter.className}>
+				{children}
+				<Navbar />
+			</body>
 		</html>
 	);
 };
@@ -0,0 +1,27 @@
+const AccountIcon = (props) => {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			{...props}
+		>
+			<path
+				d='M344 144c-3.92 52.87-44 96-88 96s-84.15-43.12-88-96c-4-55 35-96 88-96s92 42 88 96z'
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+			/>
+			<path
+				d='M256 304c-87 0-175.3 48-191.64 138.6C62.39 453.52 68.57 464 80 464h352c11.44 0 17.62-10.48 15.65-21.4C431.3 352 343 304 256 304z'
+				fill='none'
+				stroke='currentColor'
+				strokeMiterlimit='10'
+				strokeWidth='32'
+			/>
+		</svg>
+	);
+};
+
+export default AccountIcon;
@@ -0,0 +1,20 @@
+const HeartIcon = (props) => {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			{...props}
+		>
+			<path
+				d='M352.92 80C288 80 256 144 256 144s-32-64-96.92-64c-52.76 0-94.54 44.14-95.08 96.81-1.1 109.33 86.73 187.08 183 252.42a16 16 0 0018 0c96.26-65.34 184.09-143.09 183-252.42-.54-52.67-42.32-96.81-95.08-96.81z'
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+			/>
+		</svg>
+	);
+};
+
+export default HeartIcon;
@@ -0,0 +1,20 @@
+const MapIcon = (props) => {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			{...props}
+		>
+			<path
+				d='M313.27 124.64L198.73 51.36a32 32 0 00-29.28.35L56.51 127.49A16 16 0 0048 141.63v295.8a16 16 0 0023.49 14.14l97.82-63.79a32 32 0 0129.5-.24l111.86 73a32 32 0 0029.27-.11l115.43-75.94a16 16 0 008.63-14.2V74.57a16 16 0 00-23.49-14.14l-98 63.86a32 32 0 01-29.24.35zM328 128v336M184 48v336'
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+			/>
+		</svg>
+	);
+};
+
+export default MapIcon;
@@ -0,0 +1,43 @@
+const PeopleIcon = (props) => {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			{...props}
+		>
+			<path
+				d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z'
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+			/>
+			<path
+				d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z'
+				fill='none'
+				stroke='currentColor'
+				strokeMiterlimit='10'
+				strokeWidth='32'
+			/>
+			<path
+				d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z'
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+			/>
+			<path
+				d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154'
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeMiterlimit='10'
+				strokeWidth='32'
+			/>
+		</svg>
+	);
+};
+
+export default PeopleIcon;
@@ -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;
@@ -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;
@@ -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;
+		}
+	}
+}