feat: init page, router, layout

2026-08-12 22:15:06 +07:00
parent 593de37987
commit c75e412051
19 changed files with 2163 additions and 378 deletions
@@ -0,0 +1,53 @@
+import { useState } from 'react'
+import { NavLink, Outlet } from 'react-router-dom'
+import { navigationItems } from '../config/navigation.js'
+
+function MainLayout() {
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false)
+
+  return (
+    <div className={isSidebarCollapsed ? 'app-shell app-shell--collapsed' : 'app-shell'}>
+      <aside className="sidebar">
+        <div className="sidebar__brand">
+          <span className="sidebar__logo">L</span>
+          <div className="sidebar__brand-text">
+            <strong>APLP LMS</strong>
+            <span>Learning platform</span>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          className="sidebar__toggle"
+          aria-label={isSidebarCollapsed ? 'Mo rong sidebar' : 'Thu gon sidebar'}
+          title={isSidebarCollapsed ? 'Mo rong sidebar' : 'Thu gon sidebar'}
+          onClick={() => setIsSidebarCollapsed((current) => !current)}
+        >
+          {isSidebarCollapsed ? '>' : '<'}
+        </button>
+
+        <nav className="sidebar__nav" aria-label="Main navigation">
+          {navigationItems.map((item) => (
+            <NavLink
+              key={item.path}
+              to={item.path}
+              className={({ isActive }) =>
+                isActive ? 'sidebar__link sidebar__link--active' : 'sidebar__link'
+              }
+              title={item.label}
+            >
+              <span className="sidebar__link-icon">{item.shortLabel}</span>
+              <span className="sidebar__link-text">{item.label}</span>
+            </NavLink>
+          ))}
+        </nav>
+      </aside>
+
+      <main className="main-content">
+        <Outlet />
+      </main>
+    </div>
+  )
+}
+
+export default MainLayout