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 | 34x 145x 67x 402x | '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>
)
}
|