maccounter
119 строк · 4.0 Кб
1import { ReactComponent as accountancySvg } from '@icons/accountancy.svg'
2import { ReactComponent as addSvg } from '@icons/add.svg'
3import { ReactComponent as homeSvg } from '@icons/home.svg'
4import { ReactComponent as settingsSvg } from '@icons/settings.svg'
5import { ReactComponent as statisticsSvg } from '@icons/statistics.svg'
6import React, { useCallback, useState } from 'react'
7import clsx from 'clsx'
8import SidebarItem from '@components/Sidebar/SidebarItem'
9import { ReactComponent as expandSvg } from '@icons/expand.svg'
10import { useAppDispatch, useAppSelector } from '@store/hooks'
11import { setModalIsActive } from '@store/app-store/appReducer'
12import { nameParser } from '@utils/stringParser'
13
14// eslint-disable-next-line css-modules/no-unused-class
15import styles from './Sidebar.module.scss'
16
17const Sidebar: React.FC = () => {
18const [isOpened, setIsOpened] = useState(false)
19const [sidebarHeight, setSidebarHeight] = useState(0)
20const [sidebarItemsWidth, setSidebarItemsWidth] = useState<number[]>([])
21let sidebarItemsMaxWidth = 24
22
23if (sidebarItemsWidth.length) {
24sidebarItemsMaxWidth = Math.max(...sidebarItemsWidth)
25}
26
27const sidebarWidths = { min: 64, max: `${sidebarItemsMaxWidth + 74}px` }
28
29const sidebarRef = useCallback((node: HTMLDivElement) => {
30if (!node) { return }
31
32setSidebarHeight(node.getBoundingClientRect().height)
33const sidebarItems = node.querySelectorAll(`.${styles.prompt}`)
34const widths: number[] = []
35
36sidebarItems.forEach((item: Element) => {
37widths.push(item.getBoundingClientRect().width)
38})
39setSidebarItemsWidth(widths)
40}, [])
41
42const sidebarStyles = {
43top: `${window.innerHeight / 2 - sidebarHeight / 2}px`,
44width: isOpened ? sidebarWidths.max : sidebarWidths.min,
45}
46
47const dispatch = useAppDispatch()
48const handleClickToProfile = () => {
49dispatch(setModalIsActive(true))
50}
51
52const links = useAppSelector((state) => state.app.links)
53
54const userFirstName = useAppSelector((state) => state.profile.firstName)
55const userSecondName = useAppSelector((state) => state.profile.secondName)
56const userInitials = nameParser(userFirstName, userSecondName)
57
58return (
59<div
60className={clsx(
61styles.sidebar,
62'component',
63{ [styles.opened]: isOpened },
64)}
65role="navigation"
66onDoubleClick={() => setIsOpened(!isOpened)}
67ref={sidebarRef}
68style={sidebarStyles}
69>
70<SidebarItem
71title="Profile"
72Ico={userInitials}
73isLinked={false}
74isSidebarOpened={isOpened}
75onClick={handleClickToProfile}
76/>
77<SidebarItem
78title="Home"
79Ico={homeSvg}
80link={links.home}
81isSidebarOpened={isOpened}
82/>
83<SidebarItem
84title="Accountancy"
85Ico={accountancySvg}
86link={links.accountancy}
87isSidebarOpened={isOpened}
88/>
89<SidebarItem
90title="Statistics"
91Ico={statisticsSvg}
92link={links.statistics}
93isSidebarOpened={isOpened}
94/>
95<SidebarItem
96title="Settings"
97Ico={settingsSvg}
98link={links.settings}
99isSidebarOpened={isOpened}
100/>
101<SidebarItem
102title="Add operation"
103Ico={addSvg}
104isLinked={false}
105isSidebarOpened={isOpened}
106/>
107<SidebarItem
108className={styles.expand}
109title="Expand sidebar"
110Ico={expandSvg}
111isSidebarOpened={isOpened}
112isLinked={false}
113onClick={() => setIsOpened(!isOpened)}
114/>
115</div>
116)
117}
118
119export default Sidebar
120