diff --git a/src/plugins/betterFolders/FolderSideBar.tsx b/src/plugins/betterFolders/FolderSideBar.tsx index 5504e1d5..97959873 100644 --- a/src/plugins/betterFolders/FolderSideBar.tsx +++ b/src/plugins/betterFolders/FolderSideBar.tsx @@ -18,16 +18,19 @@ import ErrorBoundary from "@components/ErrorBoundary"; import { LazyComponent } from "@utils/react"; -import { find, findByPropsLazy } from "@webpack"; -import { React, useStateFromStores } from "@webpack/common"; +import { find, findByPropsLazy, findStoreLazy } from "@webpack"; +import { useStateFromStores } from "@webpack/common"; +import type { CSSProperties } from "react"; import { ExpandedGuildFolderStore, settings } from "."; +const ChannelRTCStore = findStoreLazy("ChannelRTCStore"); const Animations = findByPropsLazy("a", "animated", "useTransition"); const GuildsBar = LazyComponent(() => find(m => m.type?.toString().includes('("guildsnav")'))); export default ErrorBoundary.wrap(guildsBarProps => { const expandedFolders = useStateFromStores([ExpandedGuildFolderStore], () => ExpandedGuildFolderStore.getExpandedFolders()); + const isFullscreen = useStateFromStores([ChannelRTCStore], () => ChannelRTCStore.isFullscreenInContext()); const Sidebar = ( { const visible = !!expandedFolders.size; const guilds = document.querySelector(guildsBarProps.className.split(" ").map(c => `.${c}`).join("")); + // We need to display none if we are in fullscreen. Yes this seems horrible doing with css, but it's literally how Discord does it. + // Also display flex otherwise to fix scrolling + const barStyle = { + display: isFullscreen ? "none" : "flex", + } as CSSProperties; + if (!guilds || !settings.store.sidebarAnim) { return visible - ?
{Sidebar}
+ ?
{Sidebar}
: null; } @@ -54,9 +63,9 @@ export default ErrorBoundary.wrap(guildsBarProps => { leave={{ width: 0 }} config={{ duration: 200 }} > - {(style, show) => + {(animationStyle, show) => show && ( - + {Sidebar} )