75a868e5e8
* provide a type-ahead search input on shared document pages that allow search of child document tree * improve keyboard navigation handling of all search views * improve coloring on dark mode list selection states * refactor PaginatedList component to eliminate edge cases
54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import { observer } from "mobx-react";
|
|
import * as React from "react";
|
|
import styled from "styled-components";
|
|
import Scrollable from "~/components/Scrollable";
|
|
import SearchPopover from "~/components/SearchPopover";
|
|
import useStores from "~/hooks/useStores";
|
|
import { NavigationNode } from "~/types";
|
|
import Sidebar from "./Sidebar";
|
|
import Section from "./components/Section";
|
|
import DocumentLink from "./components/SharedDocumentLink";
|
|
|
|
type Props = {
|
|
rootNode: NavigationNode;
|
|
shareId: string;
|
|
};
|
|
|
|
function SharedSidebar({ rootNode, shareId }: Props) {
|
|
const { ui, documents } = useStores();
|
|
|
|
return (
|
|
<Sidebar>
|
|
<ScrollContainer flex>
|
|
<TopSection>
|
|
<SearchPopover shareId={shareId} />
|
|
</TopSection>
|
|
<Section>
|
|
<DocumentLink
|
|
index={0}
|
|
shareId={shareId}
|
|
depth={1}
|
|
node={rootNode}
|
|
activeDocumentId={ui.activeDocumentId}
|
|
activeDocument={documents.active}
|
|
/>
|
|
</Section>
|
|
</ScrollContainer>
|
|
</Sidebar>
|
|
);
|
|
}
|
|
|
|
const ScrollContainer = styled(Scrollable)`
|
|
padding-bottom: 16px;
|
|
`;
|
|
|
|
const TopSection = styled(Section)`
|
|
// this weird looking && increases the specificity of the style rule
|
|
&& {
|
|
margin-top: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
`;
|
|
|
|
export default observer(SharedSidebar);
|