diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 5f0cf4a..1316963 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -13,8 +13,10 @@ import { IconProps, MarkdownIcon as Markdown, OctofaceIcon as Octoface, + PinIcon as Pin, ReplyIcon as Reply, SearchIcon as Search, + TabIcon as Tab, XIcon as X, } from '@primer/octicons-react' import * as React from 'react' @@ -37,6 +39,8 @@ const iconToComponentMap = { FileMedia, FileCode, File, + Pin, + Tab, } const defaultIcon = 'File' @@ -50,6 +54,8 @@ const typeToIconComponentMap: { grabber: 'Grabber', octoface: 'Octoface', x: 'X', + pin: 'Pin', + tab: 'Tab', gear: 'Gear', folder: 'ChevronRight', 'chevron-down': 'ChevronDown', diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 97bf0e7..b440cfb 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -134,8 +134,27 @@ export function SideBar() { >
- + )} +
) { value={configContext.value.toggleButtonContent} > - enabled === 'persistent', - onChange: checked => (checked ? 'persistent' : 'float'), - }, - }} - /> configContext.value.sidebarToggleMode === 'float' ? false : enabled === null, diff --git a/src/styles/index.scss b/src/styles/index.scss index 3521885..b8ab2ca 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -364,6 +364,10 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- transition: background linear 0.3s; } + &.active .octicon { + color: var(--gitako-icon-primary); + } + .action-icon { color: var(--gitako-icon-tertiary); width: 20px; @@ -373,8 +377,16 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- width: 100%; height: 100%; } + .Pin, + .Tab { + transform: rotateY(180deg); + } } } + + .close-side-bar-button + .close-side-bar-button { + margin-left: 4px; + } } .#{$name}-side-bar-content { @@ -392,7 +404,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- min-height: 62px; // GitHub header height if login flex-shrink: 0; padding: 8px 10px; - padding-right: $button-size + 8px * 2; // space for toggle button + padding-right: $button-size * 2 + 8px; // space for toggle buttons background: var(--gitako-bg-tertiary); .user-and-repo a {