Create test design

webui/src/common/layouts/Root.jsx

@@ -1,7 +1,35 @@
-export default () => {
-    return (
-        <>
-            Root
-        </>
-    )
-}
+import React, { useContext } from 'react';
+import { NavLink, Outlet } from 'react-router-dom';
+import { HouseIcon, GearSixIcon, SquaresFourIcon } from '@phosphor-icons/react';
+
+const navItems = [
+  { to: '/dashboard', label: 'Dashboard', icon: <HouseIcon weight="duotone" /> },
+  { to: '/servers', label: 'Servers', icon: <SquaresFourIcon weight="duotone" /> },
+  { to: '/settings', label: 'Settings', icon: <GearSixIcon weight="duotone" /> },
+];
+
+const Root = () => {
+  return (
+    <div className="layout">
+      <aside className="sidebar">
+        <div className="sidebar__brand">Arkendro</div>
+        <nav className="sidebar__nav">
+          {navItems.map(item => (
+            <NavLink key={item.to} to={item.to} className={({isActive}) => `nav-item ${isActive ? 'active' : ''}`}>
+              <span className="nav-item__icon">{item.icon}</span>
+              <span>{item.label}</span>
+            </NavLink>
+          ))}
+        </nav>
+      </aside>
+      <div className="main">
+        <header className="topbar">
+          <h3>Test</h3>
+        </header>
+        <Outlet />
+      </div>
+    </div>
+  );
+};
+
+export default Root;