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); 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 { .server-icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
object-fit: cover; object-fit: cover;
border-radius: var(--theme-radius-md); 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, [styles.web]: windowBarStyle === Platform.WEB,
})} })}
> >
<ScrollArea className={currentServer ? styles.scrollAreaWithServer : undefined}> <ScrollArea>
{sidebarCollapsedNavigation && ( {sidebarCollapsedNavigation && (
<Group gap={0} grow> <Group gap={0} grow>
<CollapsedSidebarButton onClick={() => navigate(-1)}> <CollapsedSidebarButton onClick={() => navigate(-1)}>
@@ -119,28 +119,37 @@ export const CollapsedSidebar = () => {
to={item.route} to={item.route}
/> />
))} ))}
</ScrollArea> {currentServer && (
{currentServer && ( <DropdownMenu offset={0} position="right-end" width={240}>
<DropdownMenu offset={0} position="right-end" width={240}> <DropdownMenu.Target>
<DropdownMenu.Target> <CollapsedSidebarItem
<div className={styles.serverSelectorContainer}> activeIcon={null}
<img component={Flex}
className={styles.serverIcon} icon={
src={ <img
currentServer.type === ServerType.NAVIDROME className={styles.serverIcon}
? NavidromeLogo src={
: currentServer.type === ServerType.JELLYFIN currentServer.type === ServerType.NAVIDROME
? JellyfinLogo ? NavidromeLogo
: OpenSubsonicLogo : currentServer.type === ServerType.JELLYFIN
? JellyfinLogo
: OpenSubsonicLogo
}
/>
} }
label={''}
py="md"
style={{
cursor: 'pointer',
}}
/> />
</div> </DropdownMenu.Target>
</DropdownMenu.Target> <DropdownMenu.Dropdown>
<DropdownMenu.Dropdown> <ServerSelectorItems />
<ServerSelectorItems /> </DropdownMenu.Dropdown>
</DropdownMenu.Dropdown> </DropdownMenu>
</DropdownMenu> )}
)} </ScrollArea>
</motion.div> </motion.div>
); );
}; };