initial FBS admin

src/containers/TheSidebar.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import {
+  CCreateElement,
+  CSidebar,
+  CSidebarBrand,
+  CSidebarNav,
+  CSidebarNavDivider,
+  CSidebarNavTitle,
+  CSidebarMinimizer,
+  CSidebarNavDropdown,
+  CSidebarNavItem,
+} from '@coreui/react'
+
+import CIcon from '@coreui/icons-react'
+
+// sidebar nav config
+import navigation from './_nav'
+
+const TheSidebar = () => {
+  const dispatch = useDispatch()
+  const show = useSelector(state => state.sidebarShow)
+
+  return (
+    <CSidebar
+      show={show}
+      onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })}
+    >
+      <CSidebarBrand className="d-md-down-none" to="/">
+        <h2>FBS</h2>
+        <CIcon
+          className="c-sidebar-brand-minimized"
+          name="sygnet"
+          height={35}
+        />
+      </CSidebarBrand>
+      <CSidebarNav>
+
+        <CCreateElement
+          items={navigation}
+          components={{
+            CSidebarNavDivider,
+            CSidebarNavDropdown,
+            CSidebarNavItem,
+            CSidebarNavTitle
+          }}
+        />
+      </CSidebarNav>
+      <CSidebarMinimizer className="c-d-md-down-none"/>
+    </CSidebar>
+  )
+}
+
+export default React.memo(TheSidebar)