/ 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 : Navigation.tsx

import { useState, useEffect, useRef } from "react";
import { Menu, X, Search, Sun, Moon, ChevronDown, ExternalLink, Linkedin, Mail, FileText, Users, Newspaper, FlaskConical } from "lucide-react";
import { motion, AnimatePresence, useScroll, useMotionValueEvent } from "framer-motion";
import { Button } from "@/components/ui/button";
import { NavLink } from "@/components/NavLink";
import { Input } from "@/components/ui/input";
const logo = '/cqt_logo_with_iiitd.png';
import { useLocation, useNavigate } from "react-router-dom";

const Navigation = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");
  const [isScrolled, setIsScrolled] = useState(false);
  const [hidden, setHidden] = useState(false);
  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
  const [theme, setTheme] = useState<"light" | "dark">("light");
  const [scrollProgress, setScrollProgress] = useState(0);
  const searchInputRef = useRef<HTMLInputElement>(null);
  const location = useLocation();
  const navigate = useNavigate();
  
  const { scrollY } = useScroll();
  
  const navItems = [
    { name: "Home", to: "/" },
    { 
      name: "Research", 
      to: "/research",
      dropdown: [
        { name: "Projects", to: "/research#projects" },
        { name: "Publications", to: "/publications" },
        { name: "Labs & Facilities", to: "/labs" },
      ]
    },
    { 
      name: "Education", 
      to: "/education",
      dropdown: [
        { name: "All Programs", to: "/education" },
        { name: "Courses", to: "/education#courses" },
        { name: "Workshops & Events", to: "/workshops" },
      ]
    },
    { 
      name: "People", 
      to: "/team",
      dropdown: [
        { name: "Faculty", to: "/team#faculty" },
        { name: "Staff", to: "/team#staff" },
        { name: "PhD Scholar", to: "/team#phd-scholar" },
      ]
    },
    { name: "News", to: "/news" },
    { name: "Contact Us", to: "/contact" },
  ];

// Search data
  const searchableContent = [
    { title: "Home", description: "Centre for Quantum Technology main page", path: "/", icon: FileText, type: "Page" },
    { title: "Research", description: "Our research projects and publications", path: "/research", icon: FlaskConical, type: "Page" },
    { title: "Education", description: "Courses, workshops, and training programs", path: "/education", icon: FileText, type: "Page" },
    { title: "People", description: "Our team members and faculty", path: "/team", icon: Users, type: "Page" },
    { title: "News", description: "Latest news and updates", path: "/news", icon: Newspaper, type: "Page" },
    { title: "Publications", description: "Research publications and papers", path: "/publications", icon: FileText, type: "Page" },
    { title: "Labs & Facilities", description: "Our state-of-the-art laboratories and facilities", path: "/labs", icon: FlaskConical, type: "Page" },
    { title: "Contact Us", description: "Get in touch with us", path: "/contact", icon: Mail, type: "Page" },
    { title: "Admin Portal", description: "Content management system for administrators", path: "/admin/login", icon: Users, type: "Portal" },
    { title: "Courses", description: "Academic courses in quantum technology", path: "/education#courses", icon: FileText, type: "Section" },
    { title: "Workshops", description: "Workshops and training events", path: "/education#workshops", icon: FileText, type: "Section" },
    { title: "Faculty", description: "View all faculty members", path: "/team#faculty", icon: Users, type: "Section" },
    { title: "Staff", description: "View all staff members", path: "/team#staff", icon: Users, type: "Section" },
    { title: "Projects", description: "Research projects", path: "/research#projects", icon: FlaskConical, type: "Section" },
  ];

// Filter search results
  const searchResults = searchQuery.length > 0
    ? searchableContent.filter(item =>
        item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
        item.description.toLowerCase().includes(searchQuery.toLowerCase())
      )
    : searchableContent.slice(0, 6); // Show top 6 by default

const handleSearchSelect = (path: string) => {
    navigate(path);
    setIsSearchOpen(false);
    setSearchQuery("");
  };

// Scroll behavior
  useMotionValueEvent(scrollY, "change", (latest) => {
    const previous = scrollY.getPrevious() ?? 0;
    setIsScrolled(latest > 50);
    
    // Hide navbar on scroll down, show on scroll up (desktop only)
    // On mobile (< 1024px), always keep navbar visible
    const isMobile = window.innerWidth < 1024;
    if (!isMobile && latest > previous && latest > 150) {
      setHidden(true);
    } else {
      setHidden(false);
    }

// Calculate scroll progress
    const windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    const progress = (latest / windowHeight) * 100;
    setScrollProgress(progress);
  });

// Search keyboard shortcut (Cmd/Ctrl + K)
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
        e.preventDefault();
        setIsSearchOpen(true);
        setTimeout(() => searchInputRef.current?.focus(), 100);
      }
      if (e.key === "Escape") {
        setIsSearchOpen(false);
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, []);

