chore: app sidebar state (#3644)

* chore: app sidebar state fix

* chore: app sidebar state fix
This commit is contained in:
Anmol Singh Bhatia 2024-02-13 16:33:01 +05:30 committed by GitHub
parent 247937d93a
commit 06496ff0f0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 27 additions and 25 deletions

View File

@ -8,7 +8,7 @@ export const SidebarHamburgerToggle: FC = observer(() => {
return (
<div
className="w-7 h-7 flex-shrink-0 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
onClick={() => themStore.toggleSidebar()}
onClick={() => themStore.toggleMobileSidebar()}
>
<Menu size={14} className="text-custom-text-200 group-hover:text-custom-text-100 transition-all" />
</div>

View File

@ -1,4 +1,4 @@
import { FC, useEffect, useRef } from "react";
import { FC, useRef } from "react";
import { observer } from "mobx-react-lite";
// components
import {
@ -12,7 +12,7 @@ import { ProjectSidebarList } from "components/project";
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
@ -20,35 +20,19 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
const ref = useRef<HTMLDivElement>(null);
useOutsideClickDetector(ref, () => {
if (themStore.sidebarCollapsed === false) {
if (themStore.mobileSidebarCollapsed === false) {
if (window.innerWidth < 768) {
themStore.toggleSidebar();
themStore.toggleMobileSidebar();
}
}
});
useEffect(() => {
const handleResize = () => {
if (window.innerWidth <= 768) {
themStore.toggleSidebar(true);
}
if (window.innerWidth > 768) {
themStore.toggleSidebar(false);
}
};
handleResize();
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, [themStore]);
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]" : ""}
${themStore.mobileSidebarCollapsed ? "-ml-[280px]" : ""}
sm:${themStore.mobileSidebarCollapsed ? "-ml-[280px]" : ""}
md:ml-0 ${themStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
lg:ml-0 ${themStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
`}

View File

@ -6,12 +6,14 @@ import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
export interface IThemeStore {
// observables
theme: string | null;
mobileSidebarCollapsed: boolean | undefined;
sidebarCollapsed: boolean | undefined;
profileSidebarCollapsed: boolean | undefined;
workspaceAnalyticsSidebarCollapsed: boolean | undefined;
issueDetailSidebarCollapsed: boolean | undefined;
// actions
toggleSidebar: (collapsed?: boolean) => void;
toggleMobileSidebar: (collapsed?: boolean) => void;
setTheme: (theme: any) => void;
toggleProfileSidebar: (collapsed?: boolean) => void;
toggleWorkspaceAnalyticsSidebar: (collapsed?: boolean) => void;
@ -20,6 +22,7 @@ export interface IThemeStore {
export class ThemeStore implements IThemeStore {
// observables
mobileSidebarCollapsed: boolean | undefined = true;
sidebarCollapsed: boolean | undefined = undefined;
theme: string | null = null;
profileSidebarCollapsed: boolean | undefined = undefined;
@ -31,6 +34,7 @@ export class ThemeStore implements IThemeStore {
constructor(_rootStore: any | null = null) {
makeObservable(this, {
// observable
mobileSidebarCollapsed: observable.ref,
sidebarCollapsed: observable.ref,
theme: observable.ref,
profileSidebarCollapsed: observable.ref,
@ -38,6 +42,7 @@ export class ThemeStore implements IThemeStore {
issueDetailSidebarCollapsed: observable.ref,
// action
toggleSidebar: action,
toggleMobileSidebar: action,
setTheme: action,
toggleProfileSidebar: action,
toggleWorkspaceAnalyticsSidebar: action,
@ -61,6 +66,19 @@ export class ThemeStore implements IThemeStore {
localStorage.setItem("app_sidebar_collapsed", this.sidebarCollapsed.toString());
};
/**
* Toggle mobile sidebar collapsed state
* @param collapsed
*/
toggleMobileSidebar = (collapsed?: boolean) => {
if (collapsed === undefined) {
this.mobileSidebarCollapsed = !this.mobileSidebarCollapsed;
} else {
this.mobileSidebarCollapsed = collapsed;
}
localStorage.setItem("mobile_sidebar_collapsed", this.mobileSidebarCollapsed.toString());
};
/**
* Toggle the profile sidebar collapsed state
* @param collapsed
@ -88,13 +106,13 @@ export class ThemeStore implements IThemeStore {
};
toggleIssueDetailSidebar = (collapsed?: boolean) => {
if(collapsed === undefined) {
if (collapsed === undefined) {
this.issueDetailSidebarCollapsed = !this.issueDetailSidebarCollapsed;
} else {
this.issueDetailSidebarCollapsed = collapsed;
}
localStorage.setItem("issue_detail_sidebar_collapsed", this.issueDetailSidebarCollapsed.toString());
}
};
/**
* Sets the user theme and applies it to the platform