vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-06-19 18:04:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix sidebar image animate out

Browse Source
This commit is contained in:
jeffvli
2025-11-28 20:06:37 -08:00
parent c376f3add3
commit 2101b2e1c7
1 changed files with 60 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/sidebar/components/sidebar.tsx
+6 -12
View File
@@ -59,6 +59,7 @@ export const Sidebar = () => {
const { sidebarItems } = useGeneralSettings(); const { sidebarItems } = useGeneralSettings();
const { windowBarStyle } = useWindowSettings(); const { windowBarStyle } = useWindowSettings();
const showImage = useAppStore((state) => state.sidebar.image);
const sidebarItemsWithRoute: SidebarItemType[] = useMemo(() => { const sidebarItemsWithRoute: SidebarItemType[] = useMemo(() => {
if (!sidebarItems) return []; if (!sidebarItems) return [];
@@ -131,17 +132,18 @@ export const Sidebar = () => {
)} )}
</Accordion> </Accordion>
</ScrollArea> </ScrollArea>
<motion.div className={styles.serverSelectorWrapper} layout> <AnimatePresence initial={false} mode="popLayout">
<motion.div className={styles.serverSelectorWrapper} key="server-selector" layout>
<ServerSelector /> <ServerSelector />
</motion.div> </motion.div>
<SidebarImage /> {showImage && <SidebarImage />}
</AnimatePresence>
</div> </div>
); );
}; };
const SidebarImage = () => { const SidebarImage = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const showImage = useAppStore((state) => state.sidebar.image);
const leftWidth = useAppStore((state) => state.sidebar.leftWidth); const leftWidth = useAppStore((state) => state.sidebar.leftWidth);
const { setSideBar } = useAppStoreActions(); const { setSideBar } = useAppStoreActions();
const currentSong = usePlayerSong(); const currentSong = usePlayerSong();
@@ -176,8 +178,6 @@ const SidebarImage = () => {
}; };
return ( return (
<AnimatePresence initial={false} mode="popLayout">
{showImage && (
<motion.div <motion.div
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
className={styles.imageContainer} className={styles.imageContainer}
@@ -201,11 +201,7 @@ const SidebarImage = () => {
openDelay={500} openDelay={500}
> >
{upsizedImageUrl ? ( {upsizedImageUrl ? (
<img <img className={styles.sidebarImage} loading="eager" src={upsizedImageUrl} />
className={styles.sidebarImage}
loading="eager"
src={upsizedImageUrl}
/>
) : ( ) : (
<ImageUnloader /> <ImageUnloader />
)} )}
@@ -235,7 +231,5 @@ const SidebarImage = () => {
}} }}
/> />
</motion.div> </motion.div>
)}
</AnimatePresence>
); );
}; };