// Close mobile menu on route change
  useEffect(() => {
    setIsOpen(false);
    setActiveDropdown(null);
  }, [location]);

// Ensure navbar is visible on mobile when resizing
  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 1024) {
        setHidden(false); // Always show navbar on mobile
      }
    };
    
    window.addEventListener("resize", handleResize);
    handleResize(); // Call once on mount
    
    return () => window.removeEventListener("resize", handleResize);
  }, []);

// Theme toggle
  const toggleTheme = () => {
    const newTheme = theme === "light" ? "dark" : "light";
    setTheme(newTheme);
    document.documentElement.classList.toggle("dark");
  };

return (
    <>
      {/* Skip to content for accessibility */}
      <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-md">
        Skip to content
      </a>

{/* Reading progress bar */}
      <motion.div
        className="fixed top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary via-secondary to-accent origin-left z-[60]"
        style={{ scaleX: scrollProgress / 100 }}
        initial={{ scaleX: 0 }}
      />

<motion.nav
        variants={{
          visible: { y: 0 },
          hidden: { y: "-100%" },
        }}
        animate={hidden ? "hidden" : "visible"}
        transition={{ duration: 0.3, ease: "easeInOut" }}
        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
          isScrolled 
            ? "bg-background/98 backdrop-blur-md shadow-lg border-b border-border/50" 
            : "bg-background/95 backdrop-blur-sm border-b border-border"
        }`}
      >
        <div className="container mx-auto px-4">
          <motion.div
            animate={{ height: isScrolled ? "64px" : "80px" }}
            transition={{ duration: 0.3 }}
            className="flex items-center justify-between"
          >
            {/* Logo and Title */}
            <NavLink to="/" className="flex items-center gap-3 group">
              <motion.div
                whileHover={{ rotate: 5, scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                transition={{ type: "spring", stiffness: 400, damping: 10 }}
              >
                <motion.img
                  src={logo}
                  alt="CQT Logo"
                  className={`transition-all duration-300 object-contain ${isScrolled ? "h-10 w-auto" : "h-12 w-auto"} group-hover:drop-shadow-[0_0_8px_rgba(59,130,246,0.5)]"`}
                  initial={{ scale: 0.8, opacity: 0 }}
                  animate={{ scale: 1, opacity: 1 }}
                  transition={{ duration: 0.5, type: "spring" }}
                />
              </motion.div>
              <div className="flex flex-col">
                <span className={`font-semibold text-primary transition-all duration-300 ${isScrolled ? "text-xs" : "text-sm"}`}>
                  Centre for
                </span>
                <span className={`font-bold text-primary leading-tight transition-all duration-300 ${isScrolled ? "text-base" : "text-lg"}`}>
                  Quantum Technology
                </span>
              </div>
            </NavLink>

