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[]
}