@ieltsrealtest/ui/dist/components/layouts/Navbar/Navbar.js

Reusable UI components for IELTS Real Test platform, built with React and TypeScript.

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Image from "next/image";
import { usePathname } from "next/navigation";
import Link from "next/link";
const homeBlack = "https://ieltsrealtest.s3.us-east-1.amazonaws.com/public/common/image/black/51+Silhouette+Icon+(1).png";
const hearBlack = "https://ieltsrealtest.s3.us-east-1.amazonaws.com/public/common/image/black/78+Silhouette+Icon.png";
const micBlack = "https://ieltsrealtest.s3.us-east-1.amazonaws.com/public/common/image/black/55+Silhouette+Icon.png";
const noteBlack = "https://ieltsrealtest.s3.us-east-1.amazonaws.com/public/common/image/black/79+Silhouette+Icon.png";
const bookBlack = "https://ieltsrealtest.s3.us-east-1.amazonaws.com/public/common/image/black/open-book.png";
const BarBlack = "https://ieltsrealtest.s3.us-east-1.amazonaws.com/public/common/image/black/Bars.png";
const homeRed = "https://ieltsrealtest.s3.us-east-1.amazonaws.com/public/common/image/red/51+Silhouette+Icon.png";
const hearRed = "https://ieltsrealtest.s3.us-east-1.amazonaws.com/public/common/image/red/78+Silhouette+Icon.png";
const micRed = "https://ieltsrealtest.s3.us-east-1.amazonaws.com/public/common/image/red/55+Silhouette+Icon.png";
const noteRed = "https://ieltsrealtest.s3.us-east-1.amazonaws.com/public/common/image/red/79+Silhouette+Icon.png";
const bookRed = "https://ieltsrealtest.s3.us-east-1.amazonaws.com/public/common/image/red/open-book.png";
const BarRed = "https://ieltsrealtest.s3.us-east-1.amazonaws.com/public/common/image/red/Bars.png";
export default function Navbar() {
    const pathname = usePathname();
    const isActive = (route) => {
        // Special case: Home link should only be active when exactly on '/'
        if (route === pathname)
            return true;
        if (route !== pathname)
            return false; // Ensure / is never active on other routes
        return pathname?.startsWith(route); // Check for sub-routes
    };
    return (_jsx("div", { children: _jsx("header", { className: "bg-[#FFF9F1] lg:hidden fixed bottom-0 left-0 right-0 p-4 shadow-md text-black z-10", children: _jsxs("ul", { className: "flex justify-around items-center", children: [_jsxs(Link, { href: "/", className: `${isActive("/") ? "text-red-600" : "text-black"} flex flex-col justify-center items-center`, children: [_jsx(Image, { src: isActive("/") ? homeRed : homeBlack, alt: "Home", width: 30, height: 30, className: "hover:scale-110 transition-transform duration-300" }), _jsx("span", { className: "text-xs", children: "Home" })] }), _jsxs(Link, { href: "/listening", className: `${isActive("/listening") ? "text-red-600" : "text-black"} flex flex-col justify-center items-center`, children: [_jsx(Image, { src: isActive("/listening") ? hearRed : hearBlack, alt: "Listening", width: 30, height: 30, className: "hover:scale-110 transition-transform duration-300" }), _jsx("span", { className: "text-xs", children: "Listening" })] }), _jsxs(Link, { href: "/reading", className: `${isActive("/reading") ? "text-red-600" : "text-black"} flex flex-col justify-center items-center`, children: [_jsx(Image, { src: isActive("/reading") ? bookRed : bookBlack, alt: "Reading", width: 30, height: 30, className: "hover:scale-110 transition-transform duration-300" }), _jsx("span", { className: "text-xs", children: "Reading" })] }), _jsxs(Link, { href: "/writing", className: `${isActive("/writing") ? "text-red-600" : "text-black"} flex flex-col justify-center items-center`, children: [_jsx(Image, { src: isActive("/writing") ? noteRed : noteBlack, alt: "Writing", width: 23, height: 30, className: "hover:scale-110 transition-transform duration-300" }), _jsx("span", { className: "text-xs", children: "Writing" })] }), _jsxs(Link, { href: "/speaking", className: `${isActive("/speaking") ? "text-red-600" : "text-black"} flex flex-col justify-center items-center`, children: [_jsx(Image, { src: isActive("/speaking") ? micRed : micBlack, alt: "Speaking", width: 20, height: 30, className: "hover:scale-110 transition-transform duration-300" }), _jsx("span", { className: "text-xs", children: "Speaking" })] }), _jsxs(Link, { href: "/menu", className: `${isActive("/menu") ? "text-red-600" : "text-black"} flex flex-col justify-center items-center`, children: [_jsx(Image, { src: isActive("/menu") ? BarRed : BarBlack, alt: "Menu", width: 27, height: 30, className: "hover:scale-110 transition-transform duration-300" }), _jsx("span", { className: "text-xs", children: "Menu" })] })] }) }) }));
}