{/* Desktop Navigation */}
            <div className="hidden lg:flex items-center gap-2">
              {navItems.map((item, index) => (
                <div
                  key={item.name}
                  className="relative"
                  onMouseEnter={() => item.dropdown && setActiveDropdown(item.name)}
                  onMouseLeave={() => setActiveDropdown(null)}
                >
                  <NavLink
                    to={item.to}
                    className="relative px-4 py-2 text-sm font-medium text-foreground transition-colors rounded-md group"
                    activeClassName="text-primary font-semibold"
                  >
                    <motion.span
                      initial={{ opacity: 0, y: -10 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: index * 0.05 }}
                      className="flex items-center gap-1"
                    >
                      {item.name}
                      {item.dropdown && <ChevronDown className="h-3 w-3" />}
                    </motion.span>
                    
                    {/* Animated underline */}
                    <motion.span
                      className="absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-primary to-secondary"
                      initial={{ width: 0 }}
                      whileHover={{ width: "100%" }}
                      transition={{ duration: 0.3 }}
                    />
                    
                    {/* Hover background */}
                    <motion.span
                      className="absolute inset-0 bg-primary/5 rounded-md -z-10"
                      initial={{ opacity: 0, scale: 0.8 }}
                      whileHover={{ opacity: 1, scale: 1 }}
                      transition={{ duration: 0.2 }}
                    />
                  </NavLink>

{/* Dropdown Menu */}
                  <AnimatePresence>
                    {item.dropdown && activeDropdown === item.name && (
                      <motion.div
                        initial={{ opacity: 0, y: -10 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: -10 }}
                        transition={{ duration: 0.2 }}
                        className="absolute top-full left-0 mt-2 w-56 bg-card backdrop-blur-md border-2 border-border rounded-lg shadow-2xl overflow-hidden z-50"
                      >
                        {item.dropdown.map((dropItem, idx) => (
                          <motion.div
                            key={dropItem.name}
                            initial={{ opacity: 0, x: -10 }}
                            animate={{ opacity: 1, x: 0 }}
                            transition={{ delay: idx * 0.05 }}
                          >
                            <NavLink
                              to={dropItem.to}
                              className="block px-4 py-3 text-sm font-medium text-card-foreground hover:bg-primary/10 hover:text-primary transition-colors border-b border-border/50 last:border-b-0"
                            >
                              {dropItem.name}
                            </NavLink>
                          </motion.div>
                        ))}
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              ))}

{/* Search Button */}
              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setIsSearchOpen(true)}
                  className="relative"
                  aria-label="Search"
                >
                  <Search className="h-4 w-4" />
                  <span className="absolute -bottom-1 -right-1 text-[10px] bg-muted px-1 rounded text-muted-foreground">
                    ⌘K
                  </span>
                </Button>
              </motion.div>

{/* Theme Toggle */}
              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={toggleTheme}
                  aria-label="Toggle theme"
                >
                  <motion.div
                    initial={{ rotate: 0 }}
                    animate={{ rotate: theme === "dark" ? 180 : 0 }}
                    transition={{ duration: 0.3 }}
                  >
                    {theme === "light" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
                  </motion.div>
                </Button>
              </motion.div>

{/* Social Icons */}
              <div className="flex items-center gap-1 ml-2 pl-2 border-l border-border">
                <motion.a
                  href="https://www.linkedin.com/company/center-for-quantum-technologies-iiit-delhi/?trk=public_post_main-feed-card-text"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="p-2 text-muted-foreground hover:text-primary transition-colors"
                  whileHover={{ scale: 1.1, y: -2 }}
                  whileTap={{ scale: 0.9 }}
                  aria-label="LinkedIn"
                >
                  <Linkedin className="h-4 w-4" />
                </motion.a>
                <a
                  href="mailto:admin-cqt@iiitd.ac.in"
                  className="p-2 text-muted-foreground hover:text-primary transition-colors"
                  aria-label="Email"
                >
                  <Mail className="h-4 w-4" />
                </a>
              </div>

{/* CTA Button */}
              <motion.div
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                <Button
                  className="ml-2 bg-gradient-to-r from-primary to-secondary text-white font-semibold shadow-lg hover:shadow-xl hover:shadow-primary/50 transition-all duration-300"
                  onClick={() => navigate("/admin/login")}
                >
                  Admin Portal
                  <ExternalLink className="ml-2 h-4 w-4" />
                </Button>
              </motion.div>
            </div>

{/* Mobile Menu Button */}
            <div className="flex items-center gap-2 lg:hidden">
              <Button
                variant="ghost"
                size="icon"
                onClick={() => setIsSearchOpen(true)}
                aria-label="Search"
              >
                <Search className="h-5 w-5" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                onClick={() => setIsOpen(!isOpen)}
                aria-label="Toggle menu"
              >
                <motion.div
                  animate={{ rotate: isOpen ? 90 : 0 }}
                  transition={{ duration: 0.3 }}
                >
                  {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
                </motion.div>
              </Button>
            </div>
          </motion.div>

{/* Mobile Navigation */}
          <AnimatePresence>
            {isOpen && (
              <motion.div
                initial={{ height: 0, opacity: 0 }}
                animate={{ height: "auto", opacity: 1 }}
                exit={{ height: 0, opacity: 0 }}
                transition={{ duration: 0.3 }}
                className="lg:hidden border-t border-border"
                style={{ maxHeight: 'calc(100vh - 80px)' }}
              >
                <div className="py-4 flex flex-col gap-2 overflow-y-auto max-h-[calc(100vh-80px)]">
                  {navItems.map((item, index) => (
                    <motion.div
                      key={item.name}
                      initial={{ opacity: 0, x: -20 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: index * 0.05 }}
                    >
                      <NavLink
                        to={item.to}
                        className="block px-4 py-3 text-sm font-medium text-foreground hover:text-primary hover:bg-muted rounded-md transition-colors"
                        activeClassName="text-primary font-semibold bg-primary/10"
                        onClick={() => setIsOpen(false)}
                      >
                        {item.name}
                      </NavLink>
                      
                      {/* Mobile Dropdown */}
                      {item.dropdown && (
                        <div className="ml-4 mt-1 flex flex-col gap-1">
                          {item.dropdown.map((dropItem) => (
                            <NavLink
                              key={dropItem.name}
                              to={dropItem.to}
                              className="block px-4 py-2 text-xs text-muted-foreground hover:text-primary transition-colors"
                              onClick={() => setIsOpen(false)}
                            >
                              {dropItem.name}
                            </NavLink>
                          ))}
                        </div>
                      )}
                    </motion.div>
                  ))}
                  
                  {/* Mobile Theme Toggle */}
                  <motion.div
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: navItems.length * 0.05 }}
                    className="px-4 py-2"
                  >
                    <Button
                      variant="outline"
                      className="w-full justify-start"
                      onClick={toggleTheme}
                    >
                      {theme === "light" ? <Sun className="h-4 w-4 mr-2" /> : <Moon className="h-4 w-4 mr-2" />}
                      {theme === "light" ? "Light Mode" : "Dark Mode"}
                    </Button>
                  </motion.div>
                  
                  {/* Mobile CTA */}
                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: navItems.length * 0.05 }}
                    className="mt-4 px-4 pb-2"
                  >
                    <Button
                      className="w-full bg-gradient-to-r from-primary to-secondary text-white font-semibold"
                      onClick={() => {
                        navigate("/admin/login");
                        setIsOpen(false);
                      }}
                    >
                      Admin Portal
                      <ExternalLink className="ml-2 h-4 w-4" />
                    </Button>
                  </motion.div>
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </motion.nav>

{/* Search Modal */}
      <AnimatePresence>
        {isSearchOpen && (
          <>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[60]"
              onClick={() => setIsSearchOpen(false)}
            />
            <motion.div
              initial={{ opacity: 0, scale: 0.9, y: -20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.9, y: -20 }}
              transition={{ type: "spring", duration: 0.3 }}
              className="fixed top-20 left-1/2 -translate-x-1/2 w-full max-w-2xl z-[70] px-4"
            >
              <div className="bg-card border-2 border-border rounded-lg shadow-2xl overflow-hidden">
                {/* Search Input */}
                <div className="flex items-center gap-3 p-4 border-b border-border">
                  <Search className="h-5 w-5 text-muted-foreground flex-shrink-0" />
                  <Input
                    ref={searchInputRef}
                    type="text"
                    placeholder="Search pages, people, research..."
                    className="flex-1 border-0 focus-visible:ring-0 text-base bg-transparent text-card-foreground placeholder:text-muted-foreground"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    autoFocus
                  />
                  <kbd className="px-2 py-1 text-xs bg-muted text-muted-foreground rounded border border-border">ESC</kbd>
                </div>

{/* Search Results */}
                <div className="max-h-96 overflow-y-auto">
                  {searchResults.length > 0 ? (
                    <div className="p-2">
                      {searchResults.map((item, idx) => {
                        const Icon = item.icon;
                        return (
                          <motion.button
                            key={item.path}
                            initial={{ opacity: 0, y: -10 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: idx * 0.03 }}
                            onClick={() => handleSearchSelect(item.path)}
                            className="w-full flex items-start gap-3 p-3 rounded-lg hover:bg-primary/10 transition-colors text-left group"
                          >
                            <div className="flex-shrink-0 w-10 h-10 rounded-md bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                              <Icon className="h-5 w-5 text-primary" />
                            </div>
                            <div className="flex-1 min-w-0">
                              <div className="flex items-center gap-2 mb-1">
                                <h4 className="font-semibold text-sm text-card-foreground group-hover:text-primary transition-colors">
                                  {item.title}
                                </h4>
                                <span className="px-2 py-0.5 text-xs bg-muted text-muted-foreground rounded">
                                  {item.type}
                                </span>
                              </div>
                              <p className="text-xs text-muted-foreground line-clamp-1">
                                {item.description}
                              </p>
                            </div>
                            <ChevronDown className="h-4 w-4 text-muted-foreground rotate-[-90deg] flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
                          </motion.button>
                        );
                      })}
                    </div>
                  ) : (
                    <div className="p-8 text-center">
                      <Search className="h-12 w-12 text-muted-foreground mx-auto mb-3 opacity-50" />
                      <p className="text-sm text-muted-foreground">
                        No results found for "{searchQuery}"
                      </p>
                    </div>
                  )}
                </div>

{/* Footer */}
                <div className="p-3 border-t border-border bg-muted/30">
                  <div className="flex items-center justify-between text-xs text-muted-foreground">
                    <div className="flex items-center gap-4">
                      <span className="flex items-center gap-1">
                        <kbd className="px-1.5 py-0.5 bg-background border border-border rounded text-[10px]">↑</kbd>
                        <kbd className="px-1.5 py-0.5 bg-background border border-border rounded text-[10px]">↓</kbd>
                        to navigate
                      </span>
                      <span className="flex items-center gap-1">
                        <kbd className="px-1.5 py-0.5 bg-background border border-border rounded text-[10px]">↵</kbd>
                        to select
                      </span>
                    </div>
                    <span>{searchResults.length} result{searchResults.length !== 1 ? 's' : ''}</span>
                  </div>
                </div>
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </>
  );
};

export default Navigation;

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.