mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-15 15:44:45 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replace document bar with sidebar (#937)

Browse source 
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth 2021-01-24 21:39:47 +01:00 • committed by GitHub
parent 586969f368
commit 0627e0f551
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
54 changed files with 1067 additions and 604 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/components/editor/document-renderer-pane/document-render-pane.tsx
View file

@ -51,7 +51,7 @@ export const DocumentRenderPane: React.FC<DocumentRenderPaneProps> = (
const [tocAst, setTocAst] = useState<TocAst>()
const internalDocumentRenderPaneRef = useRef<HTMLDivElement>()
const { width } = useResizeObserver({ ref: internalDocumentRenderPaneRef.current })
const realWidth = width || 0
const realWidth = width ?? 0
const rendererRef = useRef<HTMLDivElement | null>(null)
const changeLineMarker = useAdaptedLineMarkerCallback(documentRenderPaneRef, rendererRef, onLineMarkerPositionChanged)
const setContainerReference = useCallback((instance: HTMLDivElement | null) => {
@ -84,22 +84,24 @@ export const DocumentRenderPane: React.FC<DocumentRenderPaneProps> = (
</div>
<div className={'col-md pt-4'}>
<ShowIf condition={realWidth >= 1280 && !!tocAst}>
<TableOfContents ast={tocAst as TocAst} className={'sticky'} baseUrl={baseUrl}/>
</ShowIf>
<ShowIf condition={realWidth < 1280 && !!tocAst}>
<div className={'markdown-toc-sidebar-button'}>
<Dropdown drop={'up'}>
<Dropdown.Toggle id="toc-overlay-button" variant={'secondary'} className={'no-arrow'}>
<ForkAwesomeIcon icon={'bars'}/>
</Dropdown.Toggle>
<Dropdown.Menu>
<div className={'p-2'}>
<TableOfContents ast={tocAst as TocAst} baseUrl={baseUrl}/>
</div>
</Dropdown.Menu>
</Dropdown>
</div>
<ShowIf condition={!!tocAst}>
<ShowIf condition={realWidth >= 1280}>
<TableOfContents ast={tocAst as TocAst} className={'sticky'} baseUrl={baseUrl}/>
</ShowIf>
<ShowIf condition={realWidth < 1280}>
<div className={'markdown-toc-sidebar-button'}>
<Dropdown drop={'up'}>
<Dropdown.Toggle id="toc-overlay-button" variant={'secondary'} className={'no-arrow'}>
<ForkAwesomeIcon icon={'list-ol'}/>
</Dropdown.Toggle>
<Dropdown.Menu>
<div className={'p-2'}>
<TableOfContents ast={tocAst as TocAst} baseUrl={baseUrl}/>
</div>
</Dropdown.Menu>
</Dropdown>
</div>
</ShowIf>
</ShowIf>
</div>
</div>