diff --git a/src/pages/common/Header/Menu/MenuMobile/MenuMobilePanel.tsx b/src/pages/common/Header/Menu/MenuMobile/MenuMobilePanel.tsx index a79e657e34..470f2f2c4d 100644 --- a/src/pages/common/Header/Menu/MenuMobile/MenuMobilePanel.tsx +++ b/src/pages/common/Header/Menu/MenuMobile/MenuMobilePanel.tsx @@ -6,9 +6,10 @@ import { Box } from 'rebass/styled-components' import Profile from 'src/pages/common/Header/Menu/Profile/Profile' import MenuMobileLink from 'src/pages/common/Header/Menu/MenuMobile/MenuMobileLink' import MenuMobileExternalLink from './MenuMobileExternalLink' -import { BAZAR_URL, GLOBAL_SITE_URL } from 'src/utils/urls' import { AuthWrapper } from 'src/components/Auth/AuthWrapper' import { getSupportedModules } from 'src/modules' +import { inject } from 'mobx-react' +import { ThemeStore } from 'src/stores/Theme/theme.store' const PanelContainer = styled(Box)` width: 100%; @@ -43,7 +44,14 @@ export const MenuMobileLinkContainer = styled(Box as any)` margin-top: 5px; ` +@inject('themeStore') export class MenuMobilePanel extends Component { + injected() { + return this.props as { + themeStore: ThemeStore + } + } + render() { return ( <> @@ -67,11 +75,17 @@ export class MenuMobilePanel extends Component { })} - - + {this.injected() + .themeStore.getExternalNavigationItems() + .map((navigationItem, idx) => { + return ( + + ) + })} diff --git a/src/stores/Theme/theme.store.tsx b/src/stores/Theme/theme.store.tsx index 10d7984e99..b719dccf3b 100644 --- a/src/stores/Theme/theme.store.tsx +++ b/src/stores/Theme/theme.store.tsx @@ -22,4 +22,11 @@ export class ThemeStore { this.currentTheme = themeMap[themeId] } } + + public getExternalNavigationItems():{ + label: string + url: string + }[] { + return this.currentTheme.externalLinks || []; + } } diff --git a/src/themes/precious-plastic/index.ts b/src/themes/precious-plastic/index.ts index 14dc3fdeeb..34a09a9b19 100644 --- a/src/themes/precious-plastic/index.ts +++ b/src/themes/precious-plastic/index.ts @@ -8,6 +8,16 @@ const Theme: PlatformTheme = { howtoHeading: `Learn & share how to recycle, build and work with plastic`, styles, academyResource: 'https://onearmy.github.io/academy/', + externalLinks: [ + { + url: 'https://bazar.preciousplastic.com/', + label: 'Bazar' + }, + { + url: 'https://preciousplastic.com/', + label: 'Global Site' + }, + ] } export default Theme diff --git a/src/themes/project-kamp/index.ts b/src/themes/project-kamp/index.ts index f6c81f5e20..ffb7837ed8 100644 --- a/src/themes/project-kamp/index.ts +++ b/src/themes/project-kamp/index.ts @@ -8,6 +8,16 @@ const Theme: PlatformTheme = { howtoHeading: `Learn & share how to recycle, build and work`, styles, academyResource: 'https://project-kamp-academy.netlify.app/', + externalLinks: [ + { + url: 'https://projectkamp.com/support.html', + label: 'Support Us' + }, + { + url: 'https://projectkamp.com/', + label: 'Project Homepage' + } + ] } diff --git a/src/themes/types.tsx b/src/themes/types.tsx index d4ba5c79ad..58e9d205e9 100644 --- a/src/themes/types.tsx +++ b/src/themes/types.tsx @@ -1,7 +1,13 @@ +interface LinkList { + label: string + url: string +} + export interface PlatformTheme { siteName: string logo: string howtoHeading: string styles: any academyResource: string + externalLinks: LinkList[] }