gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-22 18:43:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Start tabs

Browse Source
This commit is contained in:
Samy Pessé
2023-10-24 22:07:19 +02:00
parent 7295d25e4e
commit dd0e6db171
8 changed files with 137 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PageAside/PageAside.tsx
+15 -20
View File
@@ -1,21 +1,19 @@
import { getDocumentSections } from "@/lib/document";
import { tcls } from "@/lib/tailwind";
import { RevisionPageDocument } from "@gitbook/api";
import React from "react";
import { ScrollSectionsList } from "./ScrollSectionsList";
import { getDocumentSections } from '@/lib/document';
import { tcls } from '@/lib/tailwind';
import { RevisionPageDocument } from '@gitbook/api';
import React from 'react';
import { ScrollSectionsList } from './ScrollSectionsList';
/**
* Aside listing the headings in the document.
*/
export function PageAside(props: {
page: RevisionPageDocument;
document: any;
}) {
export function PageAside(props: { page: RevisionPageDocument; document: any }) {
const { document } = props;
const sections = getDocumentSections(document);
return (
<aside className={tcls(
<aside
className={tcls(
'hidden',
'xl:flex',
'flex-col',
@@ -25,13 +23,12 @@ export function PageAside(props: {
'sticky',
'top-16',
'h-[calc(100vh-4rem)]',
'py-6'
)}>
'py-6',
)}
>
{sections.length > 0 ? (
<>
<div className={tcls(
'text-sm', 'text-slate-500', 'font-semibold', 'pb-3'
)}>
<div className={tcls('text-sm', 'text-slate-500', 'font-semibold', 'pb-3')}>
On this page
</div>
<div className={tcls('overflow-auto', 'flex-1')}>
@@ -41,9 +38,7 @@ export function PageAside(props: {
</div>
</>
) : null}
<div>
</div>
<div></div>
</aside>
)
}
);
}
src/components/PageAside/ScrollSectionsList.tsx
+22 -18
View File
@@ -1,14 +1,12 @@
'use client';
import { DocumentSection } from "@/lib/document";
import { tcls } from "@/lib/tailwind";
import Link from "next/link";
import React from "react";
import { IconChevronRight } from "@/components/icons/IconChevronRight";
import { DocumentSection } from '@/lib/document';
import { tcls } from '@/lib/tailwind';
import Link from 'next/link';
import React from 'react';
import { IconChevronRight } from '@/components/icons/IconChevronRight';
export function ScrollSectionsList(props: {
sections: DocumentSection[];
}) {
export function ScrollSectionsList(props: { sections: DocumentSection[] }) {
const { sections } = props;
const [activeId, setActiveId] = React.useState(null);
@@ -18,15 +16,21 @@ export function ScrollSectionsList(props: {
return (
<ul>
{sections.map(section => (
{sections.map((section) => (
<li key={section.id} className={tcls('flex', 'flex-row')}>
<Link href={`#${section.id}`} className={tcls(
'flex', 'flex-row',
'text-sm',
section.depth > 1 ? ['font-light', 'ps-3', 'py-1', 'text-slate-500', ] : ['py-2', 'text-slate-700', ],
activeId === section.id ? 'text-primary-500' : 'hover:text-slate-900',
)}>
<Link
href={`#${section.id}`}
className={tcls(
'flex',
'flex-row',
'text-sm',
section.depth > 1
? ['font-light', 'ps-3', 'py-1', 'text-slate-500']
: ['py-2', 'text-slate-700'],
activeId === section.id ? 'text-primary-500' : 'hover:text-slate-900',
)}
>
{section.depth > 1 ? (
<IconChevronRight className={tcls('w-4', 'h-4', 'mr-1', 'mt-0.5')} />
) : null}
@@ -35,5 +39,5 @@ export function ScrollSectionsList(props: {
</li>
))}
</ul>
)
}
);
}