Improve responsive styles for playerbar

This commit is contained in:
jeffvli 2023-06-04 16:02:40 -07:00 committed by Jeff
parent cf43bf360e
commit f380eccc68
5 changed files with 62 additions and 31 deletions

View file

@ -20,13 +20,6 @@ import { LibraryItem } from '/@/renderer/api/types';
import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
const LeftControlsContainer = styled.div`
display: flex;
width: 100%;
height: 100%;
padding-left: 1rem;
`;
const ImageWrapper = styled.div`
position: relative;
display: flex;
@ -85,11 +78,23 @@ const LineItem = styled.div<{ $secondary?: boolean }>`
}
`;
const LeftControlsContainer = styled.div`
display: flex;
width: 100%;
height: 100%;
padding-left: 1rem;
@media (max-width: 640px) {
${ImageWrapper} {
display: none;
}
}
`;
export const LeftControls = () => {
const { setSideBar } = useAppStoreActions();
const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
// const hideImage = useAppStore((state) => state.sidebar.image);
const { image, collapsed } = useSidebarStore();
const hideImage = image && !collapsed;
const currentSong = useCurrentSong();