Star

MIT License
Copyright © 2020
CONNECT-platform

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}


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.

Recipe: Hamburger Menu on TopStep 1: Create a Top-Left HeaderStep 2: Add it to ContentStep 3: Remove from Footer

Home Overview CLI Theme

Markdownchevron_right
Code Featureschevron_right

Images & Assets

Configurationchevron_right
Customizationchevron_right