43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
|
import classNames from 'classnames'
|
||
|
|
import HorizontalMenuContent from '@/components/template/HorizontalMenuContent'
|
||
|
|
import { NAV_MODE_THEMED } from '@/constants/theme.constant'
|
||
|
|
import useResponsive from '@/utils/hooks/useResponsive'
|
||
|
|
import { useStoreState } from '@/store'
|
||
|
|
import type { CommonProps } from '@/proxy/common'
|
||
|
|
|
||
|
|
interface SecondaryHeaderProps extends CommonProps {
|
||
|
|
contained: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
const SecondaryHeader = (props: SecondaryHeaderProps) => {
|
||
|
|
const { className, contained } = props
|
||
|
|
|
||
|
|
const navMode = useStoreState((state) => state.theme.navMode)
|
||
|
|
const themeColor = useStoreState((state) => state.theme.themeColor)
|
||
|
|
const primaryColorLevel = useStoreState((state) => state.theme.primaryColorLevel)
|
||
|
|
const userAuthority = useStoreState((state) => state.auth.user.authority)
|
||
|
|
|
||
|
|
const { larger } = useResponsive()
|
||
|
|
|
||
|
|
const headerColor = () => {
|
||
|
|
if (navMode === NAV_MODE_THEMED) {
|
||
|
|
return `bg-${themeColor}-${primaryColorLevel} secondary-header-${navMode}`
|
||
|
|
}
|
||
|
|
return `secondary-header-${navMode}`
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{larger.md && (
|
||
|
|
<div className={classNames('flex items-center py-1', headerColor(), className)}>
|
||
|
|
<div className={classNames('flex items-center px-2', contained && 'container mx-auto')}>
|
||
|
|
<HorizontalMenuContent manuVariant={navMode} userAuthority={userAuthority} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default SecondaryHeader
|