[ Mini Kiebo ]

Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64 Path: D:/xampp/htdocs/dummyweb/app/frontend/src/components/ [ Home ]
File: AdminLayout.jsx
Action: file_editor create /app/frontend/src/components/AdminLayout.jsx --file-text "import React, { useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { Button } from '../components/ui/button';
import {
  LayoutDashboard,
  FileText,
  BookOpen,
  Newspaper,
  Users,
  Image as ImageIcon,
  Mail,
  Settings,
  LogOut,
  Menu,
  X
} from 'lucide-react';

const AdminLayout = ({ children }) => {
  const location = useLocation();
  const navigate = useNavigate();
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const adminEmail = localStorage.getItem('adminEmail');

  const handleLogout = () => {
    localStorage.removeItem('adminToken');
    localStorage.removeItem('adminEmail');
    navigate('/admin/login');
  };

  const navigation = [
    { name: 'Dashboard', href: '/admin/dashboard', icon: LayoutDashboard },
    { name: 'Hero Section', href: '/admin/hero', icon: FileText },
    { name: 'About / Tentang', href: '/admin/about', icon: BookOpen },
    { name: 'Programs / Program', href: '/admin/programs', icon: BookOpen },
    { name: 'News / Berita', href: '/admin/news', icon: Newspaper },
    { name: 'Staff / Dosen', href: '/admin/staff', icon: Users },
    { name: 'Gallery / Galeri', href: '/admin/gallery', icon: ImageIcon },
    { name: 'Contact / Kontak', href: '/admin/contact', icon: Mail },
  ];

  const isActive = (path) => location.pathname === path;

  return (
    <div className=\"min-h-screen bg-gray-50\">
      {/* Top Bar */}
      <header className=\"bg-white border-b border-gray-200 fixed top-0 left-0 right-0 z-40\">
        <div className=\"flex items-center justify-between px-4 py-3\">
          <div className=\"flex items-center gap-3\">
            <button
              onClick={() => setSidebarOpen(!sidebarOpen)}
              className=\"lg:hidden p-2 rounded-lg hover:bg-gray-100\"
            >
              {sidebarOpen ? <X className=\"h-6 w-6\" /> : <Menu className=\"h-6 w-6\" />}
            </button>
            <div className=\"flex items-center gap-3\">
              <div className=\"w-10 h-10 bg-gradient-to-br from-emerald-600 to-teal-500 rounded-lg flex items-center justify-center\">
                <span className=\"text-white font-bold\">AF</span>
              </div>
              <div>
                <h1 className=\"text-lg font-bold text-gray-900\">Admin Panel</h1>
                <p className=\"text-xs text-gray-600\">Akademi Farmasi</p>
              </div>
            </div>
          </div>

          <div className=\"flex items-center gap-4\">
            <div className=\"hidden md:block text-right\">
              <p className=\"text-sm font-medium text-gray-900\">{adminEmail}</p>
              <p className=\"text-xs text-gray-500\">Administrator</p>
            </div>
            <Button
              variant=\"ghost\"
              size=\"sm\"
              onClick={handleLogout}
              className=\"text-red-600 hover:text-red-700 hover:bg-red-50\"
            >
              <LogOut className=\"h-4 w-4 mr-2\" />
              Logout
            </Button>
          </div>
        </div>
      </header>

      {/* Sidebar */}
      <aside
        className={`fixed top-16 left-0 bottom-0 w-64 bg-white border-r border-gray-200 transform transition-transform duration-300 z-30 ${
          sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
        }`}
      >
        <nav className=\"p-4 space-y-1 overflow-y-auto h-full\">
          {navigation.map((item) => {
            const Icon = item.icon;
            return (
              <Link
                key={item.name}
                to={item.href}
                onClick={() => setSidebarOpen(false)}
                className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
                  isActive(item.href)
                    ? 'bg-gradient-to-r from-emerald-600 to-teal-500 text-white'
                    : 'text-gray-700 hover:bg-gray-100'
                }`}
              >
                <Icon className=\"h-5 w-5\" />
                <span className=\"font-medium text-sm\">{item.name}</span>
              </Link>
            );
          })}
        </nav>
      </aside>

      {/* Main Content */}
      <main className=\"lg:ml-64 pt-16 min-h-screen\">
        <div className=\"p-6\">
          {children}
        </div>
      </main>

      {/* Overlay for mobile */}
      {sidebarOpen && (
        <div
          className=\"fixed inset-0 bg-black/50 z-20 lg:hidden\"
          onClick={() => setSidebarOpen(false)}
        ></div>
      )}
    </div>
  );
};

export default AdminLayout;
"
Observation: Create successful: /app/frontend/src/components/AdminLayout.jsx