feat: compose;

feat: frontend added

Frontend/components/navigation/hr-sidebar.jsx

@@ -0,0 +1,57 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { LayoutDashboard, Target, Users, Settings, ArrowLeft } from 'lucide-react';
+
+export default function HRSidebar() {
+  const pathname = usePathname();
+
+  const navItems = [
+    { href: '/hr/dashboard', icon: LayoutDashboard, label: 'Дашборд' },
+    { href: '/hr/missions', icon: Target, label: 'Миссии' },
+    { href: '/hr/users', icon: Users, label: 'Пользователи' },
+    { href: '/hr/settings', icon: Settings, label: 'Настройки' },
+  ];
+
+  return (
+    <aside className="hidden md:flex flex-col w-64 bg-slate-900 border-r border-slate-800 h-screen sticky top-0">
+      <div className="p-6 border-b border-slate-800">
+        <h1 className="text-xl font-bold text-white flex items-center gap-2">
+          <span className="text-2xl">🚀</span>
+          HR Панель
+        </h1>
+      </div>
+
+      <nav className="flex-1 p-4 space-y-2">
+        {navItems.map((item) => {
+          const isActive = pathname === item.href;
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
+                isActive
+                  ? 'bg-blue-500/20 text-blue-400 border border-blue-500/50'
+                  : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
+              }`}
+            >
+              <item.icon className="w-5 h-5" />
+              <span className="font-medium">{item.label}</span>
+            </Link>
+          );
+        })}
+      </nav>
+
+      <div className="p-4 border-t border-slate-800">
+        <Link
+          href="/dashboard"
+          className="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5" />
+          <span className="font-medium">К профилю</span>
+        </Link>
+      </div>
+    </aside>
+  );
+}

Frontend/components/navigation/mobile-nav.jsx

@@ -0,0 +1,40 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Chrome as Home, Target, BookOpen, ShoppingBag } from 'lucide-react';
+
+export default function MobileNav() {
+  const pathname = usePathname();
+
+  const navItems = [
+    { href: '/dashboard', icon: Home, label: 'Главная' },
+    { href: '/missions', icon: Target, label: 'Миссии' },
+    { href: '/journal', icon: BookOpen, label: 'Журнал' },
+    { href: '/store', icon: ShoppingBag, label: 'Магазин' },
+  ];
+
+  return (
+    <nav className="fixed bottom-0 left-0 right-0 bg-slate-900 border-t border-slate-800 md:hidden z-40">
+      <div className="flex items-center justify-around px-2 py-3">
+        {navItems.map((item) => {
+          const isActive = pathname === item.href;
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`flex flex-col items-center gap-1 px-4 py-2 rounded-lg transition-colors ${
+                isActive
+                  ? 'text-blue-400 bg-blue-500/10'
+                  : 'text-slate-400 hover:text-slate-200'
+              }`}
+            >
+              <item.icon className="w-5 h-5" />
+              <span className="text-xs font-medium">{item.label}</span>
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}