pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make collapsed sidebar navigation configurable

Browse source
This commit is contained in:
jeffvli 2023-09-22 17:55:03 -07:00
parent 8cbc25a932
commit 47dc83f360
3 changed files with 43 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/renderer/features/settings/components/general/sidebar-settings.tsx
View file

@ -87,6 +87,15 @@ export const SidebarSettings = () => {
});
};
const handleSetSidebarCollapsedNavigation = (e: ChangeEvent<HTMLInputElement>) => {
setSettings({
general: {
...settings,
sidebarCollapsedNavigation: e.target.checked,
},
});
};
const isSaveButtonDisabled = isEqual(settings.sidebarItems, localSidebarItems);
return (
@ -101,6 +110,16 @@ export const SidebarSettings = () => {
description="Show playlist list in sidebar"
title="Sidebar playlist list"
/>
<SettingsOptions
control={
<Switch
checked={settings.sidebarCollapsedNavigation}
onChange={handleSetSidebarCollapsedNavigation}
/>
}
description="Show navigation buttons in the collapsed sidebar"
title="Sidebar (collapsed) navigation"
/>
<SettingsOptions
control={
<Button

42
src/renderer/features/sidebar/components/collapsed-sidebar.tsx
View file

@ -95,7 +95,7 @@ const sidebarItemMap = {
export const CollapsedSidebar = () => {
const navigate = useNavigate();
const { windowBarStyle } = useWindowSettings();
const { sidebarItems } = useGeneralSettings();
const { sidebarItems, sidebarCollapsedNavigation } = useGeneralSettings();
const sidebarItemsWithRoute: (SidebarItemType & {
activeIcon: IconType;
@ -119,26 +119,28 @@ export const CollapsedSidebar = () => {
scrollHideDelay={0}
scrollbarSize={8}
>
<Group
grow
spacing={0}
style={{
borderRight: 'var(--sidebar-border)',
}}
>
<CollapsedSidebarButton
component={UnstyledButton}
onClick={() => navigate(-1)}
{sidebarCollapsedNavigation && (
<Group
grow
spacing={0}
style={{
borderRight: 'var(--sidebar-border)',
}}
>
<RiArrowLeftSLine size="22" />
</CollapsedSidebarButton>
<CollapsedSidebarButton
component={UnstyledButton}
onClick={() => navigate(1)}
>
<RiArrowRightSLine size="22" />
</CollapsedSidebarButton>
</Group>
<CollapsedSidebarButton
component={UnstyledButton}
onClick={() => navigate(-1)}
>
<RiArrowLeftSLine size="22" />
</CollapsedSidebarButton>
<CollapsedSidebarButton
component={UnstyledButton}
onClick={() => navigate(1)}
>
<RiArrowRightSLine size="22" />
</CollapsedSidebarButton>
</Group>
)}
<DropdownMenu position="right-start">
<DropdownMenu.Target>
<CollapsedSidebarItem

2
src/renderer/store/settings.store.ts
View file

@ -113,6 +113,7 @@ export interface SettingsState {
resume: boolean;
showQueueDrawerButton: boolean;
sideQueueType: SideQueueType;
sidebarCollapsedNavigation: boolean;
sidebarItems: SidebarItemType[];
sidebarPlaylistList: boolean;
skipButtons: {
@ -208,6 +209,7 @@ const initialState: SettingsState = {
resume: false,
showQueueDrawerButton: false,
sideQueueType: 'sideQueue',
sidebarCollapsedNavigation: true,
sidebarItems,
sidebarPlaylistList: true,
skipButtons: {