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

fix: app sidebar toggle (#3829)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-02-28 19:55:22 +05:30 committed by GitHub
parent 51f795fbd7
commit 34301e4399
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 64 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
View File

@ -5,17 +5,17 @@ import { observer } from "mobx-react";
type Props = { type Props = {
onClick?: () => void; onClick?: () => void;
} };
export const SidebarHamburgerToggle: FC<Props> = observer((props) => { export const SidebarHamburgerToggle: FC<Props> = observer((props) => {
const { onClick } = props const { onClick } = props;
const { theme: themeStore } = useApplication(); const { theme: themeStore } = useApplication();
return ( return (
<div <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" 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={() => { onClick={() => {
if (onClick) onClick() if (onClick) onClick();
else themeStore.toggleMobileSidebar() else themeStore.toggleSidebar();
}} }}
> >
<Menu size={14} className="text-custom-text-200 group-hover:text-custom-text-100 transition-all" /> <Menu size={14} className="text-custom-text-200 group-hover:text-custom-text-100 transition-all" />

2
web/components/project/sidebar-list-item.tsx
View File

@ -144,7 +144,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
const handleProjectClick = () => { const handleProjectClick = () => {
if (window.innerWidth < 768) { if (window.innerWidth < 768) {
themeStore.toggleMobileSidebar(); themeStore.toggleSidebar();
} }
}; };

33
web/components/workspace/help-section.tsx
View File

@ -10,7 +10,6 @@ import { FileText, HelpCircle, MessagesSquare, MoveLeft, Zap } from "lucide-reac
import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui"; import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
// assets // assets
import packageJson from "package.json"; import packageJson from "package.json";
import useSize from "hooks/use-window-size";
const helpOptions = [ const helpOptions = [
{ {
@ -43,11 +42,10 @@ export interface WorkspaceHelpSectionProps {
export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(() => { export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(() => {
// store hooks // store hooks
const { const {
theme: { sidebarCollapsed, toggleSidebar, toggleMobileSidebar }, theme: { sidebarCollapsed, toggleSidebar },
commandPalette: { toggleShortcutModal }, commandPalette: { toggleShortcutModal },
} = useApplication(); } = useApplication();
const [windowWidth] = useSize();
// states // states
const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false); const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
// refs // refs
@ -60,8 +58,9 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
return ( return (
<> <>
<div <div
className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 py-2 ${isCollapsed ? "flex-col" : "" className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 py-2 ${
}`} isCollapsed ? "flex-col" : ""
}`}
> >
{!isCollapsed && ( {!isCollapsed && (
<div className="w-1/2 cursor-default rounded-md bg-green-500/10 px-2.5 py-1.5 text-center text-sm font-medium text-green-500 outline-none"> <div className="w-1/2 cursor-default rounded-md bg-green-500/10 px-2.5 py-1.5 text-center text-sm font-medium text-green-500 outline-none">
@ -72,8 +71,9 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
<Tooltip tooltipContent="Shortcuts"> <Tooltip tooltipContent="Shortcuts">
<button <button
type="button" type="button"
className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${isCollapsed ? "w-full" : "" className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
}`} isCollapsed ? "w-full" : ""
}`}
onClick={() => toggleShortcutModal(true)} onClick={() => toggleShortcutModal(true)}
> >
<Zap className="h-3.5 w-3.5" /> <Zap className="h-3.5 w-3.5" />
@ -82,8 +82,9 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
<Tooltip tooltipContent="Help"> <Tooltip tooltipContent="Help">
<button <button
type="button" type="button"
className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${isCollapsed ? "w-full" : "" className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
}`} isCollapsed ? "w-full" : ""
}`}
onClick={() => setIsNeedHelpOpen((prev) => !prev)} onClick={() => setIsNeedHelpOpen((prev) => !prev)}
> >
<HelpCircle className="h-3.5 w-3.5" /> <HelpCircle className="h-3.5 w-3.5" />
@ -93,7 +94,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
<button <button
type="button" type="button"
className="grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:hidden" className="grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:hidden"
onClick={() => windowWidth <= 768 ? toggleMobileSidebar() : toggleSidebar()} onClick={() => toggleSidebar()}
> >
<MoveLeft className="h-3.5 w-3.5" /> <MoveLeft className="h-3.5 w-3.5" />
</button> </button>
@ -101,9 +102,10 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
<Tooltip tooltipContent={`${isCollapsed ? "Expand" : "Hide"}`}> <Tooltip tooltipContent={`${isCollapsed ? "Expand" : "Hide"}`}>
<button <button
type="button" type="button"
className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${isCollapsed ? "w-full" : "" className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
}`} isCollapsed ? "w-full" : ""
onClick={() => windowWidth <= 768 ? toggleMobileSidebar() : toggleSidebar()} }`}
onClick={() => toggleSidebar()}
> >
<MoveLeft className={`h-3.5 w-3.5 duration-300 ${isCollapsed ? "rotate-180" : ""}`} /> <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
</button> </button>
@ -121,8 +123,9 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<div <div
className={`absolute bottom-2 min-w-[10rem] ${isCollapsed ? "left-full" : "-left-[75px]" className={`absolute bottom-2 min-w-[10rem] ${
} divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`} isCollapsed ? "left-full" : "-left-[75px]"
} divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
ref={helpOptionsRef} ref={helpOptionsRef}
> >
<div className="space-y-1 pb-2"> <div className="space-y-1 pb-2">

7
web/components/workspace/sidebar-dropdown.tsx
View File

@ -8,7 +8,7 @@ import { mutate } from "swr";
import { Check, ChevronDown, CircleUserRound, LogOut, Mails, PlusSquare, Settings, UserCircle2 } from "lucide-react"; import { Check, ChevronDown, CircleUserRound, LogOut, Mails, PlusSquare, Settings, UserCircle2 } from "lucide-react";
import { usePopper } from "react-popper"; import { usePopper } from "react-popper";
// hooks // hooks
import { useApplication, useEventTracker, useUser, useWorkspace } from "hooks/store"; import { useApplication, useUser, useWorkspace } from "hooks/store";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
@ -54,9 +54,8 @@ export const WorkspaceSidebarDropdown = observer(() => {
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
// store hooks // store hooks
const { const {
theme: { sidebarCollapsed, toggleMobileSidebar }, theme: { sidebarCollapsed, toggleSidebar },
} = useApplication(); } = useApplication();
const { setTrackElement } = useEventTracker();
const { currentUser, updateCurrentUser, isUserInstanceAdmin, signOut } = useUser(); const { currentUser, updateCurrentUser, isUserInstanceAdmin, signOut } = useUser();
const { currentWorkspace: activeWorkspace, workspaces } = useWorkspace(); const { currentWorkspace: activeWorkspace, workspaces } = useWorkspace();
// hooks // hooks
@ -98,7 +97,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
}; };
const handleItemClick = () => { const handleItemClick = () => {
if (window.innerWidth < 768) { if (window.innerWidth < 768) {
toggleMobileSidebar(); toggleSidebar();
} }
}; };
const workspacesList = Object.values(workspaces ?? {}); const workspacesList = Object.values(workspaces ?? {});

11
web/components/workspace/sidebar-menu.tsx
View File

@ -31,7 +31,7 @@ export const WorkspaceSidebarMenu = observer(() => {
const handleLinkClick = (itemKey: string) => { const handleLinkClick = (itemKey: string) => {
if (window.innerWidth < 768) { if (window.innerWidth < 768) {
themeStore.toggleMobileSidebar(); themeStore.toggleSidebar();
} }
captureEvent(SIDEBAR_CLICKED, { captureEvent(SIDEBAR_CLICKED, {
destination: itemKey, destination: itemKey,
@ -52,10 +52,11 @@ export const WorkspaceSidebarMenu = observer(() => {
disabled={!themeStore?.sidebarCollapsed} disabled={!themeStore?.sidebarCollapsed}
> >
<div <div
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${link.highlight(router.asPath, `/${workspaceSlug}`) className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
? "bg-custom-primary-100/10 text-custom-primary-100" link.highlight(router.asPath, `/${workspaceSlug}`)
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80" ? "bg-custom-primary-100/10 text-custom-primary-100"
} ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`} : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
} ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
> >
{ {
<link.Icon <link.Icon

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

@ -20,9 +20,9 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
useOutsideClickDetector(ref, () => { useOutsideClickDetector(ref, () => {
if (themStore.mobileSidebarCollapsed === false) { if (themStore.sidebarCollapsed === false) {
if (window.innerWidth < 768) { if (window.innerWidth < 768) {
themStore.toggleMobileSidebar(); themStore.toggleSidebar();
} }
} }
}); });
@ -31,8 +31,8 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
<div <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 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 fixed md:relative
${themStore.mobileSidebarCollapsed ? "-ml-[280px]" : ""} ${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}
sm:${themStore.mobileSidebarCollapsed ? "-ml-[280px]" : ""} sm:${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}
md:ml-0 ${themStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"} md:ml-0 ${themStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
lg:ml-0 ${themStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"} lg:ml-0 ${themStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
`} `}

48
web/layouts/settings-layout/profile/sidebar.tsx
View File

@ -40,7 +40,7 @@ export const ProfileLayoutSidebar = observer(() => {
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
// store hooks // store hooks
const { const {
theme: { sidebarCollapsed, toggleSidebar, toggleMobileSidebar }, theme: { sidebarCollapsed, toggleSidebar },
} = useApplication(); } = useApplication();
const { currentUser, currentUserSettings, signOut } = useUser(); const { currentUser, currentUserSettings, signOut } = useUser();
const { workspaces } = useWorkspace(); const { workspaces } = useWorkspace();
@ -78,7 +78,7 @@ export const ProfileLayoutSidebar = observer(() => {
const handleItemClick = () => { const handleItemClick = () => {
if (window.innerWidth < 768) { if (window.innerWidth < 768) {
toggleMobileSidebar(); toggleSidebar();
} }
}; };
@ -113,8 +113,9 @@ export const ProfileLayoutSidebar = observer(() => {
<div ref={ref} className="flex h-full w-full flex-col gap-y-4"> <div ref={ref} className="flex h-full w-full flex-col gap-y-4">
<Link href={`/${redirectWorkspaceSlug}`} onClick={handleItemClick}> <Link href={`/${redirectWorkspaceSlug}`} onClick={handleItemClick}>
<div <div
className={`flex flex-shrink-0 items-center gap-2 truncate px-4 pt-4 ${sidebarCollapsed ? "justify-center" : "" className={`flex flex-shrink-0 items-center gap-2 truncate px-4 pt-4 ${
}`} sidebarCollapsed ? "justify-center" : ""
}`}
> >
<span className="grid h-5 w-5 flex-shrink-0 place-items-center"> <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
<ChevronLeft className="h-5 w-5" strokeWidth={1} /> <ChevronLeft className="h-5 w-5" strokeWidth={1} />
@ -136,10 +137,11 @@ export const ProfileLayoutSidebar = observer(() => {
<Link key={link.key} href={link.href} className="block w-full" onClick={handleItemClick}> <Link key={link.key} href={link.href} className="block w-full" onClick={handleItemClick}>
<Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}> <Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
<div <div
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${link.highlight(router.pathname) className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
? "bg-custom-primary-100/10 text-custom-primary-100" link.highlight(router.pathname)
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80" ? "bg-custom-primary-100/10 text-custom-primary-100"
} ${sidebarCollapsed ? "justify-center" : ""}`} : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
} ${sidebarCollapsed ? "justify-center" : ""}`}
> >
{<link.Icon className="h-4 w-4" />} {<link.Icon className="h-4 w-4" />}
{!sidebarCollapsed && link.label} {!sidebarCollapsed && link.label}
@ -160,17 +162,20 @@ export const ProfileLayoutSidebar = observer(() => {
<Link <Link
key={workspace.id} key={workspace.id}
href={`/${workspace.slug}`} href={`/${workspace.slug}`}
className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${sidebarCollapsed ? "justify-center" : `justify-between` className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${
}`} sidebarCollapsed ? "justify-center" : `justify-between`
}`}
onClick={handleItemClick} onClick={handleItemClick}
> >
<span <span
className={`flex w-full flex-grow items-center gap-x-2 truncate rounded-md px-3 py-1 hover:bg-custom-sidebar-background-80 ${sidebarCollapsed ? "justify-center" : "" className={`flex w-full flex-grow items-center gap-x-2 truncate rounded-md px-3 py-1 hover:bg-custom-sidebar-background-80 ${
}`} sidebarCollapsed ? "justify-center" : ""
}`}
> >
<span <span
className={`relative flex h-6 w-6 flex-shrink-0 items-center justify-center p-2 text-xs uppercase ${!workspace?.logo && "rounded bg-custom-primary-500 text-white" className={`relative flex h-6 w-6 flex-shrink-0 items-center justify-center p-2 text-xs uppercase ${
}`} !workspace?.logo && "rounded bg-custom-primary-500 text-white"
}`}
> >
{workspace?.logo && workspace.logo !== "" ? ( {workspace?.logo && workspace.logo !== "" ? (
<img <img
@ -195,8 +200,9 @@ export const ProfileLayoutSidebar = observer(() => {
<Link className="block w-full" key={link.key} href={link.href} onClick={handleItemClick}> <Link className="block w-full" key={link.key} href={link.href} onClick={handleItemClick}>
<Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}> <Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
<div <div
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80 ${sidebarCollapsed ? "justify-center" : "" className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80 ${
}`} sidebarCollapsed ? "justify-center" : ""
}`}
> >
{<link.Icon className="h-4 w-4" />} {<link.Icon className="h-4 w-4" />}
{!sidebarCollapsed && link.label} {!sidebarCollapsed && link.label}
@ -208,8 +214,9 @@ export const ProfileLayoutSidebar = observer(() => {
</div> </div>
<div className="flex flex-shrink-0 flex-grow items-end px-6 py-2"> <div className="flex flex-shrink-0 flex-grow items-end px-6 py-2">
<div <div
className={`flex w-full ${sidebarCollapsed ? "flex-col justify-center gap-2" : "items-center justify-between gap-2" className={`flex w-full ${
}`} sidebarCollapsed ? "flex-col justify-center gap-2" : "items-center justify-between gap-2"
}`}
> >
<button <button
type="button" type="button"
@ -229,8 +236,9 @@ export const ProfileLayoutSidebar = observer(() => {
</button> </button>
<button <button
type="button" type="button"
className={`ml-auto hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${sidebarCollapsed ? "w-full" : "" className={`ml-auto hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
}`} sidebarCollapsed ? "w-full" : ""
}`}
onClick={() => toggleSidebar()} onClick={() => toggleSidebar()}
> >
<MoveLeft className={`h-3.5 w-3.5 duration-300 ${sidebarCollapsed ? "rotate-180" : ""}`} /> <MoveLeft className={`h-3.5 w-3.5 duration-300 ${sidebarCollapsed ? "rotate-180" : ""}`} />

18
web/store/application/theme.store.ts
View File

@ -6,14 +6,12 @@ import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
export interface IThemeStore { export interface IThemeStore {
// observables // observables
theme: string | null; theme: string | null;
mobileSidebarCollapsed: boolean | undefined;
sidebarCollapsed: boolean | undefined; sidebarCollapsed: boolean | undefined;
profileSidebarCollapsed: boolean | undefined; profileSidebarCollapsed: boolean | undefined;
workspaceAnalyticsSidebarCollapsed: boolean | undefined; workspaceAnalyticsSidebarCollapsed: boolean | undefined;
issueDetailSidebarCollapsed: boolean | undefined; issueDetailSidebarCollapsed: boolean | undefined;
// actions // actions
toggleSidebar: (collapsed?: boolean) => void; toggleSidebar: (collapsed?: boolean) => void;
toggleMobileSidebar: (collapsed?: boolean) => void;
setTheme: (theme: any) => void; setTheme: (theme: any) => void;
toggleProfileSidebar: (collapsed?: boolean) => void; toggleProfileSidebar: (collapsed?: boolean) => void;
toggleWorkspaceAnalyticsSidebar: (collapsed?: boolean) => void; toggleWorkspaceAnalyticsSidebar: (collapsed?: boolean) => void;
@ -22,7 +20,6 @@ export interface IThemeStore {
export class ThemeStore implements IThemeStore { export class ThemeStore implements IThemeStore {
// observables // observables
mobileSidebarCollapsed: boolean | undefined = true;
sidebarCollapsed: boolean | undefined = undefined; sidebarCollapsed: boolean | undefined = undefined;
theme: string | null = null; theme: string | null = null;
profileSidebarCollapsed: boolean | undefined = undefined; profileSidebarCollapsed: boolean | undefined = undefined;
@ -34,7 +31,6 @@ export class ThemeStore implements IThemeStore {
constructor(_rootStore: any | null = null) { constructor(_rootStore: any | null = null) {
makeObservable(this, { makeObservable(this, {
// observable // observable
mobileSidebarCollapsed: observable.ref,
sidebarCollapsed: observable.ref, sidebarCollapsed: observable.ref,
theme: observable.ref, theme: observable.ref,
profileSidebarCollapsed: observable.ref, profileSidebarCollapsed: observable.ref,
@ -42,7 +38,6 @@ export class ThemeStore implements IThemeStore {
issueDetailSidebarCollapsed: observable.ref, issueDetailSidebarCollapsed: observable.ref,
// action // action
toggleSidebar: action, toggleSidebar: action,
toggleMobileSidebar: action,
setTheme: action, setTheme: action,
toggleProfileSidebar: action, toggleProfileSidebar: action,
toggleWorkspaceAnalyticsSidebar: action, toggleWorkspaceAnalyticsSidebar: action,
@ -66,19 +61,6 @@ export class ThemeStore implements IThemeStore {
localStorage.setItem("app_sidebar_collapsed", this.sidebarCollapsed.toString()); 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 * Toggle the profile sidebar collapsed state
* @param collapsed * @param collapsed