linkRecipe: Hamburger Menu on Top

For this recipe we want to move the hamburger menu there on desktop, while keeping it at its current place on mobile phones (since it is more reachable on a phone).

linkStep 1: Create a Top-Left Header

The default CODEDOC header sits at the top-right corner of the screen, so lets create a left-header component which sits at the top-left and hosts our hamburger menu. Lets create the file .codedoc/content/left-header.tsx:

.codedoc/content/left-header.tsx
1linkimport { ThemedComponentThis, themedStyle } from '@connectv/jss-theme'; // --> for theming

2linkimport { CodedocTheme } from '@codedoc/core';                           // --> we want our left-header's style to be compliant with codedoc theme

3linkimport { ToCToggle$ } from '@codedoc/core/components';                  // --> this is the hamburger menu

4link

5link

6linkconst LeftHeaderStyle = themedStyle((theme: CodedocTheme) => ({         // --> defined a themed-based style

7link  leftHeader: {                                                         // --> styles of the main left-header component

8link    position: 'fixed',

9link    top: 24,

10link    left: 24,

11link    zIndex: 999,                                                        // --> make sure it is above the ToC

12link    '@media screen and (max-width: 1200px)': {                          // --> lets hide it on mobile

13link      '&': { display: 'none' }

14link    },

15link  },

16link  leftHeaderPadding: {                                                  // --> also a padding element that we'll use to pad ToC to not overlap with the left-header

17link    height: 80,

18link    position: 'sticky',                                                 // --> it should stick to the top of ToC

19link    top: -32,                                                           // --> this is because ToC has a padding by default

20link    marginTop: -32,

21link    background: theme.toc.light.background,                             // --> should be of same background as ToC

22link    'body.dark &': { background: theme.toc.dark.background },           // --> also should share the ToC background in dark mode

23link    '@media (prefers-color-scheme: dark)': {                            // --> this is for when the page scripts have not yet determined the user preference for dark mode/light mode and the system-settings is being adhered to

24link      'body:not(.dark-mode-animate) &': {

25link        background: theme.toc.dark.background,

26link      }

27link    },

28link    'body.dark-mode-animate &': { transition: 'background .3s' },       // --> should animate its dark-mode-dependent properties

29link    '@media screen and (max-width: 1200px)': {                          // --> also make it go away on mobile.

30link      '&': { display: 'none' }

31link    },

32link  }

33link}));

34link

35link

36linkexport function LeftHeader(                                              // --> the main left-header component

37link  this: ThemedComponentThis,

38link  _: any,

39link  renderer: any,

40link) {

41link  const classes = this.theme.classes(LeftHeaderStyle);                   // --> just get the styles resolved based on theme

42link  return <div class={classes.leftHeader}><ToCToggle$/></div>             // --> and return a div

43link}

44link

45link

46linkexport function LeftHeaderPadding(                                      // --> the padding element

47link  this: ThemedComponentThis,

48link  _: any,

49link  renderer: any,

50link) {

51link  const classes = this.theme.classes(LeftHeaderStyle);

52link  return <div class={classes.leftHeaderPadding}/>

53link}

The styling used for the components are based on @connectv/jss-theme which is in turn based on JSS.

linkStep 2: Add it to Content

To add the left-header to our page, lets modify .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 { LeftHeader, LeftHeaderPadding } from './left-header';          // --> import the left-header and its padding element

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

9link

10link

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

12link  return (

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

14link          favicon={config.page.favicon}

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

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

17link

18link          scripts={config.page.scripts}

19link          stylesheets={config.page.stylesheets}

20link

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

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

23link          toc={

24link            <ToC search={

25link                  config.misc?.github ? 

26link                  <GithubSearch$

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

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            }>

34link              <LeftHeaderPadding/>                {/* --> add the padding */}

35link              {toc}                               {/* --> on top of ToC content */}

36link            </ToC>

37link          }>

38link      {_content}

39link      <ContentNav content={_content}/>

40link      <LeftHeader/>                               {/* --> also add the header itself! */}

41link    </Page>

42link  )

43link}

linkStep 3: Remove from Footer

Now lets remove the previous hamburger menu from the footer. For this purpose, lets modify contents of .codedoc/content/footer.tsx and create our own custom footer component:

.codedoc/content/footer.tsx
1linkimport { ThemedComponentThis, themedStyle } from '@connectv/jss-theme';

2linkimport { CodedocConfig, CodedocTheme } from '@codedoc/core';

3linkimport { FooterStyle, DarkModeSwitch$, ToCToggle$ } from '@codedoc/core/components';

4link

5link

6linkconst _FooterStyle = themedStyle((theme: CodedocTheme) => {

7link  const parent = FooterStyle.style(theme);                     // --> get the style for original footer

8link  return {

9link    footer: {

10link      extend: parent.footer,                                   // --> simply extend them

11link      '@media screen and (min-width: 1200px)': {               // --> and make the left corner of the footer disappear on desktops

12link        '& .left': { opacity: 0 },

13link      },

14link    }

15link  } as any;

16link});

17link

18link

19linkexport function Footer(

20link  this: ThemedComponentThis,

21link  config: CodedocConfig, 

22link  renderer: any

23link) {

24link  const classes = this.theme.classes(_FooterStyle);

25link

26link  return <div class={classes.footer}>

27link    <div class="left"><ToCToggle$/></div>                          {/* --> the toggle is included, but hidden on desktop via css */}

28link    <div class="main">

29link      <div class="inside">

30link      <a href={`https://github.com/${config.misc?.github?.user}/${config.misc?.github?.repo}/`}

31link                target="_blank">GitHub</a>

32link      </div>

33link    </div>

34link    <div class="right"><DarkModeSwitch$/></div>                    {/* --> also do not forget the dark mode switch. */}

35link  </div>

36link}

Notice how for this recipe we adopted the original code of CODEDOC's own footer.