plane/apps/app/layouts/app-layout/app-sidebar.tsx
Aaryan Khandelwal a1de3f581f
fix: layout height and overflow (#1004)
* fix: kanban height issue

* dev: Layout fixes

* dev: layout changes

* fix: layout overflow settings and fixed header

* style: filters padding fixed

* fix: hide filters if none are applied

---------

Co-authored-by: gurusainath <gurusainath007@gmail.com>
2023-05-05 17:07:29 +05:30

39 lines
1.1 KiB
TypeScript

// hooks
import useTheme from "hooks/use-theme";
// components
import {
WorkspaceHelpSection,
WorkspaceSidebarDropdown,
WorkspaceSidebarMenu,
} from "components/workspace";
import { ProjectSidebarList } from "components/project";
export interface SidebarProps {
toggleSidebar: boolean;
setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
}
const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) => {
// theme
const { collapsed: sidebarCollapse } = useTheme();
return (
<div
className={`z-20 h-full flex-shrink-0 border-r border-brand-base ${
sidebarCollapse ? "" : "w-auto md:w-[17rem]"
} fixed inset-y-0 top-0 ${
toggleSidebar ? "left-0" : "-left-full md:left-0"
} flex h-full flex-col bg-brand-sidebar duration-300 md:relative`}
>
<div className="flex h-full flex-1 flex-col">
<WorkspaceSidebarDropdown />
<WorkspaceSidebarMenu />
<ProjectSidebarList />
<WorkspaceHelpSection setSidebarActive={setToggleSidebar} />
</div>
</div>
);
};
export default Sidebar;