diff --git a/src/__tests__/App.test.tsx b/src/__tests__/App.test.tsx
index fd32c345..35daa9c3 100644
--- a/src/__tests__/App.test.tsx
+++ b/src/__tests__/App.test.tsx
@@ -73,11 +73,6 @@ const miscState: General = {
contextMenu: {
show: false,
},
- sidebar: {
- expand: false,
- coverArt: true,
- width: '225px',
- },
modal: {
currentPageIndex: undefined,
show: false,
@@ -391,6 +386,12 @@ const configState: ConfigPage = {
gapSize: 20,
alignment: 'flex-start',
},
+ sidebar: {
+ expand: false,
+ coverArt: true,
+ width: '225px',
+ selected: ['dashboard', 'nowplaying'],
+ },
},
external: {
discord: {
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 5c9ea078..4ea206de 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -153,6 +153,7 @@ const Sidebar = ({
history.push('/');
}
}}
+ hide={!config.lookAndFeel.sidebar.selected.includes('dashboard')}
>
{t('Dashboard')}
@@ -167,6 +168,7 @@ const Sidebar = ({
history.push('/nowplaying');
}
}}
+ hide={!config.lookAndFeel.sidebar.selected.includes('nowplaying')}
>
{t('Now Playing')}
@@ -182,6 +184,7 @@ const Sidebar = ({
history.push('/starred');
}
}}
+ hide={!config.lookAndFeel.sidebar.selected.includes('favorites')}
>
{t('Favorites')}
@@ -197,6 +200,7 @@ const Sidebar = ({
history.push('/library/music');
}
}}
+ hide={!config.lookAndFeel.sidebar.selected.includes('songs')}
>
Songs
@@ -212,6 +216,7 @@ const Sidebar = ({
history.push('/library/album');
}
}}
+ hide={!config.lookAndFeel.sidebar.selected.includes('albums')}
>
{t('Albums')}
@@ -226,6 +231,7 @@ const Sidebar = ({
history.push('/library/artist');
}
}}
+ hide={!config.lookAndFeel.sidebar.selected.includes('artists')}
>
{t('Artists')}
@@ -240,6 +246,7 @@ const Sidebar = ({
history.push('/library/genre');
}
}}
+ hide={!config.lookAndFeel.sidebar.selected.includes('genres')}
>
{t('Genres')}
@@ -256,6 +263,7 @@ const Sidebar = ({
history.push('/library/folder');
}
}}
+ hide={!config.lookAndFeel.sidebar.selected.includes('folders')}
>
{t('Folders')}
@@ -272,6 +280,7 @@ const Sidebar = ({
history.push('/config');
}
}}
+ hide={!config.lookAndFeel.sidebar.selected.includes('config')}
>
{t('Config')}
@@ -285,6 +294,7 @@ const Sidebar = ({
handleToggle();
}
}}
+ hide={!config.lookAndFeel.sidebar.selected.includes('collapse')}
>
{expand ? t('Collapse') : t('Expand')}
@@ -300,32 +310,35 @@ const Sidebar = ({
history.push('/playlist');
}
}}
+ hide={!config.lookAndFeel.sidebar.selected.includes('playlists')}
>
{t('Playlists')}
)}
- {expand && !disableSidebar && (
-
- <>
-
history.push('/playlist')}>
- {t('Playlists')}
-
-
- >
-
- )}
+ {expand &&
+ !disableSidebar &&
+ config.lookAndFeel.sidebar.selected.includes('playlists') && (
+
+ <>
+
history.push('/playlist')}>
+ {t('Playlists')}
+
+
+ >
+
+ )}
diff --git a/src/components/layout/styled.tsx b/src/components/layout/styled.tsx
index 9bc2e9ca..319d8a3f 100644
--- a/src/components/layout/styled.tsx
+++ b/src/components/layout/styled.tsx
@@ -191,9 +191,10 @@ export const FixedSidebar = styled(Sidebar)<{ font: string; $titleBar: string }>
}
`;
-export const SidebarNavItem = styled(Nav.Item)`
+export const SidebarNavItem = styled(Nav.Item)<{ hide?: boolean }>`
padding-right: 5px;
user-select: none;
+ display: ${(props) => (props.hide ? 'none' : 'block')};
a {
color: ${(props) => props.theme.colors.layout.sideBar.button.color} !important;
diff --git a/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx b/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx
index 3b7c9f0e..90e44254 100644
--- a/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx
+++ b/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx
@@ -19,6 +19,7 @@ import {
StyledButton,
StyledPopover,
StyledCheckbox,
+ StyledCheckPicker,
} from '../../shared/styled';
import ListViewConfig from './ListViewConfig';
import { Fonts } from '../Fonts';
@@ -42,6 +43,7 @@ import {
setGridAlignment,
setGridCardSize,
setGridGapSize,
+ setSidebar,
} from '../../../redux/configSlice';
import { Item, Server } from '../../../types';
import ConfigOption from '../ConfigOption';
@@ -294,6 +296,7 @@ export const ThemeConfigPanel = ({ bordered }: any) => {
const startPagePickerContainerRef = useRef(null);
const albumSortDefaultPickerContainerRef = useRef(null);
const musicSortDefaultPickerContainerRef = useRef(null);
+ const sidebarPickerContainerRef = useRef(null);
const titleBarRestartWhisper = React.createRef();
const [themeList, setThemeList] = useState(
_.concat(settings.getSync('themes'), settings.getSync('themesDefault'))
@@ -580,6 +583,71 @@ export const ThemeConfigPanel = ({ bordered }: any) => {
/>
}
/>
+
+ sidebarPickerContainerRef.current}
+ data={[
+ {
+ label: i18n.t('Dashboard'),
+ value: 'dashboard',
+ },
+ {
+ label: i18n.t('Now Playing'),
+ value: 'nowplaying',
+ },
+ {
+ label: i18n.t('Favorites'),
+ value: 'favorites',
+ },
+ {
+ label: i18n.t('Songs'),
+ value: 'songs',
+ },
+ {
+ label: i18n.t('Albums'),
+ value: 'albums',
+ },
+ {
+ label: i18n.t('Artists'),
+ value: 'artists',
+ },
+ {
+ label: i18n.t('Genres'),
+ value: 'genres',
+ },
+ {
+ label: i18n.t('Folders'),
+ value: 'folders',
+ },
+ {
+ label: i18n.t('Config'),
+ value: 'config',
+ },
+ {
+ label: i18n.t('Collapse'),
+ value: 'collapse',
+ },
+ {
+ label: i18n.t('Playlists'),
+ value: 'playlists',
+ },
+ ]}
+ searchable={false}
+ cleanable={false}
+ defaultValue={config.lookAndFeel.sidebar.selected}
+ width={250}
+ disabledItemValues={config.serverType === Server.Subsonic ? ['songs'] : []}
+ onChange={(e: string) => {
+ settings.setSync('sidebar.selected', e);
+ dispatch(setSidebar({ selected: e }));
+ }}
+ />
+
+ }
+ />
);
};
diff --git a/src/components/shared/setDefaultSettings.ts b/src/components/shared/setDefaultSettings.ts
index d908324e..6f85e84a 100644
--- a/src/components/shared/setDefaultSettings.ts
+++ b/src/components/shared/setDefaultSettings.ts
@@ -151,6 +151,22 @@ const setDefaultSettings = (force: boolean) => {
settings.setSync('sidebar.coverArt', true);
}
+ if (force || !settings.hasSync('sidebar.selected')) {
+ settings.setSync('sidebar.selected', [
+ 'dashboard',
+ 'nowplaying',
+ 'favorites',
+ 'songs',
+ 'albums',
+ 'artists',
+ 'genres',
+ 'folders',
+ 'config',
+ 'collapse',
+ 'playlists',
+ ]);
+ }
+
if (force || !settings.hasSync('pagination.music.recordsPerPage')) {
settings.setSync('pagination.music.recordsPerPage', 50);
}
diff --git a/src/redux/configSlice.ts b/src/redux/configSlice.ts
index afc9b093..1c492b24 100644
--- a/src/redux/configSlice.ts
+++ b/src/redux/configSlice.ts
@@ -74,8 +74,22 @@ export interface Sidebar {
expand: boolean;
width: string;
coverArt: boolean;
+ selected: SidebarList[];
}
+export type SidebarList =
+ | 'dashboard'
+ | 'nowplaying'
+ | 'favorites'
+ | 'songs'
+ | 'albums'
+ | 'artists'
+ | 'genres'
+ | 'folders'
+ | 'config'
+ | 'collapse'
+ | 'playlists';
+
export type ColumnList = 'music' | 'album' | 'playlist' | 'artist' | 'genre' | 'mini';
const initialState: ConfigPage = {
@@ -153,6 +167,19 @@ const initialState: ConfigPage = {
expand: Boolean(parsedSettings.sidebar?.expand) || true,
width: String(parsedSettings.sidebar?.width) || '225px',
coverArt: Boolean(parsedSettings.sidebar?.coverArt) || true,
+ selected: parsedSettings.sidebar?.selected || [
+ 'dashboard',
+ 'nowplaying',
+ 'favorites',
+ 'songs',
+ 'albums',
+ 'artists',
+ 'genres',
+ 'folders',
+ 'config',
+ 'collapse',
+ 'playlists',
+ ],
},
},
external: {