move server selector inline with other collapsed sidebar items

This commit is contained in:
jeffvli
2025-12-28 17:27:01 -08:00
parent b2579c031d
commit b26b6eab09
2 changed files with 30 additions and 39 deletions
@@ -12,27 +12,9 @@
max-height: calc(100vh - 149px);
}
.server-selector-container {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
padding: var(--theme-spacing-md);
cursor: pointer;
background: var(--theme-colors-sidebar-background);
border-top: 1px solid var(--theme-colors-sidebar-border);
}
.server-icon {
width: 2rem;
height: 2rem;
object-fit: cover;
border-radius: var(--theme-radius-md);
}
.scroll-area-with-server {
padding-bottom: calc(2rem + 2 * var(--theme-spacing-md));
}
@@ -80,7 +80,7 @@ export const CollapsedSidebar = () => {
[styles.web]: windowBarStyle === Platform.WEB,
})}
>
<ScrollArea className={currentServer ? styles.scrollAreaWithServer : undefined}>
<ScrollArea>
{sidebarCollapsedNavigation && (
<Group gap={0} grow>
<CollapsedSidebarButton onClick={() => navigate(-1)}>
@@ -119,28 +119,37 @@ export const CollapsedSidebar = () => {
to={item.route}
/>
))}
</ScrollArea>
{currentServer && (
<DropdownMenu offset={0} position="right-end" width={240}>
<DropdownMenu.Target>
<div className={styles.serverSelectorContainer}>
<img
className={styles.serverIcon}
src={
currentServer.type === ServerType.NAVIDROME
? NavidromeLogo
: currentServer.type === ServerType.JELLYFIN
? JellyfinLogo
: OpenSubsonicLogo
{currentServer && (
<DropdownMenu offset={0} position="right-end" width={240}>
<DropdownMenu.Target>
<CollapsedSidebarItem
activeIcon={null}
component={Flex}
icon={
<img
className={styles.serverIcon}
src={
currentServer.type === ServerType.NAVIDROME
? NavidromeLogo
: currentServer.type === ServerType.JELLYFIN
? JellyfinLogo
: OpenSubsonicLogo
}
/>
}
label={''}
py="md"
style={{
cursor: 'pointer',
}}
/>
</div>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<ServerSelectorItems />
</DropdownMenu.Dropdown>
</DropdownMenu>
)}
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<ServerSelectorItems />
</DropdownMenu.Dropdown>
</DropdownMenu>
)}
</ScrollArea>
</motion.div>
);
};