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
1import { ThemedComponentThis, themedStyle } from '@connectv/jss-theme'; // --> for theming

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

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

4

5

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

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

8 position: 'fixed',

9 top: 24,

10 left: 24,

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

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

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

14 },

15 },

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

17 height: 80,

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

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

20 marginTop: -32,

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

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

23 '@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

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

25 background: theme.toc.dark.background,

26 }

27 },

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

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

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

31 },

32 }

33}));

34

35

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

37 this: ThemedComponentThis,

38 _: any,

39 renderer: any,

40) {

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

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

43}

44

45

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

47 this: ThemedComponentThis,

48 _: any,

49 renderer: any,

50) {

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

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

53}

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
1import { RendererLike } from '@connectv/html';

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

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

4

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

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

7import { LeftHeader, LeftHeaderPadding } from './left-header'; // --> import the left-header and its padding element

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

9

10

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

12 return (

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

14 favicon={config.page.favicon}

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

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

17

18 scripts={config.page.scripts}

19 stylesheets={config.page.stylesheets}

20

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

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

23 toc={

24 <ToC search={

25 config.misc?.github ?

26 <GithubSearch$

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

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

29 root={config.src.base}

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

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

32 /> : false

33 }>

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

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

36 </ToC>

37 }>

38 {_content}

39 <ContentNav content={_content}/>

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

41 </Page>

42 )

43}


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
1import { ThemedComponentThis, themedStyle } from '@connectv/jss-theme';

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

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

4

5

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

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

8 return {

9 footer: {

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

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

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

13 },

14 }

15 } as any;

16});

17

18

19export function Footer(

20 this: ThemedComponentThis,

21 config: CodedocConfig,

22 renderer: any

23) {

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

25

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

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

28 <div class="main">

29 <div class="inside">

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

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

32 </div>

33 </div>

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

35 </div>

36}


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