thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style/responsive sidebar (#3505)

Browse Source 
* style: added sidebar toggle in all the screens for mobile responsive

* chore: close sidebar on click of empty space when opened

* chore: setting the sidebar collapsed in smaller screens
This commit is contained in:
Ramesh Kumar Chandra
2024-01-30 15:22:24 +05:30
committed by GitHub
parent 9debd81a50
commit c6d6b9a0e9
28 changed files with 195 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
web/layouts/app-layout/sidebar.tsx
View File

@@ -1,4 +1,4 @@
import { FC } from "react";
import { FC, useEffect, useRef } from "react";
import { observer } from "mobx-react-lite";
// components
import {
@@ -10,20 +10,48 @@ import {
import { ProjectSidebarList } from "components/project";
// hooks
import { useApplication } from "hooks/store";
import useOutsideClickDetector from "hooks/use-outside-click-detector";
export interface IAppSidebar {}
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();
}
}
});
useEffect(() => {
const handleResize = () => {
if (window.innerWidth <= 768) {
themStore.toggleSidebar(true);
}
};
handleResize();
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, [themStore]);
return (
<div
className={`fixed 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 md:relative ${
themStore?.sidebarCollapsed ? "" : "md:w-[280px]"
} ${themStore?.sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
>
<div className="flex h-full w-full flex-1 flex-col">
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 />
@@ -33,3 +61,6 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
</div>
);
});