✨ Created navbar
This commit is contained in:
+1
-1
@@ -5,7 +5,7 @@
|
|||||||
"jsxSingleQuote": true,
|
"jsxSingleQuote": true,
|
||||||
"singleQuote": true,
|
"singleQuote": true,
|
||||||
"singleAttributePerLine": true,
|
"singleAttributePerLine": true,
|
||||||
"arrowParens": "avoid",
|
"arrowParens": "always",
|
||||||
"trailingComma": "es5",
|
"trailingComma": "es5",
|
||||||
"semi": true
|
"semi": true
|
||||||
}
|
}
|
||||||
|
|||||||
+5
-1
@@ -1,5 +1,6 @@
|
|||||||
import { Inter } from 'next/font/google';
|
import { Inter } from 'next/font/google';
|
||||||
import './globals.scss';
|
import './globals.scss';
|
||||||
|
import Navbar from '@/components/Navbar/Navbar';
|
||||||
|
|
||||||
const inter = Inter({ subsets: ['latin'] });
|
const inter = Inter({ subsets: ['latin'] });
|
||||||
|
|
||||||
@@ -10,7 +11,10 @@ export const metadata = {
|
|||||||
const RootLayout = ({ children }) => {
|
const RootLayout = ({ children }) => {
|
||||||
return (
|
return (
|
||||||
<html lang='fr'>
|
<html lang='fr'>
|
||||||
<body className={inter.className}>{children}</body>
|
<body className={inter.className}>
|
||||||
|
{children}
|
||||||
|
<Navbar />
|
||||||
|
</body>
|
||||||
</html>
|
</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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user