forked from github/plane
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { FC, useRef } from "react";
|
|
import { observer } from "mobx-react-lite";
|
|
// components
|
|
import { ProjectSidebarList } from "components/project";
|
|
import {
|
|
WorkspaceHelpSection,
|
|
WorkspaceSidebarDropdown,
|
|
WorkspaceSidebarMenu,
|
|
WorkspaceSidebarQuickAction,
|
|
} from "components/workspace";
|
|
// hooks
|
|
import { useApplication } from "hooks/store";
|
|
import useOutsideClickDetector from "hooks/use-outside-click-detector";
|
|
|
|
export interface IAppSidebar {}
|
|
|
|
export const AppSidebar: FC<IAppSidebar> = observer(() => {
|
|
// store hooks
|
|
const { theme: themStore } = useApplication();
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
useOutsideClickDetector(ref, () => {
|
|
if (themStore.sidebarCollapsed === false) {
|
|
if (window.innerWidth < 768) {
|
|
themStore.toggleSidebar();
|
|
}
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div
|
|
className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300
|
|
fixed md:relative
|
|
${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}
|
|
sm:${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}
|
|
md:ml-0 ${themStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
|
|
lg:ml-0 ${themStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
|
|
`}
|
|
>
|
|
<div ref={ref} className="flex h-full w-full flex-1 flex-col">
|
|
<WorkspaceSidebarDropdown />
|
|
<WorkspaceSidebarQuickAction />
|
|
<WorkspaceSidebarMenu />
|
|
<ProjectSidebarList />
|
|
<WorkspaceHelpSection />
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|