feat: link to the forum

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}
@@ -37,6 +45,9 @@ export const Sidebar: FC<PropsWithChildren<
             <MenuItem to="/rules">rules</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};
+`