diff --git a/src/components/Layout.css b/src/components/Layout.css
index b2b0a87..115cd07 100644
--- a/src/components/Layout.css
+++ b/src/components/Layout.css
@@ -1,6 +1,6 @@
.app-layout {
display: flex;
- flex-direction: column; /* ← change row to column */
+ flex-direction: column;
min-height: 100vh;
position: relative;
background: var(--bg);
@@ -12,8 +12,6 @@
overflow: hidden;
}
-.app-layout__sidebar {
- width: 220px;
.app-sidebar {
width: 244px;
background: var(--surface);
@@ -94,6 +92,12 @@
color: #ecf4ff;
}
+.app-nav-link.is-active {
+ background: rgba(45, 212, 191, 0.12);
+ border: 1px solid rgba(45, 212, 191, 0.2);
+ color: #ecfeff;
+}
+
.app-nav-badge {
width: 1.6rem;
height: 1.6rem;
@@ -148,6 +152,7 @@
flex-direction: column;
flex: 1;
min-width: 0;
+ min-height: 0;
}
.app-mobile-topbar {
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 28a6279..7b43ef9 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,8 +1,8 @@
import { useState } from "react";
-import { Link, Outlet } from "react-router-dom";
+import { NavLink, Outlet, useLocation } from "react-router-dom";
import ConnectWalletModal from "./ConnectWalletModal";
import Footer from "./Footer";
-import "./layout.css";
+import "./Layout.css";
type NavItem = { to: string; label: string; shortLabel: string };
@@ -17,75 +17,98 @@ interface LayoutProps {
theme?: "light" | "dark";
}
-export default function Layout({ theme: _theme = "light" }: LayoutProps) {
+export default function Layout({
+ onThemeToggle: _onThemeToggle,
+ theme: _theme = "light",
+}: LayoutProps) {
+ const location = useLocation();
const [isModalOpen, setIsModalOpen] = useState(false);
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
-
+ const showFooter = !location.pathname.includes("/treasurypage");
const closeMobileSidebar = () => setIsMobileSidebarOpen(false);
return (
-