Extract sidebar to its own folder

src/components/shell/layout/index.js

@@ -1,19 +1,16 @@
 import React, { Fragment, useState, useEffect, useRef, useContext } from 'react'
-import { Transition } from 'react-transition-group'
 import { ThemeProvider } from 'styled-components'
 import GlobalStyles from 'styles/global'
 import Fuse from 'fuse.js'
-import Logo from 'components/shell/logo'
-import Nav from 'components/shell/nav'
 import Search from 'components/shell/search'
 import Widgets from 'components/shell/widgets'
+import Sidebar from 'components/shell/sidebar'
 import LightSwitch from 'components/shell/light-switch'
-import getKerbs, { config } from 'utils/getKerbs'
+import getKerbs from 'utils/getKerbs'
 import { FiMenu } from 'react-icons/fi'
 import LightContext from 'utils/lightContext'
 import theme from 'styles/theme'
 
-import { duration, overlayStyles, sideSheetStyles } from './transitions'
 import * as S from './styles'
 
 const Layout = ({ toggleLightSwitch }) => {
@@ -87,14 +84,13 @@ const Layout = ({ toggleLightSwitch }) => {
       <Fragment>
         <GlobalStyles />
         <S.Wrapper>
-          <S.Sidebar>
-            <Logo>{config?.name || 'unnamed project'}</Logo>
-            <Nav
-              items={navItems}
-              activeItem={activeItem}
-              onClick={handleNavbarItemClick}
-            />
-          </S.Sidebar>
+          <Sidebar
+            items={navItems}
+            activeItem={activeItem}
+            onClick={handleNavbarItemClick}
+            shouldShowSideSheet={openSideSheet}
+            toggleSideSheet={toggleSideSheet}
+          />
           <S.Content>
             <S.Header>
               <S.SideSheetButton onClick={toggleSideSheet}>
@@ -105,30 +101,6 @@ const Layout = ({ toggleLightSwitch }) => {
             </S.Header>
             <Widgets widgets={kerbs} />
           </S.Content>
-          <Transition
-            appear
-            mountOnEnter
-            unmountOnExit
-            in={openSideSheet}
-            timeout={duration}
-          >
-            {state => (
-              <Fragment>
-                <S.Overlay
-                  style={overlayStyles(state)}
-                  onClick={toggleSideSheet}
-                />
-                <S.SideSheet style={sideSheetStyles(state)}>
-                  <Logo>{config?.name || 'unnamed project'}</Logo>
-                  <Nav
-                    items={navItems}
-                    activeItem={activeItem}
-                    onClick={handleNavbarItemClick}
-                  />
-                </S.SideSheet>
-              </Fragment>
-            )}
-          </Transition>
         </S.Wrapper>
       </Fragment>
     </ThemeProvider>

src/components/shell/layout/styles.js

@@ -1,8 +1,7 @@
 import styled, { css } from 'styled-components'
 import media from 'styles/media'
 import { Button as LightSwitch } from 'components/shell/light-switch/styles'
-
-const sidebarSize = 180
+import { size as sidebarSize } from 'components/shell/sidebar/styles'
 
 export const Wrapper = styled.div`
   ${({ theme: { spacing } }) => css`
@@ -12,17 +11,6 @@ export const Wrapper = styled.div`
   `}
 `
 
-export const Sidebar = styled.div`
-  ${({ theme: { spacing } }) => css`
-    width: ${sidebarSize}px;
-    margin-right: ${spacing.big}px;
-    position: fixed;
-    height: calc(100vh - ${spacing.big}px);
-
-    ${media.lessThan('tablet')`display: none;`}
-  `}
-`
-
 export const Content = styled.div`
   ${({ theme: { spacing } }) => css`
     max-width: 100%;
@@ -62,28 +50,3 @@ export const Header = styled.div`
     }
   `}
 `
-
-export const Overlay = styled.div`
-  ${({ theme: { spacing } }) => css`
-    background-color: rgba(0, 0, 0, 0.5);
-    width: 100vw;
-    height: 100vh;
-    top: 0;
-    left: 0;
-    position: fixed;
-    z-index: 10;
-  `}
-`
-
-export const SideSheet = styled.div`
-  ${({ theme: { spacing, colors, dark } }) => css`
-    background-color: ${dark ? colors.gray[10] : colors.white};
-    width: ${sidebarSize + spacing.big * 2}px;
-    padding: ${spacing.big}px;
-    height: 100vh;
-    top: 0;
-    left: 0;
-    position: fixed;
-    z-index: 20;
-  `}
-`

src/components/shell/sidebar/index.js

@@ -0,0 +1,44 @@
+import React, { Fragment } from 'react'
+import { Transition } from 'react-transition-group'
+import Logo from 'components/shell/logo'
+import Nav from 'components/shell/nav'
+import { config } from 'utils/getKerbs'
+
+import { duration, overlayStyles, sideSheetStyles } from './transitions'
+import * as S from './styles'
+
+const Sidebar = ({
+  items,
+  activeItem,
+  onClick,
+  shouldShowSideSheet,
+  toggleSideSheet
+}) => {
+  return (
+    <Fragment>
+      <S.Sidebar>
+        <Logo>{config?.name || 'unnamed project'}</Logo>
+        <Nav items={items} activeItem={activeItem} onClick={onClick} />
+      </S.Sidebar>
+      <Transition
+        appear
+        mountOnEnter
+        unmountOnExit
+        in={shouldShowSideSheet}
+        timeout={duration}
+      >
+        {state => (
+          <Fragment>
+            <S.Overlay style={overlayStyles(state)} onClick={toggleSideSheet} />
+            <S.SideSheet style={sideSheetStyles(state)}>
+              <Logo>{config?.name || 'unnamed project'}</Logo>
+              <Nav items={items} activeItem={activeItem} onClick={onClick} />
+            </S.SideSheet>
+          </Fragment>
+        )}
+      </Transition>
+    </Fragment>
+  )
+}
+
+export default Sidebar

src/components/shell/sidebar/styles.js

@@ -0,0 +1,40 @@
+import styled, { css } from 'styled-components'
+import media from 'styles/media'
+
+export const size = 180
+
+export const Sidebar = styled.div`
+  ${({ theme: { spacing } }) => css`
+    width: ${size}px;
+    margin-right: ${spacing.big}px;
+    position: fixed;
+    height: calc(100vh - ${spacing.big}px);
+
+    ${media.lessThan('tablet')`display: none;`}
+  `}
+`
+
+export const Overlay = styled.div`
+  ${({ theme: { spacing } }) => css`
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    position: fixed;
+    z-index: 10;
+  `}
+`
+
+export const SideSheet = styled.div`
+  ${({ theme: { spacing, colors, dark } }) => css`
+    background-color: ${dark ? colors.gray[10] : colors.white};
+    width: ${size + spacing.big * 2}px;
+    padding: ${spacing.big}px;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    position: fixed;
+    z-index: 20;
+  `}
+`