61 lines
2.4 KiB
TypeScript
61 lines
2.4 KiB
TypeScript
'use client'
|
|
import React from 'react'
|
|
import { cn } from "@/lib/utils"
|
|
import { useConfig } from '@/hooks/use-config'
|
|
import { useMediaQuery } from "@/hooks/use-media-query";
|
|
import { useMenuHoverConfig } from '@/hooks/use-menu-hover';
|
|
|
|
const SidebarContent = ({ children }: { children: React.ReactNode }) => {
|
|
const isDesktop = useMediaQuery("(min-width: 1280px)");
|
|
const [config] = useConfig()
|
|
const [hoverConfig, setHoverConfig] = useMenuHoverConfig();
|
|
const sidebarTheme = config.sidebarTheme !== 'light' ? `dark theme-${config.sidebarTheme}` : `theme-${config.sidebarTheme}`
|
|
|
|
if (config.menuHidden || config.layout === "horizontal") return null
|
|
|
|
if (config.sidebar === 'two-column') {
|
|
return (
|
|
|
|
<aside className={cn('fixed z-50 h-full xl:flex hidden', sidebarTheme, {
|
|
|
|
|
|
|
|
})}>
|
|
<div className=" relative flex h-full ">
|
|
{children}
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|
|
|
|
|
|
return (
|
|
<aside
|
|
onMouseEnter={() => config.sidebar === 'draggable' && setHoverConfig({ hovered: true })}
|
|
onMouseLeave={() => config.sidebar === 'draggable' && setHoverConfig({ hovered: false })}
|
|
|
|
className={cn('fixed z-50 w-[248px] bg-sidebar shadow-base xl:block hidden ', sidebarTheme, {
|
|
'w-[72px]': config.collapsed && config.sidebar !== 'compact',
|
|
'border-b': config.skin === 'bordered',
|
|
'shadow-base': config.skin === 'default',
|
|
'h-full start-0': config.layout !== 'semi-box' && config.layout !== 'compact',
|
|
'm-6 bottom-0 top-0 start-0 rounded-md': config.layout === 'semi-box',
|
|
'm-10 bottom-0 top-0 start-0 ': config.layout === 'compact',
|
|
'w-28': config.sidebar === 'compact',
|
|
"w-[248px]": hoverConfig.hovered
|
|
|
|
})}>
|
|
<div className=" relative flex flex-col h-full ">
|
|
{config.sidebarBgImage !== undefined && (
|
|
<div
|
|
className=" absolute left-0 top-0 z-[-1] w-full h-full bg-cover bg-center opacity-[0.07]"
|
|
style={{ backgroundImage: `url(${config.sidebarBgImage})` }}
|
|
></div>
|
|
)}
|
|
{children}
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|
|
|
|
export default SidebarContent |