Add UI components

webui/src/common/layouts/Root.jsx

@@ -1,30 +1,17 @@
-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" /> },
-];
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import Sidebar from '@/common/components/Sidebar';
+import ProfileMenu from '@/common/components/ProfileMenu';
 
 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>
+      <Sidebar />
       <div className="main">
         <header className="topbar">
-          <h3>Test</h3>
+          <h3>Dashboard</h3>
+          <div className="grow"></div>
+          <ProfileMenu />
         </header>
         <Outlet />
       </div>