/ var / www / html / cqt / src / components / [ HOME SHELL ]

Name	Size	Permission	Action
ui	[ DIR ]	drwxr-xr-x
About.tsx	2.85 KB	-rw-r--r--
AdminLayout.tsx	4.85 KB	-rw-r--r--
Contact.tsx	10.4 KB	-rw-r--r--
DataTable.tsx	4.98 KB	-rw-r--r--
Footer.tsx	12.02 KB	-rw-r--r--
Hero.tsx	11.92 KB	-rw-r--r--
NavLink.tsx	751 B	-rw-r--r--
Navigation.tsx	24.92 KB	-rw-r--r--
News.tsx	3.48 KB	-rw-r--r--
ParticleNetwork.tsx	4.09 KB	-rw-r--r--
ProtectedRoute.tsx	813 B	-rw-r--r--
QuantumCircuit.tsx	3.47 KB	-rw-r--r--
RebuildWebsiteButton.tsx	4.28 KB	-rw-r--r--
Research.tsx	3.68 KB	-rw-r--r--
StatsCard.tsx	4.87 KB	-rw-r--r--
Team.tsx	6.63 KB	-rw-r--r--

Code Editor : AdminLayout.tsx

import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import { Button } from './ui/button';
import { 
  LayoutDashboard, 
  FlaskConical, 
  Newspaper, 
  GraduationCap, 
  Users, 
  LogOut,
  Menu,
  X,
  BookOpen,
  Building
} from 'lucide-react';
import { useState } from 'react';

const AdminLayout = () => {
  const { user, logout } = useAuth();
  const location = useLocation();
  const navigate = useNavigate();
  const [sidebarOpen, setSidebarOpen] = useState(true);

const handleLogout = () => {
    logout();
    navigate('/admin/login');
  };

const menuItems = [
    { path: '/admin/dashboard', label: 'Dashboard', icon: LayoutDashboard },
    { path: '/admin/research', label: 'Research Projects', icon: FlaskConical },
    { path: '/admin/news', label: 'News & Updates', icon: Newspaper },
    { path: '/admin/courses', label: 'Courses', icon: GraduationCap },
    { path: '/admin/workshops', label: 'Workshops', icon: GraduationCap },
    { path: '/admin/team', label: 'Team Members', icon: Users },
    { path: '/admin/publications', label: 'Publications', icon: BookOpen },
    { path: '/admin/labs', label: 'Labs & Facilities', icon: Building }
  ];

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-950 via-slate-900 to-black">
      {/* Sidebar */}
      <aside 
        className={`fixed left-0 top-0 h-full bg-slate-900/95 backdrop-blur-xl border-r border-slate-700 transition-all duration-300 z-50 ${
          sidebarOpen ? 'w-64' : 'w-0'
        } overflow-hidden`}
      >
        <div className="p-6">
          <div className="flex items-center justify-between mb-8">
            <h2 className="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
              Admin Portal
            </h2>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setSidebarOpen(false)}
              className="lg:hidden text-slate-400 hover:text-white"
            >
              <X className="w-5 h-5" />
            </Button>
          </div>

<div className="mb-6 p-4 bg-slate-800/50 rounded-lg border border-slate-700">
            <p className="text-sm text-slate-400 mb-1">Logged in as</p>
            <p className="text-white font-semibold">{user?.username}</p>
          </div>

<nav className="space-y-2">
            {menuItems.map((item) => {
              const Icon = item.icon;
              const isActive = location.pathname === item.path;
              
              return (
                <Link key={item.path} to={item.path}>
                  <div 
                    className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 ${
                      isActive 
                        ? 'bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg' 
                        : 'text-slate-400 hover:bg-slate-800/50 hover:text-white'
                    }`}
                  >
                    <Icon className="w-5 h-5" />
                    <span className="font-medium">{item.label}</span>
                  </div>
                </Link>
              );
            })}
          </nav>

<div className="absolute bottom-6 left-6 right-6">
            <Button
              onClick={handleLogout}
              variant="outline"
              className="w-full bg-red-950/30 border-red-800 text-red-400 hover:bg-red-900/50 hover:text-red-300"
            >
              <LogOut className="w-4 h-4 mr-2" />
              Logout
            </Button>
          </div>
        </div>
      </aside>

{/* Main Content */}
      <div className={`transition-all duration-300 ${sidebarOpen ? 'ml-64' : 'ml-0'}`}>
        {/* Top Bar */}
        <header className="bg-slate-900/80 backdrop-blur-xl border-b border-slate-700 sticky top-0 z-40">
          <div className="px-6 py-4 flex items-center justify-between">
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setSidebarOpen(!sidebarOpen)}
              className="text-slate-400 hover:text-white"
            >
              <Menu className="w-5 h-5" />
            </Button>

<div className="flex items-center gap-4">
              <Link to="/">
                <Button variant="outline" className="border-slate-700 text-slate-300 hover:text-white">
                  View Website
                </Button>
              </Link>
            </div>
          </div>
        </header>

{/* Page Content */}
        <main className="p-6">
          <Outlet />
        </main>
      </div>

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

export default AdminLayout;

Urban Research Lab

Urban Research Lab

The Urban Research Lab (URL) at IIIT-Delhi was established in 2020, during a time when the pandemic brought the complexities of urban life more visible than ever. What started as an initiative by faculty and students has grown into a collaborative space for critically exploring and reimagining the urban questions through research, dialogue, and interdisciplinary engagement.