feat(client): change sidebar ui

hiroppy · Jun 19, 2019 · efbaed8 · efbaed8
1 parent 821050c
commit efbaed8
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 89 deletions.
diff --git a/packages/client/assets/style/common.css b/packages/client/assets/style/common.css
@@ -1,5 +1,5 @@
 @import './variable';
-@import './sidebar';
+@import './sidebar.css';
 @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro'); /* for highlight.js */
 
 body {

diff --git a/packages/client/assets/style/sidebar.css b/packages/client/assets/style/sidebar.css
@@ -12,50 +12,70 @@
   z-index: 100;
 }
 
-.sidebar {
+.bm-burger-button {
+  display: none;
+}
+
+.bm-menu {
+  background: #373a47;
+  padding: 16px;
+}
+
+.bm-item-list {
   color: var(--color-white);
-  font-size: 20px;
-  padding: 30px;
+  font-size: 2rem;
 
-  & svg {
-    cursor: pointer;
-    height: 24px;
-    width: 24px;
-  }
+  & > * {
+    outline: none;
 
-  & a {
-    border: none;
-    cursor: pointer;
-    color: var(--color-white);
+    &:focus {
+      box-shadow: none !important;
+    }
 
-    &:hover {
-      color: var(--color-main);
+    &:not(:first-child) {
+      margin-top: 20px;
     }
   }
+}
 
-  & > div {
-    align-items: center;
-    display: flex;
-    justify-content: space-around;
-    width: 150px;
-  }
+.sidebar-control,
+.sidebar-tools {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
 
-  & .sidebar-social {
-    font-size: 1.7rem;
+  & > *:not(:first-child) {
+    margin-left: 12px;
   }
+}
 
-  & .sidebar-control {
-    margin: 30px 0;
-  }
+.sidebar-tools {
+  justify-content: space-evenly;
+}
 
-  & .sidebar-contents {
-    align-items: flex-start;
-    flex-direction: column;
-    margin: 30px 15px;
-    width: auto;
+.sidebar-contents {
+  display: flex !important;
+  align-items: flex-start;
+  flex-direction: column;
+  width: auto;
 
-    & > a:not(:first-child) {
-      margin-top: 4px;
+  & > li {
+    list-style: inherit;
+    &:first-child {
+      margin-left: 32px;
     }
   }
+
+  & > a:not(:first-child) {
+    margin-top: 4px;
+  }
+
+  & a:focus {
+    outline: none;
+    box-shadow: none !important;
+  }
+}
+
+.sidebar-cursor {
+  cursor: pointer;
 }
diff --git a/packages/client/package-lock.json b/packages/client/package-lock.json
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -21,10 +21,10 @@
     "font-awesome": "4.7.0",
     "prismjs": "1.16.0",
     "react": "16.8.6",
+    "react-burger-menu": "^2.6.10",
     "react-dom": "16.8.6",
     "react-icons": "^3.6.1",
     "react-pose": "^4.0.8",
-    "react-sidebar": "3.0.2",
     "screenfull": "^4.2.0",
     "webslides": "^1.4.2"
   }

diff --git a/packages/client/src/components/AppContainer.js b/packages/client/src/components/AppContainer.js
@@ -15,8 +15,8 @@ export class AppContainer extends React.Component {
     index = index !== null ? index[1] - 1 : 0;
 
     this.state = {
-      opened: false, // TODO: refactor to `status: {}`
       isSidebar: true,
+      isOpenSidebar: false,
       slides: [],
       contentsList: [],
       currentIndex: index,
@@ -119,7 +119,7 @@ export class AppContainer extends React.Component {
     }
 
     if (this.mode === 'host') {
-      this.setState({ opened: false, CommentsListComponent: null });
+      this.setState({ isOpenSidebar: false, CommentsListComponent: null });
     } else if (process.env.IS_LIVE && this.isLive !== 'false') {
       this.setupLive();
     }
@@ -131,8 +131,10 @@ export class AppContainer extends React.Component {
     }
   };
 
-  onSetSidebarOpen = (opened) => {
-    this.setState({ opened });
+  onSetSidebarOpen = ({ isOpen }) => {
+    if (this.state.isOpenSidebar !== isOpen) {
+      this.setState({ isOpenSidebar: isOpen });
+    }
   };
 
   onChangeSlideIndex = (currentIndex) => {
@@ -159,15 +161,18 @@ export class AppContainer extends React.Component {
             {this.state.SidebarComponent && (
               <this.state.SidebarComponent
                 goTo={this.goTo}
-                opened={this.state.opened}
+                isOpen={this.state.isOpenSidebar}
                 terminate={this.terminate}
                 contents={this.state.contentsList}
-                onSetOpen={this.onSetSidebarOpen}
+                onStateChange={this.onSetSidebarOpen}
                 currentIndex={this.state.currentIndex}
                 runPresentationMode={this.onRunPresentationMode}
               />
             )}
-            <MdMenu className="btn-sidebar" onClick={() => this.onSetSidebarOpen(true)} />
+            <MdMenu
+              className="btn-sidebar"
+              onClick={() => this.onSetSidebarOpen({ isOpen: true })}
+            />
           </>
         )}
         {this.ContentComponent && (