35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
'use client';
|
|
|
|
import { Box } from '@/ui/Box';
|
|
import { ReactNode } from 'react';
|
|
|
|
interface AppShellBarProps {
|
|
position: 'top' | 'bottom';
|
|
children: ReactNode;
|
|
sidebarOffset?: boolean;
|
|
}
|
|
|
|
export function AppShellBar({ position, children, sidebarOffset = true }: AppShellBarProps) {
|
|
const isTop = position === 'top';
|
|
|
|
return (
|
|
<Box
|
|
as={isTop ? 'header' : 'footer'}
|
|
className={`
|
|
fixed ${isTop ? 'top-0' : 'bottom-0'} right-0 z-40
|
|
h-14
|
|
bg-base-black/70 backdrop-blur-xl
|
|
border-${isTop ? 'b' : 't'} border-outline-steel
|
|
flex items-center justify-between px-6
|
|
transition-all duration-200
|
|
`}
|
|
// Use style for responsive left offset to ensure it works
|
|
// We use a CSS variable or calc if possible, but here we rely on Tailwind classes via className if we could
|
|
// But since we need responsive logic that matches Layout, we'll use the Box props
|
|
left={sidebarOffset ? { base: 0, lg: 64 } : 0}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|