Merge pull request #212 from mahanthathreyee/rules-and-about-page-UI-change

Rules and about page layout change

src/components/Sidebar/index.tsx

@@ -30,6 +30,7 @@ export const Sidebar: FC<PropsWithChildren<
   HTMLAttributes<HTMLDivElement>
 >> = props => {
   const { children, ...restProps } = props
+  const isBorderVisible = children === undefined ? false : true
 
   return (
     <SC.SidebarWrapper {...restProps}>
@@ -40,7 +41,7 @@ export const Sidebar: FC<PropsWithChildren<
         <SC.Inner>
           {children}
 
-          <SC.Menu>
+          <SC.Menu borderVisibility={isBorderVisible}>
             <MenuItem to="/about">about</MenuItem>
             <MenuItem to="/rules">rules</MenuItem>
             <MenuItem to="/resources">resources</MenuItem>

src/components/Sidebar/styles.tsx

@@ -34,7 +34,8 @@ export const Inner = styled.div`
 export const Menu = styled.nav`
   display: flex;
   flex-direction: column;
-  border-top: 1px dashed #a5a5a5;
+  border-top: ${props =>
+    props.borderVisibility ? "1px dashed #a5a5a5" : "none"};
   margin: 20px 0 40px;
   padding-top: 20px;
 `

src/layouts/Layout/index.tsx

@@ -1,20 +1,20 @@
 import { RouteComponentProps } from "@reach/router"
 import React, { FC, Fragment, useEffect } from "react"
 
-import { Container } from "../../components/Container"
-import { HomeFooter } from "../../components/HomeFooter"
 import { HomeHeader } from "../../components/HomeHeader"
 import { SEO } from "../../components/SEO"
-import { WavesBottom } from "../../components/Waves"
+import { Sidebar } from "../../components/Sidebar"
 import { GlobalStyles } from "../../globalStyles"
 import useLocation from "../../hooks/useLocation"
 import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
 import { ThemeProvider } from "../../ThemeProvider"
+import { ColumnLayout } from "../ColumnLayout"
 import * as SC from "./styles"
 
-export const Layout: FC<RouteComponentProps> = ({ children }) => {
+export const Layout: FC<RouteComponentProps> = ({ path, children }) => {
   const { isHome } = useLocation()
   const { locked, unlock } = useLockBodyScroll()
+  const pageName = path?.split("/")[1] === "rules" ? "Rules" : "About"
 
   useEffect(() => {
     if (locked) {
@@ -37,13 +37,11 @@ export const Layout: FC<RouteComponentProps> = ({ children }) => {
         )}
         {!isHome && (
           <Fragment>
-            <HomeHeader isHome={isHome} />
-            <SC.MainContent>
-              <Container>{children}</Container>
-            </SC.MainContent>
-            <HomeFooter />
-            <WavesBottom />
-            <SC.WavesSpacer />
+            <ColumnLayout
+              title={pageName}
+              sidebar={Sidebar}
+              content={children}
+            />
           </Fragment>
         )}
       </SC.LayoutWrapper>

src/layouts/index.tsx

@@ -28,7 +28,7 @@ export default function BaseLayout({
 
   return (
     <LocationProvider location={location}>
-      <ResolvedLayout>{children}</ResolvedLayout>
+      <ResolvedLayout path={location.pathname}>{children}</ResolvedLayout>
     </LocationProvider>
   )
 }