diff options
| -rw-r--r-- | packages/website/ts/@next/components/siteWrap.tsx | 18 |
1 files changed, 16 insertions, 2 deletions
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index 57fdcae43..e0956c582 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -18,6 +18,10 @@ interface State { isMobileNavOpen: boolean; } +interface MainProps { + isNavToggled: boolean; +} + // we proabbly want to put this somewhere else (themes) export interface ThemeInterface { [key: string]: { @@ -32,6 +36,7 @@ export interface ThemeInterface { mobileNavColor: string; dropdownBg: string; dropdownButtonBg: string; + dropdownBorderColor?: string; dropdownColor: string; headerButtonBg: string; footerBg: string; @@ -78,6 +83,9 @@ const GLOBAL_THEMES: ThemeInterface = { textColor: '#000000', paragraphColor: '#777777', linkColor: colors.brandDark, + mobileNavBgUpper: '#FFFFFF', + mobileNavBgLower: '#F3F6F4', + mobileNavColor: '#000000', dropdownBg: '#FFFFFF', dropdownButtonBg: '#F3F6F4', dropdownColor: '#003831', @@ -114,10 +122,16 @@ export class SiteWrap extends React.Component<Props, State> { <ThemeProvider theme={currentTheme}> <> <GlobalStyles /> - <Header isNavToggled={isMobileNavOpen} toggleMobileNav={this.toggleMobileNav} /> + + <Header + isNavToggled={isMobileNavOpen} + toggleMobileNav={this.toggleMobileNav} + /> + <Main isNavToggled={isMobileNavOpen}> {children} </Main> + <Footer/> </> </ThemeProvider> @@ -126,7 +140,7 @@ export class SiteWrap extends React.Component<Props, State> { } } -const Main = styled.main<{ isNavtoggled: boolean }>` +const Main = styled.main<MainProps>` transition: transform 0.5s, opacity 0.5s; transform: translate3d(0, ${props => props.isNavToggled ? '357px' : 0}, 0); opacity: ${props => props.isNavToggled && '0.5'}; |