Merge pull request #201 from the-programmers-hangout/feat-tweak-menu-links

feat: tweak menu links & add link to forum

src/components/HomeHeader/index.tsx

@@ -14,6 +14,15 @@ interface IMenuItemProps {
 }
 
 const MenuItem: FC<IMenuItemProps> = ({ children, to }) => {
+  if (to.match(/^(https?:\/\/)/)) {
+    return (
+      <SC.MenuItemExternal href={to} target="_blank">
+        <SC.MenuItemText>{children}</SC.MenuItemText>
+        <SC.MenuItemLine />
+      </SC.MenuItemExternal>
+    )
+  }
+
   return (
     <SC.MenuItem
       to={to}
@@ -83,10 +92,11 @@ export const HomeHeader: FC<IHomeHeaderProps> = ({ isHome }) => {
         <SC.Menu>
           <MenuItem to="/about">about</MenuItem>
           <MenuItem to="/rules">rules</MenuItem>
-          <MenuItem to="/">faq</MenuItem>
-          <MenuItem to="/">hotbot</MenuItem>
           <MenuItem to="/resources">resources</MenuItem>
           <MenuItem to="/archives">tech spotlights</MenuItem>
+          <MenuItem to="https://forum.theprogrammershangout.com">
+            forum
+          </MenuItem>
         </SC.Menu>
         <DiscordButton>join us</DiscordButton>
         {isHome && <HomePartner />}

src/components/HomeHeader/styles.tsx

@@ -1,6 +1,6 @@
 import { Link } from "gatsby"
 import Particles from "react-particles-js"
-import styled from "styled-components"
+import styled, { css } from "styled-components"
 import TPHLogo from "../../images/tph-logo.svg"
 
 export const HomeHeaderWrapper = styled.header`
@@ -144,7 +144,7 @@ export const MenuItemLine = styled.div`
   transition: all 0.3s;
 `
 
-export const MenuItem = styled(Link)`
+export const menuItemStyles = css`
   display: flex;
   align-items: center;
   font-size: 22px;
@@ -198,3 +198,11 @@ export const MenuItem = styled(Link)`
     }
   }
 `
+
+export const MenuItem = styled(Link)`
+  ${menuItemStyles};
+`
+
+export const MenuItemExternal = styled.a`
+  ${menuItemStyles};
+`

src/components/Sidebar/index.tsx

@@ -11,6 +11,14 @@ interface IMenuItemProps {
 }
 
 const MenuItem: FC<IMenuItemProps> = ({ children, to }) => {
+  if (to.match(/^(https?:\/\/)/)) {
+    return (
+      <SC.MenuItemExternal href={to} target="_blank">
+        {children}
+      </SC.MenuItemExternal>
+    )
+  }
+
   return (
     <SC.MenuItem to={to} activeClassName="active">
       {children}
@@ -35,10 +43,11 @@ export const Sidebar: FC<PropsWithChildren<
           <SC.Menu>
             <MenuItem to="/about">about</MenuItem>
             <MenuItem to="/rules">rules</MenuItem>
-            <MenuItem to="/faq">faq</MenuItem>
-            <MenuItem to="/">hotbot</MenuItem>
             <MenuItem to="/resources">resources</MenuItem>
             <MenuItem to="/archives">tech spotlights</MenuItem>
+            <MenuItem to="https://forum.theprogrammershangout.com">
+              forum
+            </MenuItem>
           </SC.Menu>
 
           <ThemeToggler />

src/components/Sidebar/styles.tsx

@@ -1,5 +1,5 @@
 import { Link } from "gatsby"
-import styled from "styled-components"
+import styled, { css } from "styled-components"
 
 export const SidebarWrapper = styled.div`
   box-sizing: border-box;
@@ -39,7 +39,7 @@ export const Menu = styled.nav`
   padding-top: 20px;
 `
 
-export const MenuItem = styled(Link)`
+export const menuItemStyles = css`
   padding: 4px 0;
   font-size: 20px;
   color: ${props => props.theme.sidebar.foreground};
@@ -54,3 +54,11 @@ export const MenuItem = styled(Link)`
     font-weight: 700;
   }
 `
+
+export const MenuItem = styled(Link)`
+  ${menuItemStyles};
+`
+
+export const MenuItemExternal = styled.a`
+  ${menuItemStyles};
+`