feat: moves external links to theme definition

Moves the external links out so that they
can be defined at the theme layer.

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 {
             })}
             <Profile isMobile={true} />
             <MenuMobileLinkContainer>
-              <MenuMobileExternalLink content={'Bazar'} href={BAZAR_URL} />
-              <MenuMobileExternalLink
-                content={'Global Site'}
-                href={GLOBAL_SITE_URL}
-              />
+              {this.injected()
+                .themeStore.getExternalNavigationItems()
+                .map((navigationItem, idx) => {
+                  return (
+                    <MenuMobileExternalLink
+                      key={idx}
+                      content={navigationItem.label}
+                      href={navigationItem.url}
+                    />
+                  )
+                })}
             </MenuMobileLinkContainer>
           </PanelMenu>
         </PanelContainer>

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

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

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'
+    }
+  ]
 }
 
 

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