50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
'use client';
|
|
import React from 'react';
|
|
import classNames from 'classnames';
|
|
import ThemeLogo from './ThemeLogo';
|
|
import { mobileSidebarState } from './Sidebar';
|
|
|
|
interface Props {
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
const MobileMenuButton: React.FC = () => {
|
|
const [, setIsMobileOpen] = mobileSidebarState.use();
|
|
return (
|
|
<button
|
|
onClick={() => setIsMobileOpen(true)}
|
|
className="md:hidden flex items-center ml-2 mr-1 px-1 py-1 rounded-md hover:bg-gray-800"
|
|
aria-label="Open menu"
|
|
>
|
|
<ThemeLogo />
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export const TopBar: React.FC<Props> = ({ children, className }) => {
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
'absolute top-0 left-0 w-full h-12 bg-gray-900 shadow-sm z-10 flex items-center px-2 overflow-x-auto whitespace-nowrap',
|
|
className,
|
|
)}
|
|
>
|
|
<MobileMenuButton />
|
|
{children ? children : null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const MainContent = React.forwardRef<HTMLDivElement, Props>(({ children, className }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={classNames('pt-14 px-2 sm:px-4 absolute top-0 left-0 w-full h-full overflow-auto', className)}
|
|
>
|
|
{children ? children : null}
|
|
</div>
|
|
);
|
|
});
|
|
MainContent.displayName = 'MainContent';
|