mirror of
https://github.com/OwethuManagedServices/oms-website-nextjs.git
synced 2025-12-17 15:38:09 +00:00
315 lines
11 KiB
TypeScript
315 lines
11 KiB
TypeScript
// components/Header.tsx
|
|
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { usePathname } from "next/navigation";
|
|
import {
|
|
FiChevronDown,
|
|
FiClipboard,
|
|
FiArrowRight,
|
|
FiMenu,
|
|
FiX,
|
|
} from "react-icons/fi";
|
|
import ThemeToggle from "./ThemeToggle";
|
|
|
|
const omsLogoUrl = "/oms-logo.svg";
|
|
|
|
// --- Basic Dropdown Placeholder ---
|
|
type DropdownMenuProps = {
|
|
trigger: React.ReactNode;
|
|
children: React.ReactNode;
|
|
menuClasses?: string;
|
|
};
|
|
const DropdownMenu = ({
|
|
trigger,
|
|
children,
|
|
menuClasses = "w-48",
|
|
}: DropdownMenuProps) => (
|
|
<div className="relative group">
|
|
<button className="flex items-center space-x-1 text-sm font-medium focus:outline-none inherit-color group">
|
|
{trigger}
|
|
<FiChevronDown className="w-4 h-4 transition-transform duration-200 group-hover:rotate-180" />
|
|
</button>
|
|
<div
|
|
className={`
|
|
absolute left-0 mt-2 ${menuClasses} origin-top-left rounded-md shadow-lg z-50
|
|
bg-light border border-gray-200 dark:bg-[var(--color-dark-bg-secondary)] dark:border-[var(--color-dark-border)]
|
|
opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200
|
|
`}
|
|
>
|
|
<div className="py-1">{children}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
type DropdownLinkProps = {
|
|
href: string;
|
|
children: React.ReactNode;
|
|
};
|
|
const DropdownLink = ({ href, children }: DropdownLinkProps) => (
|
|
<Link
|
|
href={href}
|
|
className="block px-4 py-2 text-sm text-gray-700 dark:text-[var(--color-dark-text-secondary)] hover:bg-gray-100 hover:text-primary dark:hover:bg-gray-700 dark:hover:text-primary"
|
|
>
|
|
{children}
|
|
</Link>
|
|
);
|
|
// --- End Dropdown Placeholder ---
|
|
|
|
const Header = () => {
|
|
const pathname = usePathname() || "/";
|
|
const isActive = (path: string) => pathname === path;
|
|
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
|
|
const toggleMenu = () => setIsMenuOpen((open) => !open);
|
|
const handleMobileLinkClick = () => setIsMenuOpen(false);
|
|
|
|
// Optionally switch logo based on a global CSS class or via next-themes
|
|
const currentLogo = omsLogoUrl;
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 shadow-md bg-light dark:bg-dark-bg dark:border-b dark:border-dark-border">
|
|
{/* Top Row */}
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-16">
|
|
{/* Logo */}
|
|
<Link
|
|
href="/"
|
|
className="flex items-center space-x-2"
|
|
title="OMS Home"
|
|
>
|
|
<Image
|
|
src={currentLogo}
|
|
alt="OMS Logo"
|
|
width={40}
|
|
height={40}
|
|
priority
|
|
/>
|
|
<span className="text-xl font-bold text-dark dark:text-light hidden sm:inline">
|
|
Owethu Managed Services
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden md:flex items-center space-x-6 lg:space-x-8">
|
|
<Link
|
|
href="/"
|
|
className={`text-sm font-medium ${
|
|
isActive("/")
|
|
? "text-primary font-semibold"
|
|
: "text-gray-700 dark:text-[var(--color-dark-text-secondary)] hover:text-primary"
|
|
}`}
|
|
>
|
|
Home
|
|
</Link>
|
|
<Link
|
|
href="/about"
|
|
className={`text-sm font-medium ${
|
|
pathname.startsWith("/about")
|
|
? "text-primary font-semibold"
|
|
: "text-gray-700 dark:text-[var(--color-dark-text-secondary)] hover:text-primary"
|
|
}`}
|
|
>
|
|
About Us
|
|
</Link>
|
|
<Link
|
|
href="/contact"
|
|
className={`text-sm font-medium ${
|
|
isActive("/contact")
|
|
? "text-primary font-semibold"
|
|
: "text-gray-700 dark:text-[var(--color-dark-text-secondary)] hover:text-primary"
|
|
}`}
|
|
>
|
|
Contact Us
|
|
</Link>
|
|
</nav>
|
|
|
|
{/* Right Utilities (Desktop) */}
|
|
<div className="hidden md:flex items-center space-x-4">
|
|
<ThemeToggle />
|
|
|
|
<Link
|
|
href="/request-demo"
|
|
className="flex items-center text-sm font-medium bg-primary text-dark px-3 py-1.5 rounded-md hover:bg-opacity-90 transition-colors"
|
|
title="Request a Demo"
|
|
>
|
|
<FiClipboard className="w-4 h-4 mr-1.5" />
|
|
Request Demo
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Mobile Buttons */}
|
|
<div className="md:hidden flex items-center">
|
|
<ThemeToggle />
|
|
|
|
<button
|
|
onClick={toggleMenu}
|
|
className="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary focus:outline-none ml-3"
|
|
aria-label="Toggle menu"
|
|
>
|
|
{isMenuOpen ? (
|
|
<FiX className="w-6 h-6" />
|
|
) : (
|
|
<FiMenu className="w-6 h-6" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Secondary Row */}
|
|
<div className="bg-primary dark:bg-primary">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="hidden md:flex justify-between items-center h-12">
|
|
<nav className="flex items-center space-x-6 lg:space-x-8 text-dark">
|
|
<DropdownMenu trigger={<span>Services</span>}>
|
|
<DropdownLink href="/services/resource-augmentation">
|
|
Resource Augmentation
|
|
</DropdownLink>
|
|
<DropdownLink href="/services/project-management">
|
|
Project Management
|
|
</DropdownLink>
|
|
<DropdownLink href="/services/product-development">
|
|
Product Development
|
|
</DropdownLink>
|
|
</DropdownMenu>
|
|
<DropdownMenu trigger={<span>Products</span>}>
|
|
<DropdownLink href="/products/obse">OBSE</DropdownLink>
|
|
</DropdownMenu>
|
|
<DropdownMenu trigger={<span>Join Our Team</span>}>
|
|
<DropdownLink href="/join-us/vacancies">Vacancies</DropdownLink>
|
|
<DropdownLink href="/join-us/portal">
|
|
Recruitment Portal
|
|
</DropdownLink>
|
|
</DropdownMenu>
|
|
</nav>
|
|
<Link
|
|
href="/services"
|
|
className="flex items-center text-sm font-medium text-dark hover:text-opacity-80 transition-opacity group"
|
|
>
|
|
Explore Our Offerings
|
|
<FiArrowRight className="w-4 h-4 ml-1.5 transition-transform duration-200 group-hover:translate-x-1" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu Panel */}
|
|
<div
|
|
id="mobile-menu"
|
|
className={`md:hidden absolute top-full left-0 w-full shadow-lg transition-all duration-300 ease-in-out overflow-hidden bg-light dark:bg-[var(--color-dark-bg-secondary)] border-t border-gray-200 dark:border-[var(--color-dark-border)] ${
|
|
isMenuOpen ? "max-h-screen py-4" : "max-h-0 py-0"
|
|
}`}
|
|
>
|
|
<nav className="container mx-auto px-4 sm:px-6 lg:px-8 flex flex-col space-y-3">
|
|
<Link
|
|
href="/"
|
|
onClick={handleMobileLinkClick}
|
|
className={`block py-2 text-base font-medium ${
|
|
isActive("/")
|
|
? "text-primary font-semibold"
|
|
: "text-gray-700 dark:text-[var(--color-dark-text)] hover:text-primary"
|
|
}`}
|
|
>
|
|
Home
|
|
</Link>
|
|
<Link
|
|
href="/about"
|
|
onClick={handleMobileLinkClick}
|
|
className={`block py-2 text-base font-medium ${
|
|
pathname.startsWith("/about")
|
|
? "text-primary font-semibold"
|
|
: "text-gray-700 dark:text-[var(--color-dark-text)] hover:text-primary"
|
|
}`}
|
|
>
|
|
About Us
|
|
</Link>
|
|
|
|
<span className="pt-2 text-xs uppercase text-gray-500 dark:text-gray-400">
|
|
Services
|
|
</span>
|
|
<Link
|
|
href="/services/resource-augmentation"
|
|
onClick={handleMobileLinkClick}
|
|
className="block py-1 pl-3 text-base font-medium text-gray-700 dark:text-[var(--color-dark-text)] hover:text-primary"
|
|
>
|
|
Resource Augmentation
|
|
</Link>
|
|
<Link
|
|
href="/services/project-management"
|
|
onClick={handleMobileLinkClick}
|
|
className="block py-1 pl-3 text-base font-medium text-gray-700 dark:text-[var(--color-dark-text)] hover:text-primary"
|
|
>
|
|
Project Management
|
|
</Link>
|
|
<Link
|
|
href="/services/product-development"
|
|
onClick={handleMobileLinkClick}
|
|
className="block py-1 pl-3 text-base font-medium text-gray-700 dark:text-[var(--color-dark-text)] hover:text-primary"
|
|
>
|
|
Product Development
|
|
</Link>
|
|
|
|
<span className="pt-2 text-xs uppercase text-gray-500 dark:text-gray-400">
|
|
Products
|
|
</span>
|
|
<Link
|
|
href="/products/obse"
|
|
onClick={handleMobileLinkClick}
|
|
className="block py-1 pl-3 text-base font-medium text-gray-700 dark:text-[var(--color-dark-text)] hover:text-primary"
|
|
>
|
|
OBSE
|
|
</Link>
|
|
|
|
<span className="pt-2 text-xs uppercase text-gray-500 dark:text-gray-400">
|
|
Join Us
|
|
</span>
|
|
<Link
|
|
href="/join-us/vacancies"
|
|
onClick={handleMobileLinkClick}
|
|
className="block py-1 pl-3 text-base font-medium text-gray-700 dark:text-[var(--color-dark-text)] hover:text-primary"
|
|
>
|
|
Vacancies
|
|
</Link>
|
|
<Link
|
|
href="/join-us/portal"
|
|
onClick={handleMobileLinkClick}
|
|
className="block py-1 pl-3 text-base font-medium text-gray-700 dark:text-[var(--color-dark-text)] hover:text-primary"
|
|
>
|
|
Recruitment Portal
|
|
</Link>
|
|
|
|
<Link
|
|
href="/contact"
|
|
onClick={handleMobileLinkClick}
|
|
className={`block py-2 text-base font-medium ${
|
|
isActive("/contact")
|
|
? "text-primary font-semibold"
|
|
: "text-gray-700 dark:text-[var(--color-dark-text)] hover:text-primary"
|
|
}`}
|
|
>
|
|
Contact Us
|
|
</Link>
|
|
|
|
<div className="pt-4">
|
|
<Link
|
|
href="/request-demo"
|
|
onClick={handleMobileLinkClick}
|
|
className="flex w-full justify-center items-center text-sm font-medium bg-primary text-dark px-4 py-2 rounded-md hover:bg-opacity-90 transition-colors"
|
|
title="Request a Demo"
|
|
>
|
|
<FiClipboard className="w-4 h-4 mr-1.5" />
|
|
Request Demo
|
|
</Link>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|