skeleton: show/hide sidebar
-import React, { ReactElement, ReactNode, useMemo } from 'react';
+import React, { Children, ReactElement, ReactNode, useCallback, useMemo, useState } from 'react';
import { Groups, Graphs, Invites, Rolodex, Path, AppName } from '@urbit/api';
import { Associations } from '@urbit/api/metadata';
@@ -11,6 +11,7 @@ import { Workspace } from '~/types/workspace';
import useGraphState from '~/logic/state/graph';
import useHarkState from '~/logic/state/hark';
import ErrorBoundary from '~/views/components/ErrorBoundary';
+import {useShortcut} from '~/logic/lib/shortcutContext';
interface SkeletonProps {
children: ReactNode;
@@ -24,6 +25,10 @@ interface SkeletonProps {
}
export function Skeleton(props: SkeletonProps): ReactElement {
+ const [sidebar, setSidebar] = useState(true)
+ useShortcut('ctrl+h', useCallback(() => {
+ setSidebar(s => !s);
+ }, []));
const graphs = useGraphState(state => state.graphs);
const graphKeys = useGraphState(state => state.graphKeys);
const unreads = useHarkState(state => state.unreads);
@@ -35,7 +40,7 @@ export function Skeleton(props: SkeletonProps): ReactElement {
[graphConfig]
);
- return (
+ return !sidebar ? (<Body> {props.children} </Body>) : (
<Body
display="grid"
gridTemplateColumns={
