burger-online

1
import {
2
  BurgerIcon,
3
  ListIcon,
4
  Logo,
5
  ProfileIcon,
6
} from '@ya.praktikum/react-developer-burger-ui-components'
7
import {useSelector} from 'react-redux'
8
import {Link, useLocation, useMatch} from 'react-router-dom'
9
import {userStore} from '../../redux/user/slice'
10
import styles from './app-header.module.css'
11

12
const AppHeader = () => {
13
  const {pathname} = useLocation()
14
  const {user} = useSelector(userStore)
15

16
  const isHome = useMatch('/')
17
  const isProfile = useMatch('/profile')
18
  const isFeed = useMatch('/feed')
19

20
  const isClassLinkHome = `text text_type_main-default ${pathname !== '/' ? 'text_color_inactive' : ''}`
21
  const isClassLinkProfile = `text text_type_main-default ${
22
    pathname !== '/profile' ? 'text_color_inactive' : ''
23
  }`
24
  const isClassLinkFeed = `text text_type_main-default ${
25
    pathname !== '/feed' ? 'text_color_inactive' : ''
26
  }`
27
  return (
28
    <header className={styles.header}>
29
      <nav className={styles.nav}>
30
        <div className={styles.links}>
31
          <Link to='/' className={styles.link} state={{from: {pathname}}}>
32
            <BurgerIcon type={isHome ? 'primary' : 'secondary'} />
33
            <p className={isClassLinkHome}>Конструктор</p>
34
          </Link>
35

36
          <Link to='/feed' className={styles.link} state={{from: {pathname}}}>
37
            <ListIcon type={isFeed ? 'primary' : 'secondary'} />
38
            <p className={isClassLinkFeed}>Лента заказов</p>
39
          </Link>
40
        </div>
41

42
        <Link to='/' className={styles.logo}>
43
          <Logo />
44
        </Link>
45

46
        <Link to='/profile' className={styles.profileLink} state={{from: {pathname}}}>
47
          <ProfileIcon type={isProfile ? 'primary' : 'secondary'} />
48
          <p className={isClassLinkProfile}>{user ? user.name : 'Личный кабинет'}</p>
49
        </Link>
50
      </nav>
51
    </header>
52
  )
53
}
54

55
export default AppHeader
56