shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: display theme background and set dynamic viewport height

Browse Source
This commit is contained in:
Henry
2025-07-02 14:07:09 +01:00
parent 4045ccbfd8
commit 24e418a239
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/web/src/components/Dashboard.tsx
View File

@@ -10,6 +10,7 @@ import {
import { authClient } from "@kan/auth/client"; import { authClient } from "@kan/auth/client";
import { useClickOutside } from "~/hooks/useClickOutside"; import { useClickOutside } from "~/hooks/useClickOutside";
import { useTheme } from "~/providers/theme";
import FeedbackButton from "./FeedbackButton"; import FeedbackButton from "./FeedbackButton";
import SideNavigation from "./SideNavigation"; import SideNavigation from "./SideNavigation";
@@ -24,6 +25,8 @@ export default function Dashboard({
rightPanel, rightPanel,
hasRightPanel = false, hasRightPanel = false,
}: DashboardProps) { }: DashboardProps) {
const theme = useTheme();
const { data: session, isPending: sessionLoading } = authClient.useSession(); const { data: session, isPending: sessionLoading } = authClient.useSession();
const [isSideNavOpen, setIsSideNavOpen] = useState(false); const [isSideNavOpen, setIsSideNavOpen] = useState(false);
const [isRightPanelOpen, setIsRightPanelOpen] = useState(false); const [isRightPanelOpen, setIsRightPanelOpen] = useState(false);
@@ -65,6 +68,8 @@ export default function Dashboard({
} }
}); });
const isDarkMode = theme.activeTheme === "dark";
return ( return (
<> <>
<style jsx global>{` <style jsx global>{`
@@ -72,6 +77,7 @@ export default function Dashboard({
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
min-width: 320px; min-width: 320px;
background-color: ${!isDarkMode ? "hsl(0deg 0% 97.3%)" : "#161616"};
} }
`}</style> `}</style>
<div className="h-screen flex-col items-center bg-light-100 dark:bg-dark-50 md:flex md:min-w-[800px]"> <div className="h-screen flex-col items-center bg-light-100 dark:bg-dark-50 md:flex md:min-w-[800px]">
@@ -131,7 +137,7 @@ export default function Dashboard({
<div className="flex h-full w-full"> <div className="flex h-full w-full">
<div <div
ref={sideNavRef} ref={sideNavRef}
className={`fixed left-0 z-50 h-[calc(100vh-3rem)] transform transition-transform duration-300 ease-in-out md:relative md:h-[calc(100vh-4rem)] md:translate-x-0 ${isSideNavOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"} `} className={`fixed left-0 top-12 z-50 h-[calc(100dvh-3rem)] transform transition-transform duration-300 ease-in-out md:relative md:top-0 md:h-[calc(100vh-4rem)] md:translate-x-0 ${isSideNavOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"} `}
> >
<SideNavigation <SideNavigation
user={{ email: session?.user.email, image: session?.user.image }} user={{ email: session?.user.email, image: session?.user.image }}
@@ -146,11 +152,11 @@ export default function Dashboard({
{hasRightPanel && rightPanel && ( {hasRightPanel && rightPanel && (
<div <div
ref={rightPanelRef} ref={rightPanelRef}
className={`fixed right-0 top-12 z-50 h-[calc(100vh-3rem)] w-80 transform bg-light-200 transition-transform duration-300 ease-in-out dark:bg-dark-100 md:hidden ${ className={`fixed right-0 top-12 z-50 h-[calc(100dvh-3rem)] w-80 transform bg-light-200 transition-transform duration-300 ease-in-out dark:bg-dark-100 md:hidden ${
isRightPanelOpen ? "translate-x-0" : "translate-x-full" isRightPanelOpen ? "translate-x-0" : "translate-x-full"
}`} }`}
> >
<div className="h-full overflow-y-auto">{rightPanel}</div> <div className="h-full">{rightPanel}</div>
</div> </div>
)} )}