From 092395e6156f452f2207aada54de683cf0c4819d Mon Sep 17 00:00:00 2001
From: vanshika2720 <pahalvanshikaa@gmail.com>
Date: Sun, 17 May 2026 13:46:19 +0530
Subject: [PATCH] feat: Scaffold initial React dashboard app within the website
 repo

Fixes Issue 1

Sets up the foundational structure for the Kmesh Dashboard:
- Adds /dashboard route to the main navbar
- Creates Dashboard layout with collapsible sidebar and main content area
- Adds placeholder pages for Overview, Topology, Waypoints, Policies, Metrics
- Integrates existing Docusaurus theme tokens for light/dark mode

Signed-off-by: vanshika2720 <pahalvanshikaa@gmail.com>
---
 docusaurus.config.js              |  5 +--
 src/components/DashboardLayout.js | 41 ++++++++++++++++++++++++
 src/css/dashboard.css             | 52 +++++++++++++++++++++++++++++++
 src/pages/dashboard/index.js      | 11 +++++++
 src/pages/dashboard/metrics.js    | 11 +++++++
 src/pages/dashboard/policies.js   | 11 +++++++
 src/pages/dashboard/topology.js   | 11 +++++++
 src/pages/dashboard/waypoints.js  | 11 +++++++
 8 files changed, 151 insertions(+), 2 deletions(-)
 create mode 100644 src/components/DashboardLayout.js
 create mode 100644 src/css/dashboard.css
 create mode 100644 src/pages/dashboard/index.js
 create mode 100644 src/pages/dashboard/metrics.js
 create mode 100644 src/pages/dashboard/policies.js
 create mode 100644 src/pages/dashboard/topology.js
 create mode 100644 src/pages/dashboard/waypoints.js

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 3c5a39bd7..fb0463544 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -92,6 +92,7 @@ const config = {
             label: "Documentation",
           },
           { to: "/blog", label: "Blog", position: "left" },
+          { to: "/dashboard", label: "Dashboard", position: "left" },
           {
             href: "https://github.com/kmesh-net/kmesh/releases",
             label: "Downloads",
@@ -152,11 +153,11 @@ const config = {
     [
       "docusaurus-lunr-search",
       {
-        languages: ["en",'zh'],
+        languages: ["en", "zh"],
         indexDocs: true,
         indexBlog: true,
         indexPages: false,
-      }
+      },
     ],
   ],
 };
