All files / components/Navbar/Sidebar Sidebar.tsx

100% Statements 5/5
100% Branches 4/4
100% Functions 3/3
100% Lines 4/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49                                82x 129x   62x                   372x                                      
'use client'
import React from 'react'
import { sidebarElements } from '../../../../content/sidebar'
import { useAppSelector } from '../../../store/hooks'
import { SidebarButtonState } from '../../../types/sidebar'
import { NavbarLogo } from '../NavbarLogo/NavbarLogo'
import { SidebarButton } from './SidebarButton/SidebarButton'
 
export type SidebarProps = {
	/** Path of the current page. */
	path: string
}
 
/**
 * Sidebar component for navigation
 */
export const Sidebar: React.FC<SidebarProps> = ({ path }) => {
	const progressKeys = useAppSelector((state) => state.lastWill.data.progressKeys)
 
	return (
		<div datacy={'sidebar'} className="sticky top-0 hidden h-auto w-80 min-w-[20rem] bg-yellow-400 sm:hidden lg:block">
			{/* Logo */}
			<div datacy="sidebar-logo" className="px-6 pb-10 pt-[19px]">
				<NavbarLogo />
			</div>
 
			{/* Nav Elements */}
			<div className="flex flex-col">
				{sidebarElements.map((element) => (
					<SidebarButton
						datacy={`sidebar-button-${element.page}`}
						key={element.page}
						type={element.page}
						title={element.title}
						description={element.description}
						state={
							path.includes(element.page) // button is active if url contains the page name
								? SidebarButtonState.ACTIVE
								: progressKeys.includes(element.page)
								? SidebarButtonState.DEFAULT // button is default if page was visited yet
								: SidebarButtonState.DISABLED // button is disabled if page was not visited yet
						}
					/>
				))}
			</div>
		</div>
	)
}