diff options
Diffstat (limited to 'packages/website/ts/@next/components/siteWrap.tsx')
-rw-r--r-- | packages/website/ts/@next/components/siteWrap.tsx | 22 |
1 files changed, 19 insertions, 3 deletions
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index f2851d2d2..57fdcae43 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -14,12 +14,28 @@ interface Props { children: any; } +interface State { + isMobileNavOpen: boolean; +} + // we proabbly want to put this somewhere else (themes) export interface ThemeInterface { [key: string]: { bgColor: string; + darkBgColor: string; + lightBgColor: string; textColor: string; + paragraphColor: string; linkColor: string; + mobileNavBgUpper: string; + mobileNavBgLower: string; + mobileNavColor: string; + dropdownBg: string; + dropdownButtonBg: string; + dropdownColor: string; + headerButtonBg: string; + footerBg: string; + footerColor: string; }; } @@ -71,7 +87,7 @@ const GLOBAL_THEMES: ThemeInterface = { }, }; -export class SiteWrap extends React.Component<Props> { +export class SiteWrap extends React.Component<Props, State> { public state = { isMobileNavOpen: false, }; @@ -85,7 +101,7 @@ export class SiteWrap extends React.Component<Props> { }); } - public render(): React.Node { + public render(): React.ReactNode { const { children, theme = 'dark', @@ -110,7 +126,7 @@ export class SiteWrap extends React.Component<Props> { } } -const Main = styled.main` +const Main = styled.main<{ isNavtoggled: boolean }>` transition: transform 0.5s, opacity 0.5s; transform: translate3d(0, ${props => props.isNavToggled ? '357px' : 0}, 0); opacity: ${props => props.isNavToggled && '0.5'}; |