revert: resize in app sidebar (#2193)
This commit is contained in:
@@ -75,7 +75,7 @@ export const RootAppSidebar = ({
|
|||||||
}, [createPage, openPage]);
|
}, [createPage, openPage]);
|
||||||
const sidebarOpen = useAtomValue(appSidebarOpenAtom);
|
const sidebarOpen = useAtomValue(appSidebarOpenAtom);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (environment.isDesktop && typeof sidebarOpen === 'boolean') {
|
if (environment.isDesktop) {
|
||||||
window.apis?.onSidebarVisibilityChange(sidebarOpen);
|
window.apis?.onSidebarVisibilityChange(sidebarOpen);
|
||||||
}
|
}
|
||||||
}, [sidebarOpen]);
|
}, [sidebarOpen]);
|
||||||
|
|||||||
@@ -1,9 +1,6 @@
|
|||||||
import { atomWithStorage } from 'jotai/utils';
|
import { atomWithStorage } from 'jotai/utils';
|
||||||
|
|
||||||
export const appSidebarOpenAtom = atomWithStorage(
|
export const appSidebarOpenAtom = atomWithStorage('app-sidebar-open', true);
|
||||||
'app-sidebar-open',
|
|
||||||
undefined as boolean | undefined
|
|
||||||
);
|
|
||||||
export const appSidebarWidthAtom = atomWithStorage(
|
export const appSidebarWidthAtom = atomWithStorage(
|
||||||
'app-sidebar-width',
|
'app-sidebar-width',
|
||||||
256 /* px */
|
256 /* px */
|
||||||
|
|||||||
@@ -8,13 +8,7 @@ import { assignInlineVars } from '@vanilla-extract/dynamic';
|
|||||||
import { useAtom, useAtomValue } from 'jotai';
|
import { useAtom, useAtomValue } from 'jotai';
|
||||||
import type { PropsWithChildren, ReactElement } from 'react';
|
import type { PropsWithChildren, ReactElement } from 'react';
|
||||||
import type { ReactNode } from 'react';
|
import type { ReactNode } from 'react';
|
||||||
import {
|
import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
|
||||||
forwardRef,
|
|
||||||
useCallback,
|
|
||||||
useEffect,
|
|
||||||
useImperativeHandle,
|
|
||||||
useRef,
|
|
||||||
} from 'react';
|
|
||||||
|
|
||||||
import { IconButton } from '../../ui/button/IconButton';
|
import { IconButton } from '../../ui/button/IconButton';
|
||||||
import {
|
import {
|
||||||
@@ -40,7 +34,6 @@ export const AppSidebar = forwardRef<HTMLElement, AppSidebarProps>(
|
|||||||
const [open, setOpen] = useAtom(appSidebarOpenAtom);
|
const [open, setOpen] = useAtom(appSidebarOpenAtom);
|
||||||
|
|
||||||
const appSidebarWidth = useAtomValue(appSidebarWidthAtom);
|
const appSidebarWidth = useAtomValue(appSidebarWidthAtom);
|
||||||
const initialRender = open === undefined;
|
|
||||||
|
|
||||||
const handleSidebarOpen = useCallback(() => {
|
const handleSidebarOpen = useCallback(() => {
|
||||||
setOpen(open => !open);
|
setOpen(open => !open);
|
||||||
@@ -48,20 +41,8 @@ export const AppSidebar = forwardRef<HTMLElement, AppSidebarProps>(
|
|||||||
|
|
||||||
useImperativeHandle(forwardedRef, () => ref.current as HTMLElement);
|
useImperativeHandle(forwardedRef, () => ref.current as HTMLElement);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (open === undefined && ref.current) {
|
|
||||||
const initialOpen =
|
|
||||||
window.getComputedStyle(ref.current).position === 'relative';
|
|
||||||
|
|
||||||
setOpen(initialOpen);
|
|
||||||
}
|
|
||||||
}, [open, setOpen]);
|
|
||||||
|
|
||||||
const environment = getEnvironment();
|
const environment = getEnvironment();
|
||||||
const isMacosDesktop = environment.isDesktop && environment.isMacOs;
|
const isMacosDesktop = environment.isDesktop && environment.isMacOs;
|
||||||
if (initialRender) {
|
|
||||||
return <div />;
|
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<nav
|
<nav
|
||||||
@@ -115,7 +96,9 @@ export const AppSidebar = forwardRef<HTMLElement, AppSidebarProps>(
|
|||||||
data-testid="app-sidebar-float-mask"
|
data-testid="app-sidebar-float-mask"
|
||||||
data-open={open}
|
data-open={open}
|
||||||
className={sidebarFloatMaskStyle}
|
className={sidebarFloatMaskStyle}
|
||||||
onClick={() => setOpen(false)}
|
onClick={useCallback(() => {
|
||||||
|
setOpen(false);
|
||||||
|
}, [setOpen])}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user