theis.gaedigk/stockhome
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: implement dark mode and add custom color palette (theme)

Browse Source
This commit is contained in:
theis.gaedigk
2026-07-09 14:27:43 +02:00
parent bbca5a36cc
commit 580db6afe9
15 changed files with 923 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Sidebar.tsx
+64 -5
View File
@@ -7,20 +7,23 @@ import StorageIcon from "@mui/icons-material/Storage";
import SettingsIcon from "@mui/icons-material/Settings";
import ExitToAppIcon from "@mui/icons-material/ExitToApp";
import TranslateIcon from "@mui/icons-material/Translate";
import Brightness4Icon from "@mui/icons-material/Brightness4";
import MenuIcon from "@mui/icons-material/Menu";
import CloseIcon from "@mui/icons-material/Close";
import { useMatchRoute, useNavigate } from "@tanstack/react-router";
import Cookies from "js-cookie";
import { changeTranslation } from "../utils/uxFncs";
import { useColorScheme } from "@mui/joy/styles";
export const Sidebar = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const matchRoute = useMatchRoute();
const { mode, setMode } = useColorScheme();
const [isOpen, setIsOpen] = useState(false);
const btnClass =
"h-11 w-full justify-start! rounded-2xl px-4 text-left text-sm font-semibold text-slate-700 transition hover:bg-white/80 hover:text-[#0b6bcb] [&_.MuiButton-startDecorator]:mr-3! [&_.MuiButton-startDecorator]:ml-0!";
"h-11 w-full justify-start! rounded-2xl px-4 text-left text-sm font-semibold transition [&_.MuiButton-startDecorator]:mr-3! [&_.MuiButton-startDecorator]:ml-0!";
const variant = (to: string) =>
!!matchRoute({ to, fuzzy: false }) ? "soft" : "plain";
@@ -31,18 +34,30 @@ export const Sidebar = () => {
};
return (
<aside className="flex w-full flex-col gap-6 border-b border-white/80 bg-linear-to-b from-[#f7fbff] via-[#f2f6fb] to-[#eef3f9] px-4 py-5 shadow-[0_20px_60px_rgba(11,107,203,0.08)] sm:px-5 lg:h-full lg:min-h-screen lg:max-w-70 lg:border-b-0 lg:border-r lg:px-6 lg:py-8">
<aside
className="flex w-full flex-col gap-6 px-4 py-5 sm:px-5 lg:h-full lg:min-h-screen lg:max-w-70 lg:border-b-0 lg:border-r lg:px-6 lg:py-8"
style={{
borderBottom: "1px solid var(--joy-palette-divider)",
borderRightColor: "var(--joy-palette-divider)",
background:
"linear-gradient(to bottom, var(--joy-palette-primary-50), var(--joy-palette-background-level1), var(--joy-palette-background-level2))",
boxShadow:
"0 20px 60px color-mix(in srgb, var(--joy-palette-primary-solidBg) 8%, transparent)",
}}
>
<div className="flex items-center justify-between gap-4">
<div className="space-y-2">
<Typography
level="h2"
className="text-[22px] font-semibold text-[#0b6bcb]"
className="text-[22px] font-semibold"
sx={{ color: "var(--joy-palette-primary-solidBg)" }}
>
{t("app-title")}
</Typography>
<Typography
level="body-lg"
className="text-sm font-medium text-slate-500"
className="text-sm font-medium"
sx={{ color: "var(--joy-palette-text-tertiary)" }}
>
{Cookies.get("app-name") ? Cookies.get("app-name") : ""}
</Typography>
@@ -83,6 +98,13 @@ export const Sidebar = () => {
variant={variant("/app/inventory")}
startDecorator={<InventoryIcon />}
className={btnClass}
sx={{
color: "var(--joy-palette-text-secondary)",
"&:hover": {
bgcolor: "var(--joy-palette-background-surface)",
color: "var(--joy-palette-primary-solidBg)",
},
}}
>
{t("inventory")}
</Button>
@@ -91,6 +113,13 @@ export const Sidebar = () => {
variant={variant("/app/add-product")}
startDecorator={<AddBoxIcon />}
className={btnClass}
sx={{
color: "var(--joy-palette-text-secondary)",
"&:hover": {
bgcolor: "var(--joy-palette-background-surface)",
color: "var(--joy-palette-primary-solidBg)",
},
}}
>
{t("add")}
</Button>
@@ -99,6 +128,13 @@ export const Sidebar = () => {
variant={variant("/app/storages")}
startDecorator={<StorageIcon />}
className={btnClass}
sx={{
color: "var(--joy-palette-text-secondary)",
"&:hover": {
bgcolor: "var(--joy-palette-background-surface)",
color: "var(--joy-palette-primary-solidBg)",
},
}}
>
{t("storages")}
</Button>
@@ -107,6 +143,13 @@ export const Sidebar = () => {
variant={variant("/app/app-settings")}
startDecorator={<SettingsIcon />}
className={btnClass}
sx={{
color: "var(--joy-palette-text-secondary)",
"&:hover": {
bgcolor: "var(--joy-palette-background-surface)",
color: "var(--joy-palette-primary-solidBg)",
},
}}
>
{t("settings")}
</Button>
@@ -132,9 +175,25 @@ export const Sidebar = () => {
>
{t("change-translation")}
</Button>
<Button
onClick={() => setMode(mode === "dark" ? "light" : "dark")}
color="neutral"
startDecorator={<Brightness4Icon />}
className={btnClass}
>
{mode === "dark" ? "Light Mode" : "Dark Mode"}
</Button>
</div>
<div className="flex items-center gap-3 rounded-2xl border border-white/70 bg-white/80 px-4 py-3 text-xs font-semibold uppercase tracking-[0.2em] text-[#0b6bcb] shadow-[0_12px_30px_rgba(12,38,78,0.12)]">
<div
className="flex items-center gap-3 rounded-2xl px-4 py-3 text-xs font-semibold uppercase tracking-[0.2em]"
style={{
border: "1px solid var(--joy-palette-divider)",
backgroundColor: "var(--joy-palette-background-surface)",
color: "var(--joy-palette-primary-solidBg)",
boxShadow: "0 12px 30px var(--joy-palette-divider)",
}}
>
<img
src="/favicon.png"
alt="Stockhome"