linkRecipe: ToC State

The CODEDOC ToC by default is closed and need to be opened by users via the hamburger menu on the bottom-left side. It might be preferable in some cases that the ToC is opened by default, and you can customize that simply by modifying .codedoc/content/index.tsx:

.codedoc/content/index.tsx
1linkimport { RendererLike } from '@connectv/html';

2linkimport { File } from 'rxline/fs';

3linkimport { Page, Meta, ContentNav, Fonts, ToC, GithubSearch$ } from '@codedoc/core/components';

4link

5linkimport { config } from '../config';

6linkimport { Header } from './header';

7linkimport { Footer } from './footer';

8link

9link

10linkexport function content(_content: HTMLElement, toc: HTMLElement, renderer: RendererLike<any, any>, file: File<string>) {

11link  return (

12link    <Page title={config.page.title.extractor(_content, config, file)}

13link          favicon={config.page.favicon}

14link          meta={<Meta {...config.page.meta}/>}

15link          fonts={<Fonts {...config.page.fonts}/>}

16link

17link          scripts={config.page.scripts}

18link          stylesheets={config.page.stylesheets}

19link

20link          header={<Header {...config}/>}

21link          footer={<Footer {...config}/>}

22link          toc={

23link            <ToC default="open"                  // --> change this line.

24link              search={

25link                  config.misc?.github ? 

26link                  <GithubSearch$

27link                    repo={config.misc.github.rep}

28link                    user={config.misc.github.user}

29link                    root={config.src.base}

30link                    pick={config.src.pick.source}

31link                    drop={config.src.drop.source}

32link                  /> : false

33link              }>{toc}</ToC>

34link          }>

35link      {_content}

36link      <ContentNav content={_content}/>

37link    </Page>

38link  )

39link}

The default property on ToC component affects the default state of the ToC on desktop, and can be either "open" or "close".