feat: core toggle mode switch

src/components/SideBar.tsx

@@ -51,14 +51,15 @@ export function SideBar() {
     }
   }, [hasMetaData])
 
+  const sidebarToggleMode = configContext.value.sidebarToggleMode
   const $shouldShow = useStateIO(false)
   const shouldShow = $shouldShow.value
   React.useEffect(() => {
-    DOMHelper.setBodyIndent(shouldShow)
+    DOMHelper.setBodyIndent(shouldShow && sidebarToggleMode === 'persistent')
     if (shouldShow) {
       DOMHelper.focusFileExplorer() // TODO: verify if it works
     }
-  }, [shouldShow])
+  }, [shouldShow, sidebarToggleMode])
 
   const intelligentToggle = configContext.value.intelligentToggle
 
@@ -105,7 +106,12 @@ export function SideBar() {
         <Portal into={$logoContainerElement.value}>
           {!shouldShow && <ToggleShowButton error={error} onClick={toggleShowSideBar} />}
         </Portal>
-        <SideBarBodyWrapper className={cx({ hidden: error || !shouldShow })} baseSize={baseSize}>
+        <SideBarBodyWrapper
+          className={cx(`toggle-mode-${sidebarToggleMode}`, {
+            hidden: error || !shouldShow,
+          })}
+          baseSize={baseSize}
+        >
           <div className={'gitako-side-bar-body'}>
             <div className={'close-side-bar-button-position'}>
               <button className={'close-side-bar-button'} onClick={toggleShowSideBar}>

src/components/settings/SidebarSettings.tsx

@@ -90,6 +90,16 @@ export function SidebarSettings(props: React.PropsWithChildren<Props>) {
           value={configContext.value.toggleButtonContent}
         ></SelectInput>
       </Field>
+      <SimpleToggleField
+        field={{
+          key: 'sidebarToggleMode',
+          label: 'Dock sidebar on expand',
+          overwrite: {
+            value: enabled => enabled === 'persistent',
+            onChange: checked => (checked ? 'persistent' : 'float'),
+          },
+        }}
+      />
       <SimpleToggleField
         field={{
           key: 'intelligentToggle',

src/styles/index.scss

@@ -272,8 +272,18 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
     z-index: $minimal-z-index;
     display: flex;
 
-    &.hidden {
-      @extend %hidden;
+    &.toggle-mode-persistent {
+      &.hidden {
+        @extend %hidden;
+      }
+    }
+
+    &.toggle-mode-float {
+      left: 0%;
+      transition: all 0.3s ease;
+      &.hidden {
+        left: -100%;
+      }
     }
 
     .gitako-side-bar-body-wrapper-content {
@@ -315,10 +325,6 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
     border-left: 1px solid var(--gitako-border-overlay);
     overflow: hidden;
 
-    &.hidden {
-      @extend %hidden;
-    }
-
     .octicon {
       transition: transform 0.3s ease;
       color: var(--gitako-icon-tertiary);

src/utils/configHelper.ts

@@ -14,6 +14,7 @@ export type Config = {
   toggleButtonContent: 'logo' | 'octoface'
   recursiveToggleFolder: 'shift' | 'alt'
   searchMode: SearchMode
+  sidebarToggleMode: 'persistent' | 'float'
 }
 
 enum configKeys {
@@ -29,6 +30,7 @@ enum configKeys {
   toggleButtonContent = 'toggleButtonContent',
   recursiveToggleFolder = 'recursiveToggleFolder',
   searchMode = 'searchMode',
+  sidebarToggleMode = 'sidebarToggleMode',
 }
 
 const defaultConfigs: Config = {
@@ -44,6 +46,7 @@ const defaultConfigs: Config = {
   toggleButtonContent: 'logo',
   recursiveToggleFolder: 'shift',
   searchMode: 'fuzzy',
+  sidebarToggleMode: 'float',
 }
 
 const configKeyArray = Object.values(configKeys)