38 lines
960 B
TypeScript
38 lines
960 B
TypeScript
'use client';
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { ReactNode } from 'react';
|
|
import { useSidebar } from '@/components/layout/SidebarContext';
|
|
|
|
interface AppShellBarProps {
|
|
position: 'top' | 'bottom';
|
|
children: ReactNode;
|
|
sidebarOffset?: boolean;
|
|
}
|
|
|
|
export function AppShellBar({ position, children, sidebarOffset = true }: AppShellBarProps) {
|
|
const isTop = position === 'top';
|
|
const { isCollapsed } = useSidebar();
|
|
|
|
const leftClass = sidebarOffset
|
|
? (isCollapsed ? 'lg:left-20' : 'lg:left-64')
|
|
: 'left-0';
|
|
|
|
return (
|
|
<Box
|
|
as={isTop ? 'header' : 'footer'}
|
|
className={`
|
|
fixed ${isTop ? 'top-0' : 'bottom-0'} right-0 z-40
|
|
h-14
|
|
bg-base-black/80 backdrop-blur-xl
|
|
${isTop ? 'border-b' : 'border-t'} border-white/10
|
|
flex items-center justify-between px-6
|
|
transition-all duration-300 ease-in-out
|
|
left-0 ${leftClass}
|
|
`}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|