yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Sidebar hidden when viewing shared document logged-in

Browse Source
This commit is contained in:
Tom Moor
2024-06-12 22:30:39 -04:00
parent 5b866a7451
commit 076d564aa3
2 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Sidebar/App.tsx
View File

@@ -55,7 +55,7 @@ function AppSidebar() {
); );
return ( return (
<Sidebar ref={handleSidebarRef}> <Sidebar hidden={!ui.readyToShow} ref={handleSidebarRef}>
<HistoryNavigation /> <HistoryNavigation />
{dndArea && ( {dndArea && (
<DndProvider backend={HTML5Backend} options={html5Options}> <DndProvider backend={HTML5Backend} options={html5Options}>

9
app/components/Sidebar/Sidebar.tsx
View File

@@ -24,11 +24,12 @@ const ANIMATION_MS = 250;
type Props = { type Props = {
children: React.ReactNode; children: React.ReactNode;
hidden?: boolean;
className?: string; className?: string;
}; };
const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar( const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
{ children, className }: Props, { children, hidden = false, className }: Props,
ref: React.RefObject<HTMLDivElement> ref: React.RefObject<HTMLDivElement>
) { ) {
const [isCollapsing, setCollapsing] = React.useState(false); const [isCollapsing, setCollapsing] = React.useState(false);
@@ -178,7 +179,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
<Container <Container
ref={ref} ref={ref}
style={style} style={style}
$visible={ui.readyToShow} $hidden={hidden}
$isHovering={isHovering} $isHovering={isHovering}
$isAnimating={isAnimating} $isAnimating={isAnimating}
$isSmallerThanMinimum={isSmallerThanMinimum} $isSmallerThanMinimum={isSmallerThanMinimum}
@@ -250,7 +251,7 @@ type ContainerProps = {
$isSmallerThanMinimum: boolean; $isSmallerThanMinimum: boolean;
$isHovering: boolean; $isHovering: boolean;
$collapsed: boolean; $collapsed: boolean;
$visible: boolean; $hidden: boolean;
}; };
const hoverStyles = (props: ContainerProps) => ` const hoverStyles = (props: ContainerProps) => `
@@ -269,7 +270,7 @@ const hoverStyles = (props: ContainerProps) => `
`; `;
const Container = styled(Flex)<ContainerProps>` const Container = styled(Flex)<ContainerProps>`
opacity: ${(props) => (props.$visible ? 1 : 0)}; opacity: ${(props) => (props.$hidden ? 0 : 1)};
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;