feat: toggle show/hide sidebar

package.json

@@ -14,7 +14,8 @@
   "dependencies": {
     "octicons": "^7.1.0",
     "pjax": "^0.2.4",
-    "preact": "^8.2.6"
+    "preact": "^8.2.6",
+    "preact-portal": "^1.1.3"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",

src/components/Icon.js

@@ -1,6 +1,8 @@
 import preact from 'preact'
 /** @jsx preact.h */
 
+import ChevronLeft from '../assets/icons/octicons/chevron-left.svg?svgr'
+import ChevronRight from '../assets/icons/octicons/chevron-right.svg?svgr'
 import TriangleRight from '../assets/icons/octicons/triangle-right.svg?svgr'
 import FilePdf from '../assets/icons/octicons/file-pdf.svg?svgr'
 import File from '../assets/icons/octicons/file.svg?svgr'
@@ -17,6 +19,10 @@ import Gear from '../assets/icons/octicons/gear.svg?svgr'
 
 function getSVGIconComponent(type) {
   switch (type) {
+    case 'chevron-left':
+      return ChevronLeft
+    case 'chevron-right':
+      return ChevronRight
     case 'x':
       return X
     case 'gear':

src/components/Logo.js

@@ -1,14 +1,18 @@
 import preact from 'preact'
 /** @jsx preact.h */
+import Icon from './Icon'
 
 import cx from '../utils/cx'
 
-export default function Logo({ loading }) {
+export default function Logo({ loading, shouldShow, toggleShowSideBar }) {
   return (
-    <div className={'gitako-logo-wrapper Header'}>
-      <h3>&nbsp;</h3>
-      <h3 className={cx('gitako-logo', { invisible: loading })}>Gitako</h3>
-      <h3 className={cx('gitako-logo breath', { invisible: !loading })}>Gitako</h3>
+    <div className={'gitako-logo-wrapper'} onClick={toggleShowSideBar}>
+      <Icon className={'action-icon'} type={shouldShow ? 'chevron-left' : 'chevron-right'} />
+      <label className={cx('gitako-logo', { breath: loading })}>
+        {shouldShow ? 'hide' : 'show'}
+        <br />
+        Gitako
+      </label>
     </div>
   )
 }

src/components/SideBar.js

@@ -1,4 +1,5 @@
 import preact from 'preact'
+import Portal from 'preact-portal'
 /** @jsx preact.h */
 
 import FileExplorer from './FileExplorer'
@@ -44,6 +45,7 @@ export default class SideBar extends preact.Component {
       this.setShouldShow(URLHelper.isInCodePage(metaData))
       const treeData = await GitHubHelper.getTreeData({ ...metaData, accessToken })
       this.setState({ treeData, loading: false })
+      this.logoContainerElement = DOMHelper.insertLogo()
 
       window.addEventListener('pjax:send', this.onPJAXStart)
       window.addEventListener('pjax:complete', this.onPJAXEnd)
@@ -88,6 +90,11 @@ export default class SideBar extends preact.Component {
     DOMHelper.setBodyIndent(shouldShow)
   }
 
+  toggleShowSideBar = () => {
+    const { shouldShow } = this.state
+    this.setShouldShow(!shouldShow)
+  }
+
   toggleShowSettings = () => {
     const { showSettings } = this.state
     this.setState({ showSettings: !showSettings })
@@ -105,12 +112,17 @@ export default class SideBar extends preact.Component {
     )
   }
 
+  renderLogo() {
+    const { loading, shouldShow } = this.state
+    return (
+      <Portal into={this.logoContainerElement}>
+        <Logo loading={loading} shouldShow={shouldShow} toggleShowSideBar={this.toggleShowSideBar} />
+      </Portal>
+    )
+  }
+
   renderContent() {
-    const {
-      errorDueToPrivateRepo,
-      metaData,
-      treeData,
-    } = this.state
+    const { errorDueToPrivateRepo, metaData, treeData } = this.state
     return (
       <div className={'gitako-side-bar-content'}>
         {metaData && <MetaBar metaData={metaData} />}
@@ -121,16 +133,11 @@ export default class SideBar extends preact.Component {
   }
 
   render() {
-    const {
-      shouldShow,
-      loading,
-      showSettings,
-      hasAccessToken,
-    } = this.state
+    const { shouldShow, showSettings, hasAccessToken } = this.state
     return (
       <div className={cx('gitako', { hidden: !shouldShow })}>
+        {this.renderLogo()}
         <div className={'gitako-side-bar'}>
-          <Logo loading={loading} />
           {this.renderContent()}
           <SettingsBar
             toggleShowSettings={this.toggleShowSettings}

src/content.less

@@ -65,6 +65,30 @@
   visibility: hidden;
 }
 
+.@{name}-logo-wrapper {
+  margin-right: 12px;
+  padding-right: 12px;
+  border-right: 1px solid #ffffffbf;
+  height: 100%;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+
+  .action-icon {
+    width: 12px;
+    height: 24px;
+    margin-right: 8px;
+  }
+
+  .@{name}-logo {
+    font-family: monospace;
+    vertical-align: middle;
+    cursor: pointer;
+    -webkit-font-smoothing: antialiased;
+  }
+}
+
 .@{name} {
   .@{name}-side-bar {
     position: fixed;
@@ -87,48 +111,6 @@
       .hidden;
     }
 
-    .@{name}-logo-wrapper.Header {
-      position: relative;
-
-      .@{name}-logo {
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        cursor: default;
-        user-select: none;
-        -webkit-font-smoothing: antialiased;
-
-        &.breath {
-          background: linear-gradient(
-            135deg,
-            #ff2400,
-            #e81d1d,
-            #e8b71d,
-            #e3e81d,
-            #1de840,
-            #1ddde8,
-            #2b1de8,
-            #dd00f3,
-            #dd00f3
-          );
-          background-size: 450% 450%;
-          animation: rainbow 9s ease infinite;
-          -webkit-text-fill-color: transparent;
-          -webkit-background-clip: text;
-          background-clip: text;
-
-          // https://stackoverflow.com/questions/10814178/css-performance-relative-to-translatez0
-          -webkit-transform: rotateZ(360deg);
-          transform: rotateZ(360deg);
-        }
-      }
-    }
-
     .octicon {
       transition: 0.3s ease;
       color: rgba(3, 47, 98, 0.55);

src/utils/DOMHelper.js

@@ -17,6 +17,26 @@ function setBodyIndent(shouldShowGitako) {
   }
 }
 
+/**
+ * add the logo element into DOM
+ * 
+ */
+function insertLogo() {
+  const logoSelector = '.gitako .gitako-logo'
+  const logoElement = document.querySelector(logoSelector)
+  if (!logoElement) {
+    const logoMountElement = document.createElement('div')
+    logoMountElement.setAttribute('class', 'gitako-logo-mount-point')
+    const headerSelector = 'header'
+    const headerElement = document.querySelector(headerSelector)
+    const headerContentWrapper = headerElement.children.item(0)
+    const headerContents = headerContentWrapper.children.item(0)
+    headerContents.insertBefore(logoMountElement, headerContents.children.item(0))
+    return logoMountElement
+  }
+  return logoElement
+}
+
 /**
  * content above the file navigation bar is same for all pages of the repo
  * use this function to scroll down a bit to hide them
@@ -308,6 +328,7 @@ export default {
   focusFileExplorer,
   getCurrentPageType,
   getRepoPageType,
+  insertLogo,
   setBodyIndent,
   scrollToNodeElement,
   scrollToRepoContent,