refactor(sidebar-footer): add basic ui

Author: mydearxym

src/containers/Sidebar/Footer.js

@@ -0,0 +1,15 @@
+import React from 'react'
+// eslint-disable-next-line import/named
+import { ICON_CMD } from '@config'
+
+import { Wrapper, InnerWrapper, SettingIcon } from './styles/footer'
+
+const Footer = ({ pin }) => (
+  <Wrapper pin={pin}>
+    <InnerWrapper pin={pin}>
+      <SettingIcon src={`${ICON_CMD}/setting.svg`} />
+    </InnerWrapper>
+  </Wrapper>
+)
+
+export default Footer

src/containers/Sidebar/index.js

@@ -10,6 +10,7 @@ import { connectStore, buildLog } from '@utils'
 
 import Header from './Header'
 import MenuList from './MenuList'
+import Footer from './Footer'
 
 import { Wrapper } from './styles'
 import { useInit, onSortMenuEnd } from './logic'
@@ -45,6 +46,7 @@ const SidebarContainer = ({ sidebar }) => {
         onSortEnd={onSortMenuEnd}
         distance={5}
       />
+      <Footer pin={pin} />
     </Wrapper>
   )
 }

src/containers/Sidebar/styles/footer.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+
+import { theme, cs } from '@utils'
+import Img from '@Img'
+
+export const Wrapper = styled.div`
+  // margin-bottom: ${({ pin }) => (pin ? '0' : '20px')};
+  margin-top: -20px;
+  background: ${theme('sidebar.bg')};
+  box-shadow: -1px -4px 4px 0px rgba(0,0,0,0.2);
+  border-top: 1px dashed #316d7b;
+  z-index: 1;
+`
+export const InnerWrapper = styled.div`
+  height: 5vh;
+  color: wheat;
+  ${cs.flex('align-both')};
+`
+export const SettingIcon = styled(Img)`
+  fill: ${theme('sidebar.menuLink')};
+  width: 16px;
+  height: 16px;
+`