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 {