74 lines
3.5 KiB
TypeScript
74 lines
3.5 KiB
TypeScript
import React from 'react';
|
||
import { useNavigate, useLocation } from 'react-router-dom';
|
||
import styles from './Navigation.module.css';
|
||
|
||
const NavigationComponent: React.FC = () => {
|
||
const navigate = useNavigate();
|
||
const location = useLocation();
|
||
|
||
const isActive = (path: string) => location.pathname === path;
|
||
|
||
return (
|
||
<nav className={styles.nav}>
|
||
<div className={styles.container}>
|
||
<div className={styles.list}>
|
||
<button
|
||
onClick={() => navigate('/')}
|
||
className={`${styles.item} ${isActive('/') ? styles.active : ''}`}
|
||
>
|
||
<span className={styles.icon}>
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M4 10l8-6 8 6v10a2 2 0 01-2 2H6a2 2 0 01-2-2V10z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||
<path d="M9 22V12h6v10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||
</svg>
|
||
</span>
|
||
<span className={styles.label}>Главная</span>
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => navigate('/gallery')}
|
||
className={`${styles.item} ${isActive('/gallery') ? styles.active : ''}`}
|
||
>
|
||
<span className={styles.icon}>
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||
<circle cx="8.5" cy="8.5" r="1.5" fill="currentColor"/>
|
||
<path d="M20 16l-4-4L6 20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||
</svg>
|
||
</span>
|
||
<span className={styles.label}>Галерея</span>
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => navigate('/packs')}
|
||
className={`${styles.item} ${isActive('/packs') ? styles.active : ''}`}
|
||
>
|
||
<span className={styles.icon}>
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M20 16V8a2 2 0 00-1-1.73l-6-3.45a2 2 0 00-2 0l-6 3.45A2 2 0 004 8v8a2 2 0 001 1.73l6 3.45a2 2 0 002 0l6-3.45A2 2 0 0020 16z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||
<path d="M4 8l8 4 8-4M12 12v8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||
</svg>
|
||
</span>
|
||
<span className={styles.label}>Стикерпаки</span>
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => navigate('/profile')}
|
||
className={`${styles.item} ${isActive('/profile') ? styles.active : ''}`}
|
||
>
|
||
<span className={styles.icon}>
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||
<circle cx="12" cy="7" r="4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||
</svg>
|
||
</span>
|
||
<span className={styles.label}>Профиль</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
);
|
||
};
|
||
|
||
export default NavigationComponent;
|