This is an automated email from the ASF dual-hosted git repository.
twice pushed a commit to branch unstable
in repository https://gitbox.apache.org/repos/asf/kvrocks-controller.git
The following commit(s) were added to refs/heads/unstable by this push:
new 9ae1849 feat(webui/header): move tabs to right & add breadcrumb
navigation (#314)
9ae1849 is described below
commit 9ae18494266a4f6df5f645636b6f7ab61eb6deca
Author: Agnik Misra <[email protected]>
AuthorDate: Wed Jun 4 09:16:42 2025 +0530
feat(webui/header): move tabs to right & add breadcrumb navigation (#314)
* Redesigned header: moved tabs to right and added breadcrumb
* prettier fix
---------
Co-authored-by: abc <[email protected]>
---
webui/src/app/globals.css | 40 ++++++-
webui/src/app/layout.tsx | 2 +
webui/src/app/page.tsx | 6 +-
webui/src/app/ui/banner.tsx | 199 ++++++++++++++++++++++++++---------
webui/src/app/ui/breadcrumb.tsx | 225 ++++++++++++++++++++++++++++++++++++++++
webui/src/app/ui/footer.tsx | 1 +
webui/src/app/ui/nav-links.tsx | 51 ++++++++-
webui/src/app/ui/sidebar.tsx | 8 +-
8 files changed, 467 insertions(+), 65 deletions(-)
diff --git a/webui/src/app/globals.css b/webui/src/app/globals.css
index 3f2afaa..a6f0c72 100644
--- a/webui/src/app/globals.css
+++ b/webui/src/app/globals.css
@@ -78,7 +78,6 @@
background: #777;
}
-/* smooth transitions for dark mode */
body {
transition: background-color 0.3s ease;
}
@@ -91,12 +90,19 @@ body {
.MuiAppBar-root {
transition:
background-color 0.3s ease,
- color 0.3s ease !important;
+ color 0.3s ease,
+ height 0.3s ease,
+ box-shadow 0.3s ease,
+ border-bottom 0.3s ease !important;
}
.dark .MuiAppBar-root {
- background-color: var(--primary-dark, #1565c0) !important;
- opacity: 0.9;
+ background-color: rgba(21, 101, 192, 0.95) !important;
+}
+
+.navbar-dark-mode {
+ background-color: rgba(21, 101, 192, 0.95) !important;
+ color: white !important;
}
.dark .MuiAppBar-root,
@@ -119,3 +125,29 @@ body {
.MuiAppBar-root[class*="navbar-dark-mode"] {
background-color: #1565c0 !important;
}
+
+.MuiButton-root,
+.MuiIconButton-root,
+.MuiListItemButton-root {
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.MuiButton-root:focus-visible,
+.MuiIconButton-root:focus-visible {
+ outline: 2px solid rgba(25, 118, 210, 0.5);
+ outline-offset: 2px;
+}
+
+img {
+ transition: all 0.3s ease;
+}
+
+.interactive-element {
+ transition:
+ transform 0.2s ease,
+ opacity 0.2s ease;
+}
+.interactive-element:hover {
+ transform: translateY(-2px);
+ opacity: 0.95;
+}
diff --git a/webui/src/app/layout.tsx b/webui/src/app/layout.tsx
index d2b4bef..6059eb0 100644
--- a/webui/src/app/layout.tsx
+++ b/webui/src/app/layout.tsx
@@ -24,6 +24,7 @@ import Banner from "./ui/banner";
import { Container } from "@mui/material";
import { ThemeProvider } from "./theme-provider";
import Footer from "./ui/footer";
+import Breadcrumb from "./ui/breadcrumb";
const inter = Inter({ subsets: ["latin"] });
@@ -47,6 +48,7 @@ export default function RootLayout({
maxWidth={false}
disableGutters
>
+ <Breadcrumb />
{children}
<Footer />
</Container>
diff --git a/webui/src/app/page.tsx b/webui/src/app/page.tsx
index 945f7fa..64ac1dd 100644
--- a/webui/src/app/page.tsx
+++ b/webui/src/app/page.tsx
@@ -102,10 +102,10 @@ export default function Home() {
<Image
src="/logo.svg"
alt="Kvrocks Logo"
- layout="fill"
- objectFit="contain"
+ fill
+ className="animate-[pulse_4s_ease-in-out_infinite]
object-contain"
priority
- className="animate-[pulse_4s_ease-in-out_infinite]"
+ style={{ objectFit: "contain" }}
/>
</div>
diff --git a/webui/src/app/ui/banner.tsx b/webui/src/app/ui/banner.tsx
index 904b969..9badd30 100644
--- a/webui/src/app/ui/banner.tsx
+++ b/webui/src/app/ui/banner.tsx
@@ -31,6 +31,7 @@ import FolderIcon from "@mui/icons-material/Folder";
import MenuBookIcon from "@mui/icons-material/MenuBook";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
+import Link from "next/link";
const links = [
{
@@ -55,6 +56,7 @@ export default function Banner() {
const { isDarkMode, toggleTheme } = useTheme();
const pathname = usePathname();
const [mounted, setMounted] = useState(false);
+ const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const storedTheme = localStorage.getItem("theme");
@@ -65,80 +67,179 @@ export default function Banner() {
document.getElementById("navbar")?.classList.add("navbar-dark-mode");
}
+ const handleScroll = () => {
+ if (window.scrollY > 10) {
+ setScrolled(true);
+ } else {
+ setScrolled(false);
+ }
+ };
+
+ window.addEventListener("scroll", handleScroll);
setMounted(true);
- }, []);
- // Generate breadcrumb from pathname
- const breadcrumbs = pathname.split("/").filter(Boolean);
+ return () => {
+ window.removeEventListener("scroll", handleScroll);
+ };
+ }, []);
return (
<AppBar
position="fixed"
elevation={0}
id="navbar"
- className={`backdrop-blur-sm transition-colors duration-300 ${
- isDarkMode
- ? "navbar-dark-mode bg-opacity-95"
- : "bg-white bg-opacity-95 text-gray-800"
- }`}
+ className="transition-all duration-300"
sx={{
- bgcolor: isDarkMode
- ? "rgba(21, 101, 192, 0.98) !important"
- : "rgba(255, 255, 255, 0.98)",
- backdropFilter: "blur(8px)",
- borderBottom: isDarkMode
- ? "1px solid rgba(30, 64, 175, 0.3)"
- : "1px solid rgba(229, 231, 235, 0.6)",
+ backdropFilter: "blur(10px)",
+ backgroundColor: isDarkMode
+ ? scrolled
+ ? "rgba(21, 101, 192, 0.95)"
+ : "rgba(21, 101, 192, 0.85)"
+ : scrolled
+ ? "rgba(255, 255, 255, 0.95)"
+ : "rgba(255, 255, 255, 0.85)",
+ boxShadow: scrolled
+ ? isDarkMode
+ ? "0 4px 20px rgba(0,0,0,0.2)"
+ : "0 4px 20px rgba(0,0,0,0.1)"
+ : "none",
+ borderBottom: scrolled
+ ? "none"
+ : isDarkMode
+ ? "1px solid rgba(255,255,255,0.1)"
+ : "1px solid rgba(0,0,0,0.05)",
+ height: scrolled ? "60px" : "72px",
}}
>
- <Container maxWidth={false}>
- <Toolbar className="flex justify-between">
- <div className="flex items-center">
- <Image src="/logo.svg" width={40} height={40}
alt="logo" className="mr-4" />
- <Typography
- variant="h6"
- component="div"
- className="hidden font-medium text-primary
dark:text-primary-light sm:block"
- >
- Apache Kvrocks Controller
- </Typography>
- </div>
+ <Container maxWidth={false} sx={{ px: { xs: 2, md: 4 } }}>
+ <Toolbar
+ disableGutters
+ sx={{
+ height: scrolled ? "60px" : "72px",
+ minHeight: "unset !important",
+ transition: "height 0.3s ease",
+ }}
+ >
+ <Link
+ href="/"
+ className="flex items-center no-underline
transition-all duration-300"
+ >
+ <Box className="relative flex items-center
transition-all duration-300">
+ <Image
+ src="/logo.svg"
+ width={scrolled ? 36 : 40}
+ height={scrolled ? 36 : 40}
+ alt="Apache Kvrocks"
+ className={`mr-3 transition-all duration-300 ${
+ isDarkMode ? "brightness-110 filter" : ""
+ }`}
+ style={{ height: "auto" }} // Add style to
maintain aspect ratio
+ />
+ <Box className="flex flex-col">
+ <Typography
+ variant={scrolled ? "subtitle1" : "h6"}
+ component="div"
+ sx={{
+ lineHeight: 1.2,
+ letterSpacing: "0.01em",
+ fontSize: scrolled ? "1rem" :
"1.125rem",
+ fontWeight: 500,
+ transition: "all 0.3s ease",
+ color: isDarkMode ? "#fff" : "#1976d2",
+ }}
+ className="hidden sm:block"
+ >
+ Apache Kvrocks
+ </Typography>
+ <Typography
+ variant="caption"
+ sx={{
+ fontSize: scrolled ? "0.7rem" :
"0.75rem",
+ opacity: scrolled ? 0.9 : 1,
+ fontWeight: 500,
+ transition: "all 0.3s ease",
+ color: isDarkMode ?
"rgba(255,255,255,0.8)" : "#42a5f5",
+ }}
+ className="hidden sm:block"
+ >
+ Controller
+ </Typography>
+ </Box>
+ </Box>
+ </Link>
+
+ <Box sx={{ flexGrow: 1 }} />
- <Box className="hidden items-center space-x-1 md:flex">
- <NavLinks links={links} />
+ <Box className="hidden items-center gap-1 md:flex">
+ <NavLinks links={links} scrolled={scrolled} />
</Box>
<Box className="flex items-center">
- {breadcrumbs.length > 0 && (
- <Box className="mr-4 hidden items-center
rounded-md bg-gray-100 px-4 py-1 text-sm dark:bg-dark-border md:flex">
- {breadcrumbs.map((breadcrumb, i) => (
- <Typography
- key={i}
- variant="body2"
- className="text-gray-500
dark:text-gray-400"
- >
- {i > 0 && " / "}
- {breadcrumb}
- </Typography>
- ))}
- </Box>
- )}
-
<Tooltip title="Toggle dark mode">
- <IconButton onClick={toggleTheme} color="inherit"
size="small">
- {isDarkMode ? <Brightness7Icon /> :
<Brightness4Icon />}
+ <IconButton
+ onClick={toggleTheme}
+ size="small"
+ sx={{
+ width: scrolled ? 32 : 36,
+ height: scrolled ? 32 : 36,
+ padding: 0.75,
+ backgroundColor: isDarkMode
+ ? "rgba(255,255,255,0.1)"
+ : "rgba(0,0,0,0.05)",
+ transition: "all 0.3s ease",
+ "&:hover": {
+ backgroundColor: isDarkMode
+ ? "rgba(255,255,255,0.2)"
+ : "rgba(0,0,0,0.08)",
+ },
+ marginLeft: 1,
+ borderRadius: "50%",
+ }}
+ >
+ {isDarkMode ? (
+ <Brightness7Icon
+ fontSize="small"
+ sx={{ color: "rgba(255,255,255,0.9)" }}
+ />
+ ) : (
+ <Brightness4Icon
+ fontSize="small"
+ sx={{ color: "rgba(0,0,0,0.7)" }}
+ />
+ )}
</IconButton>
</Tooltip>
<Tooltip title="GitHub Repository">
<IconButton
- color="inherit"
href="https://github.com/apache/kvrocks-controller";
target="_blank"
size="small"
- className="ml-2"
+ sx={{
+ width: scrolled ? 32 : 36,
+ height: scrolled ? 32 : 36,
+ padding: 0.75,
+ backgroundColor: isDarkMode
+ ? "rgba(255,255,255,0.1)"
+ : "rgba(0,0,0,0.05)",
+ transition: "all 0.3s ease",
+ "&:hover": {
+ backgroundColor: isDarkMode
+ ? "rgba(255,255,255,0.2)"
+ : "rgba(0,0,0,0.08)",
+ },
+ marginLeft: 1,
+ borderRadius: "50%",
+ }}
>
- <GitHubIcon />
+ <GitHubIcon
+ fontSize="small"
+ sx={{
+ color: isDarkMode
+ ? "rgba(255,255,255,0.9)"
+ : "rgba(0,0,0,0.7)",
+ }}
+ />
</IconButton>
</Tooltip>
</Box>
diff --git a/webui/src/app/ui/breadcrumb.tsx b/webui/src/app/ui/breadcrumb.tsx
new file mode 100644
index 0000000..da7f20f
--- /dev/null
+++ b/webui/src/app/ui/breadcrumb.tsx
@@ -0,0 +1,225 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+"use client";
+
+import { Box, Typography, Chip, Paper } from "@mui/material";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { useState, useEffect } from "react";
+import HomeIcon from "@mui/icons-material/Home";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import FolderIcon from "@mui/icons-material/Folder";
+import StorageIcon from "@mui/icons-material/Storage";
+import DnsIcon from "@mui/icons-material/Dns";
+import DeviceHubIcon from "@mui/icons-material/DeviceHub";
+import { fetchClusters, listShards, listNodes } from "@/app/lib/api";
+
+interface BreadcrumbItem {
+ name: string;
+ displayName: string;
+ url: string;
+ icon: React.ReactNode | null;
+ isNumeric: boolean;
+ isLast: boolean;
+}
+
+export default function Breadcrumb() {
+ const pathname = usePathname();
+ const [breadcrumbItems, setBreadcrumbItems] =
useState<BreadcrumbItem[]>([]);
+ const [loading, setLoading] = useState(false);
+
+ useEffect(() => {
+ if (pathname === "/") {
+ setBreadcrumbItems([]);
+ setLoading(false);
+ return;
+ }
+
+ const generateBreadcrumbs = async () => {
+ setLoading(true);
+ const pathSegments = pathname.split("/").filter(Boolean);
+
+ if (pathSegments.length === 0) {
+ setBreadcrumbItems([]);
+ setLoading(false);
+ return;
+ }
+
+ const items: BreadcrumbItem[] = [];
+
+ for (let index = 0; index < pathSegments.length; index++) {
+ const segment = pathSegments[index];
+ const url = `/${pathSegments.slice(0, index + 1).join("/")}`;
+ const isLast = index === pathSegments.length - 1;
+ const isNumeric = !isNaN(Number(segment));
+
+ let icon = null;
+ let displayName = segment;
+
+ if (index === 0 && segment === "namespaces") {
+ icon = <FolderIcon fontSize="small"
className="text-primary/70" />;
+ displayName = "Namespaces";
+ } else if (segment === "clusters") {
+ icon = <StorageIcon fontSize="small"
className="text-primary/70" />;
+ displayName = "Clusters";
+ } else if (segment === "shards") {
+ icon = <DnsIcon fontSize="small"
className="text-primary/70" />;
+ displayName = "Shards";
+ } else if (segment === "nodes") {
+ icon = <DeviceHubIcon fontSize="small"
className="text-primary/70" />;
+ displayName = "Nodes";
+ } else if (isNumeric) {
+ const prevSegment = pathSegments[index - 1];
+ if (prevSegment === "shards") {
+ displayName = `Shard ${parseInt(segment) + 1}`;
+ icon = null;
+ } else if (prevSegment === "nodes") {
+ displayName = `Node ${parseInt(segment) + 1}`;
+ icon = null;
+ } else {
+ displayName = `ID: ${segment}`;
+ icon = null;
+ }
+ } else {
+ // For namespace and cluster names, capitalize first letter
+ displayName = segment.charAt(0).toUpperCase() +
segment.slice(1);
+
+ const prevSegment = pathSegments[index - 1];
+ if (prevSegment === "namespaces") {
+ icon = null;
+ } else if (prevSegment === "clusters") {
+ icon = null;
+ }
+ }
+
+ items.push({
+ name: segment,
+ displayName,
+ url,
+ icon,
+ isNumeric,
+ isLast,
+ });
+ }
+
+ setBreadcrumbItems(items);
+ setLoading(false);
+ };
+
+ generateBreadcrumbs();
+ }, [pathname]);
+
+ if (pathname === "/" || breadcrumbItems.length === 0) return null;
+
+ return (
+ <Paper elevation={0} className="mt-4 w-full border-0 bg-white px-6
py-3 dark:bg-dark-paper">
+ <Box className="flex items-center overflow-x-auto py-1 pt-2">
+ <Link
+ href="/"
+ className="flex items-center text-gray-600
transition-colors hover:text-primary dark:text-gray-300
dark:hover:text-primary-light"
+ >
+ <HomeIcon fontSize="small" className="mr-2" />
+ <Typography variant="body2" className="font-medium">
+ Home
+ </Typography>
+ </Link>
+
+ {breadcrumbItems.map((item, index) => (
+ <Box key={index} className="flex items-center">
+ <ChevronRightIcon
+ fontSize="small"
+ className="mx-3 text-gray-400 dark:text-gray-500"
+ />
+
+ {item.isLast ? (
+ <Box className="flex items-center">
+ {item.icon && <span
className="mr-2">{item.icon}</span>}
+ {item.isNumeric ? (
+ <Chip
+ label={item.displayName}
+ size="small"
+ className="border border-primary/20
font-medium dark:border-primary-dark/30"
+ sx={{
+ height: "24px",
+ backgroundColor: (theme) =>
+ theme.palette.mode === "dark"
+ ? "rgba(21, 101, 192,
0.95)"
+ : "rgba(25, 118, 210,
0.08)",
+ color: (theme) =>
+ theme.palette.mode === "dark"
+ ? "#ffffff"
+ : "#1976d2",
+ "& .MuiChip-label": {
+ px: 1.5,
+ fontSize: "0.75rem",
+ fontWeight: 600,
+ },
+ }}
+ />
+ ) : (
+ <Typography
+ variant="body2"
+ className="font-semibold"
+ sx={{
+ backgroundColor: (theme) =>
+ theme.palette.mode === "dark"
+ ? "rgba(21, 101, 192,
0.95)"
+ : "rgba(25, 118, 210,
0.08)",
+ color: (theme) =>
+ theme.palette.mode === "dark"
+ ? "#ffffff"
+ : "#1976d2",
+ padding: "4px 10px",
+ borderRadius: "16px",
+ }}
+ >
+ {item.displayName}
+ </Typography>
+ )}
+ </Box>
+ ) : item.name === "clusters" ||
+ item.name === "shards" ||
+ item.name === "nodes" ? (
+ <Box className="flex items-center">
+ {item.icon && <span
className="mr-2">{item.icon}</span>}
+ <Typography
+ variant="body2"
+ className="font-medium text-gray-500
dark:text-gray-400"
+ >
+ {item.displayName}
+ </Typography>
+ </Box>
+ ) : (
+ <Link
+ href={item.url}
+ className="flex items-center text-gray-600
transition-colors hover:text-primary dark:text-gray-300
dark:hover:text-primary-light"
+ >
+ {item.icon && <span
className="mr-2">{item.icon}</span>}
+ <Typography variant="body2"
className="font-medium">
+ {item.displayName}
+ </Typography>
+ </Link>
+ )}
+ </Box>
+ ))}
+ </Box>
+ </Paper>
+ );
+}
diff --git a/webui/src/app/ui/footer.tsx b/webui/src/app/ui/footer.tsx
index 5ab87db..5c16fa2 100644
--- a/webui/src/app/ui/footer.tsx
+++ b/webui/src/app/ui/footer.tsx
@@ -76,6 +76,7 @@ const Logo = ({ logo }: { logo: footerLogo }) => (
width={logo.width}
alt={logo.alt}
className="mt-4"
+ style={{ width: "auto" }}
/>
</Link>
</div>
diff --git a/webui/src/app/ui/nav-links.tsx b/webui/src/app/ui/nav-links.tsx
index 50227cb..ee5aa55 100644
--- a/webui/src/app/ui/nav-links.tsx
+++ b/webui/src/app/ui/nav-links.tsx
@@ -25,6 +25,7 @@ import { usePathname } from "next/navigation";
export default function NavLinks({
links,
+ scrolled = false,
}: {
links: Array<{
url: string;
@@ -32,6 +33,7 @@ export default function NavLinks({
icon?: React.ReactNode;
_blank?: boolean;
}>;
+ scrolled?: boolean;
}) {
const pathname = usePathname();
@@ -50,12 +52,51 @@ export default function NavLinks({
>
<Button
color="inherit"
- className={`mx-1 rounded-full px-4 py-1
transition-colors ${
- isActive
- ? "bg-primary-light/10 text-primary
dark:text-primary-light"
- : "hover:bg-gray-100
dark:hover:bg-dark-border"
- }`}
+ sx={{
+ textTransform: "none",
+ borderRadius: "20px",
+ paddingLeft: scrolled ? 2 : 2.5,
+ paddingRight: scrolled ? 2 : 2.5,
+ paddingTop: scrolled ? 0.6 : 0.8,
+ paddingBottom: scrolled ? 0.6 : 0.8,
+ fontSize: scrolled ? "0.875rem" : "0.9rem",
+ letterSpacing: "0.01em",
+ fontWeight: 500,
+ marginX: 0.5,
+ transition: "all 0.3s ease",
+ backgroundColor: isActive
+ ? (theme) =>
+ theme.palette.mode === "dark"
+ ? "rgba(255, 255, 255, 0.15)"
+ : "rgba(25, 118, 210, 0.08)"
+ : "transparent",
+ color: (theme) => {
+ if (theme.palette.mode === "dark") {
+ return isActive ? "#fff" : "rgba(255,
255, 255, 0.9)";
+ }
+ return isActive ? "#1976d2" : "rgba(0, 0,
0, 0.7)";
+ },
+ "&:hover": {
+ backgroundColor: (theme) =>
+ theme.palette.mode === "dark"
+ ? "rgba(255, 255, 255, 0.2)"
+ : "rgba(25, 118, 210, 0.12)",
+ boxShadow: isActive
+ ? (theme) =>
+ theme.palette.mode === "dark"
+ ? "0 2px 8px rgba(0, 0, 0,
0.3)"
+ : "0 2px 8px rgba(25, 118,
210, 0.2)"
+ : "none",
+ },
+ boxShadow: isActive
+ ? (theme) =>
+ theme.palette.mode === "dark"
+ ? "0 2px 5px rgba(0, 0, 0, 0.2)"
+ : "0 2px 5px rgba(25, 118, 210,
0.15)"
+ : "none",
+ }}
startIcon={link.icon}
+ size="small"
>
{link.title}
</Button>
diff --git a/webui/src/app/ui/sidebar.tsx b/webui/src/app/ui/sidebar.tsx
index 98e8b98..46018b7 100644
--- a/webui/src/app/ui/sidebar.tsx
+++ b/webui/src/app/ui/sidebar.tsx
@@ -84,7 +84,7 @@ export function NamespaceSidebar() {
return (
<Paper
- className="flex h-full w-64 flex-col overflow-hidden border-r
border-light-border shadow-sidebar dark:border-dark-border"
+ className="flex h-full w-64 flex-col overflow-hidden border-r
border-light-border dark:border-dark-border"
elevation={0}
square
>
@@ -137,7 +137,7 @@ export function ClusterSidebar({ namespace }: { namespace:
string }) {
return (
<Paper
- className="flex h-full w-64 flex-col overflow-hidden border-r
border-light-border shadow-sidebar dark:border-dark-border"
+ className="flex h-full w-64 flex-col overflow-hidden border-r
border-light-border dark:border-dark-border"
elevation={0}
square
>
@@ -197,7 +197,7 @@ export function ShardSidebar({ namespace, cluster }: {
namespace: string; cluste
return (
<Paper
- className="flex h-full w-64 flex-col overflow-hidden border-r
border-light-border shadow-sidebar dark:border-dark-border"
+ className="flex h-full w-64 flex-col overflow-hidden border-r
border-light-border dark:border-dark-border"
elevation={0}
square
>
@@ -275,7 +275,7 @@ export function NodeSidebar({
return (
<Paper
- className="flex h-full w-64 flex-col overflow-hidden border-r
border-light-border shadow-sidebar dark:border-dark-border"
+ className="flex h-full w-64 flex-col overflow-hidden border-r
border-light-border dark:border-dark-border"
elevation={0}
square
>
