maccounter

1
import { ReactComponent as accountancySvg } from '@icons/accountancy.svg'
2
import { ReactComponent as addSvg } from '@icons/add.svg'
3
import { ReactComponent as homeSvg } from '@icons/home.svg'
4
import { ReactComponent as settingsSvg } from '@icons/settings.svg'
5
import { ReactComponent as statisticsSvg } from '@icons/statistics.svg'
6
import React, { useCallback, useState } from 'react'
7
import clsx from 'clsx'
8
import SidebarItem from '@components/Sidebar/SidebarItem'
9
import { ReactComponent as expandSvg } from '@icons/expand.svg'
10
import { useAppDispatch, useAppSelector } from '@store/hooks'
11
import { setModalIsActive } from '@store/app-store/appReducer'
12
import { nameParser } from '@utils/stringParser'
13

14
// eslint-disable-next-line css-modules/no-unused-class
15
import styles from './Sidebar.module.scss'
16

17
const Sidebar: React.FC = () => {
18
    const [isOpened, setIsOpened] = useState(false)
19
    const [sidebarHeight, setSidebarHeight] = useState(0)
20
    const [sidebarItemsWidth, setSidebarItemsWidth] = useState<number[]>([])
21
    let sidebarItemsMaxWidth = 24
22

23
    if (sidebarItemsWidth.length) {
24
        sidebarItemsMaxWidth = Math.max(...sidebarItemsWidth)
25
    }
26

27
    const sidebarWidths = { min: 64, max: `${sidebarItemsMaxWidth + 74}px` }
28

29
    const sidebarRef = useCallback((node: HTMLDivElement) => {
30
        if (!node) { return }
31

32
        setSidebarHeight(node.getBoundingClientRect().height)
33
        const sidebarItems = node.querySelectorAll(`.${styles.prompt}`)
34
        const widths: number[] = []
35

36
        sidebarItems.forEach((item: Element) => {
37
            widths.push(item.getBoundingClientRect().width)
38
        })
39
        setSidebarItemsWidth(widths)
40
    }, [])
41

42
    const sidebarStyles = {
43
        top: `${window.innerHeight / 2 - sidebarHeight / 2}px`,
44
        width: isOpened ? sidebarWidths.max : sidebarWidths.min,
45
    }
46

47
    const dispatch = useAppDispatch()
48
    const handleClickToProfile = () => {
49
        dispatch(setModalIsActive(true))
50
    }
51

52
    const links = useAppSelector((state) => state.app.links)
53

54
    const userFirstName = useAppSelector((state) => state.profile.firstName)
55
    const userSecondName = useAppSelector((state) => state.profile.secondName)
56
    const userInitials = nameParser(userFirstName, userSecondName)
57

58
    return (
59
        <div
60
            className={clsx(
61
                styles.sidebar,
62
                'component',
63
                { [styles.opened]: isOpened },
64
            )}
65
            role="navigation"
66
            onDoubleClick={() => setIsOpened(!isOpened)}
67
            ref={sidebarRef}
68
            style={sidebarStyles}
69
        >
70
            <SidebarItem
71
                title="Profile"
72
                Ico={userInitials}
73
                isLinked={false}
74
                isSidebarOpened={isOpened}
75
                onClick={handleClickToProfile}
76
            />
77
            <SidebarItem
78
                title="Home"
79
                Ico={homeSvg}
80
                link={links.home}
81
                isSidebarOpened={isOpened}
82
            />
83
            <SidebarItem
84
                title="Accountancy"
85
                Ico={accountancySvg}
86
                link={links.accountancy}
87
                isSidebarOpened={isOpened}
88
            />
89
            <SidebarItem
90
                title="Statistics"
91
                Ico={statisticsSvg}
92
                link={links.statistics}
93
                isSidebarOpened={isOpened}
94
            />
95
            <SidebarItem
96
                title="Settings"
97
                Ico={settingsSvg}
98
                link={links.settings}
99
                isSidebarOpened={isOpened}
100
            />
101
            <SidebarItem
102
                title="Add&nbsp;operation"
103
                Ico={addSvg}
104
                isLinked={false}
105
                isSidebarOpened={isOpened}
106
            />
107
            <SidebarItem
108
                className={styles.expand}
109
                title="Expand&nbsp;sidebar"
110
                Ico={expandSvg}
111
                isSidebarOpened={isOpened}
112
                isLinked={false}
113
                onClick={() => setIsOpened(!isOpened)}
114
            />
115
        </div>
116
    )
117
}
118

119
export default Sidebar
120