diff --git a/src/components/DashboardLayout.js b/src/components/DashboardLayout.js
new file mode 100644
index 000000000..bc4887b3d
--- /dev/null
+++ b/src/components/DashboardLayout.js
@@ -0,0 +1,41 @@
+import React from "react";
+import Layout from "@theme/Layout";
+import Link from "@docusaurus/Link";
+import { useLocation } from "@docusaurus/router";
+import "../css/dashboard.css";
+
+const SIDEBAR_ITEMS = [
+  { label: "Overview", path: "/dashboard" },
+  { label: "Topology", path: "/dashboard/topology" },
+  { label: "Waypoints", path: "/dashboard/waypoints" },
+  { label: "Policies", path: "/dashboard/policies" },
+  { label: "Metrics", path: "/dashboard/metrics" },
+];
+
+export default function DashboardLayout({ children, title }) {
+  const location = useLocation();
+
+  return (
+    <Layout title={title || "Dashboard"}>
+      <div className="dashboard-container">
+        <aside className="dashboard-sidebar">
+          {SIDEBAR_ITEMS.map((item) => {
+            const isActive =
+              location.pathname === item.path ||
+              location.pathname === item.path + "/";
+            return (
+              <Link
+                key={item.path}
+                to={item.path}
+                className={`dashboard-sidebar-link ${isActive ? "active" : ""}`}
+              >
+                {item.label}
+              </Link>
+            );
+          })}
+        </aside>
+        <main className="dashboard-content">{children}</main>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/css/dashboard.css b/src/css/dashboard.css
new file mode 100644
index 000000000..d60985901
--- /dev/null
+++ b/src/css/dashboard.css
@@ -0,0 +1,52 @@
+.dashboard-container {
+  display: flex;
+  min-height: calc(100vh - 60px);
+}
+
+.dashboard-sidebar {
+  width: 250px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--ifm-toc-border-color);
+  background-color: var(--ifm-background-surface-color);
+  padding: 1rem 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.dashboard-sidebar-link {
+  padding: 0.75rem 1.5rem;
+  color: var(--ifm-font-color-base);
+  text-decoration: none;
+  font-weight: 500;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
+}
+
+.dashboard-sidebar-link:hover {
+  background-color: var(--ifm-color-primary-lightest);
+  color: var(--ifm-color-primary-dark);
+  text-decoration: none;
+}
+
+[data-theme="dark"] .dashboard-sidebar-link:hover {
+  background-color: var(--ifm-color-primary-darkest);
+  color: var(--ifm-color-primary-light);
+}
+
+.dashboard-sidebar-link.active {
+  background-color: var(--ifm-color-primary-lightest);
+  color: var(--ifm-color-primary-dark);
+  border-right: 3px solid var(--ifm-color-primary);
+}
+
+[data-theme="dark"] .dashboard-sidebar-link.active {
+  background-color: var(--ifm-color-primary-darkest);
+  color: var(--ifm-color-primary-light);
+}
+
+.dashboard-content {
+  flex-grow: 1;
+  padding: 2rem;
+  background-color: var(--ifm-background-color);
+}
diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js
new file mode 100644
index 000000000..e0ba7ab2c
--- /dev/null
+++ b/src/pages/dashboard/index.js
@@ -0,0 +1,11 @@
+import React from "react";
+import DashboardLayout from "../../components/DashboardLayout";
+
+export default function DashboardOverview() {
+  return (
+    <DashboardLayout title="Overview - Dashboard">
+      <h1>Overview</h1>
+      <p>Welcome to the Kmesh Dashboard. This is the overview page.</p>
+    </DashboardLayout>
+  );
+}
diff --git a/src/pages/dashboard/metrics.js b/src/pages/dashboard/metrics.js
new file mode 100644
index 000000000..eecc4f165
--- /dev/null
+++ b/src/pages/dashboard/metrics.js
@@ -0,0 +1,11 @@
+import React from "react";
+import DashboardLayout from "../../components/DashboardLayout";
+
+export default function DashboardMetrics() {
+  return (
+    <DashboardLayout title="Metrics - Dashboard">
+      <h1>Metrics</h1>
+      <p>Performance and observability metrics will be displayed here.</p>
+    </DashboardLayout>
+  );
+}
diff --git a/src/pages/dashboard/policies.js b/src/pages/dashboard/policies.js
new file mode 100644
index 000000000..ec4a2c587
--- /dev/null
+++ b/src/pages/dashboard/policies.js
@@ -0,0 +1,11 @@
+import React from "react";
+import DashboardLayout from "../../components/DashboardLayout";
+
+export default function DashboardPolicies() {
+  return (
+    <DashboardLayout title="Policies - Dashboard">
+      <h1>Policies</h1>
+      <p>Configure routing and security policies here.</p>
+    </DashboardLayout>
+  );
+}
diff --git a/src/pages/dashboard/topology.js b/src/pages/dashboard/topology.js
new file mode 100644
index 000000000..bff55b21e
--- /dev/null
+++ b/src/pages/dashboard/topology.js
@@ -0,0 +1,11 @@
+import React from "react";
+import DashboardLayout from "../../components/DashboardLayout";
+
+export default function DashboardTopology() {
+  return (
+    <DashboardLayout title="Topology - Dashboard">
+      <h1>Topology</h1>
+      <p>Service mesh topology will be visualized here.</p>
+    </DashboardLayout>
+  );
+}
diff --git a/src/pages/dashboard/waypoints.js b/src/pages/dashboard/waypoints.js
new file mode 100644
index 000000000..95b0ecb73
--- /dev/null
+++ b/src/pages/dashboard/waypoints.js
@@ -0,0 +1,11 @@
+import React from "react";
+import DashboardLayout from "../../components/DashboardLayout";
+
+export default function DashboardWaypoints() {
+  return (
+    <DashboardLayout title="Waypoints - Dashboard">
+      <h1>Waypoints</h1>
+      <p>Manage and monitor waypoint proxies here.</p>
+    </DashboardLayout>
+  );
+}