feat: toggle show

src/components/Icon.js

@@ -1,8 +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 Octoface from '../assets/icons/octicons/octoface.svg?svgr'
+import ChevronDown from '../assets/icons/octicons/chevron-down.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'
@@ -19,10 +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 'octoface':
+      return Octoface
+    case 'chevron-down':
+      return ChevronDown
     case 'x':
       return X
     case 'gear':

src/components/Logo.js

@@ -1,18 +0,0 @@
-import preact from 'preact'
-/** @jsx preact.h */
-import Icon from './Icon'
-
-import cx from '../utils/cx'
-
-export default function Logo({ loading, shouldShow, toggleShowSideBar }) {
-  return (
-    <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/SettingsBar.js

@@ -37,7 +37,10 @@ export default class SettingsBar extends preact.Component {
       <div className={'gitako-settings-bar'}>
         <div className={'placeholder-row'}>
           <h3>{activated ? 'Settings' : ''}</h3>
-          <Icon type={activated ? 'x' : 'gear'} className={'settings-icon'} onClick={toggleShowSettings} />
+          {activated
+            ? <Icon type={'chevron-down'} className={'hide-settings-icon'} onClick={toggleShowSettings} />
+            : <Icon type={'gear'} className={'show-settings-icon'} onClick={toggleShowSettings} />
+          }
         </div>
         {activated && (
           <div className={'gitako-settings-bar-content'}>

src/components/SideBar.js

@@ -3,7 +3,7 @@ import Portal from 'preact-portal'
 /** @jsx preact.h */
 
 import FileExplorer from './FileExplorer'
-import Logo from './Logo'
+import ToggleShowButton from './ToggleShowButton'
 import MetaBar from './MetaBar'
 import SettingsBar from './SettingsBar'
 
@@ -112,15 +112,6 @@ 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, showSettings } = this.state
     return (
@@ -133,10 +124,12 @@ export default class SideBar extends preact.Component {
   }
 
   render() {
-    const { shouldShow, showSettings, hasAccessToken } = this.state
+    const { shouldShow, showSettings, hasAccessToken, loading } = this.state
     return (
       <div className={cx('gitako', { hidden: !shouldShow })}>
-        {this.renderLogo()}
+        <Portal into={this.logoContainerElement}>
+          <ToggleShowButton shouldShow={shouldShow} toggleShowSideBar={this.toggleShowSideBar} />
+        </Portal>
         <div className={'gitako-side-bar'}>
           {this.renderContent()}
           <SettingsBar

src/components/ToggleShowButton.js

@@ -0,0 +1,13 @@
+import preact from 'preact'
+/** @jsx preact.h */
+import Icon from './Icon'
+
+import cx from '../utils/cx'
+
+export default function Logo({ shouldShow, toggleShowSideBar }) {
+  return (
+    <div className={cx('gitako-toggle-show-button-wrapper', { collapsed: !shouldShow })} onClick={toggleShowSideBar}>
+      <Icon className={'action-icon'} type={shouldShow ? 'x' : 'octoface'} />
+    </div>
+  )
+}

src/content.less

@@ -65,27 +65,45 @@
   visibility: hidden;
 }
 
-.@{name}-logo-wrapper {
-  margin-right: 12px;
-  padding-right: 12px;
-  border-right: 1px solid #ffffffbf;
-  height: 100%;
-  line-height: 1;
+.@{name}-toggle-show-button-wrapper {
+  @animation-duration: .8s;
+  position: fixed;
+  top: 5px;
+  left: 0;
+  z-index: 2;
   display: inline-flex;
+  justify-content: center;
   align-items: center;
   cursor: pointer;
-
-  .action-icon {
-    width: 12px;
-    height: 24px;
-    margin-right: 8px;
+  width: 30px;
+  height: 30px;
+  will-change: transform;
+  transform: translateX(225px);
+  transition: all @animation-duration ease;
+  border: 1px solid transparent;
+  @media screen and (min-width: @content-width) {
+    transform: translateX(~'calc((100vw - ' @content-width ~') / 2 + ' 225px ~')');
   }
 
-  .@{name}-logo {
-    font-family: monospace;
-    vertical-align: middle;
-    cursor: pointer;
-    -webkit-font-smoothing: antialiased;
+  &.collapsed {
+    border-color: #999999;
+    background: #f5f5f5;
+    border-radius: 3px;
+
+    @media screen and (max-width: @content-width) {
+      transform: translateX(5px);
+    }
+
+    .action-icon {
+      color: #0366d6;
+    }
+  }
+
+  .action-icon {
+    color: #333;
+    width: 16px;
+    height: 20px;
+    transition: all @animation-duration ease;
   }
 }
 
@@ -259,15 +277,3 @@
     }
   }
 }
-
-@keyframes rainbow {
-  0% {
-    background-position: 9% 91%;
-  }
-  50% {
-    background-position: 91% 9%;
-  }
-  100% {
-    background-position: 9% 91%;
-  }
-}

src/utils/DOMHelper.js

@@ -24,17 +24,13 @@ function setBodyIndent(shouldShowGitako) {
 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
+  if (logoElement) {
+    return logoElement
   }
-  return logoElement
+  const logoMountElement = document.createElement('div')
+  logoMountElement.setAttribute('class', 'gitako-logo-mount-point')
+  document.body.appendChild(logoMountElement)
+  return logoMountElement
 }
 
 /**