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

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

"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
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 MobileNavbar({ isDev = false }) {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const pathname = usePathname();
    const isActive = (route) => {
        if (route === "/") {
            return pathname === "/";
        }
        return pathname.includes(route);
    };
    // Toggle menu state
    const toggleMenu = () => {
        setIsMenuOpen(!isMenuOpen);
    };
    return (_jsxs("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: isDev ? `https://dev.youready.net/ielts/` : `https://www.youready.net/ielts/`, 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: isDev ? `https://dev.youready.net/ielts/listening/` : `https://www.youready.net/ielts/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: isDev ? `https://dev.youready.net/ielts/reading/` : `https://www.youready.net/ielts/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: isDev ? `https://dev.youready.net/ielts/writing/writing-test-library/` : `https://www.youready.net/ielts/writing/writing-test-library/`, 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: isDev ? `https://dev.youready.net/ielts/speaking/` : `https://www.youready.net/ielts/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("div", { className: `${isActive("/menu") ? "text-red-600" : "text-black"} flex flex-col justify-center items-center cursor-pointer`, onClick: toggleMenu, 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" })] })] }) }), _jsxs(_Fragment, { children: [_jsx("div", { className: `fixed top-0 left-0 right-0 bottom-0 bg-black opacity-50 z-10 ${isMenuOpen ? "" : "hidden"}`, onClick: toggleMenu }), _jsxs("div", { className: `fixed top-0 right-0 w-[80%] sm:w-[60%] h-full bg-red-600/70 z-50 p-6 transition-transform duration-500 transform ${isMenuOpen ? "translate-x-0" : "translate-x-full"} bg-opacity-50 shadow-lg`, children: [_jsxs("div", { className: "flex justify-between items-center mb-6", children: [_jsx("h2", { className: "text-xl text-white font-semibold" }), _jsx("button", { onClick: toggleMenu, className: "text-xl text-white bg-transparent border-0 hover:text-gray-300 transition-colors duration-200", children: "\u0110\u00F3ng X" })] }), _jsxs("ul", { className: "space-y-6 text-white", children: [_jsx("li", { children: _jsx(Link, { href: isDev ? `https://dev.youready.net/ielts/` : `https://www.youready.net/ielts/`, className: "text-lg hover:text-gray-300 transition-colors duration-200", onClick: toggleMenu, children: "Home" }) }), _jsx("li", { children: _jsx(Link, { href: isDev ? `https://dev.youready.net/ielts/listening/overview/` : `https://www.youready.net/ielts/listening/overview/`, className: "text-lg hover:text-gray-300 transition-colors duration-200", onClick: toggleMenu, children: "Listening Overview" }) }), _jsx("li", { children: _jsx(Link, { href: isDev ? `https://dev.youready.net/ielts/reading/overview/` : `https://www.youready.net/ielts/reading/overview/`, className: "text-lg hover:text-gray-300 transition-colors duration-200", onClick: toggleMenu, children: "Reading Overview" }) }), _jsx("li", { children: _jsx(Link, { href: isDev ? `https://dev.youready.net/ielts/writing/writing-overview/` : `https://www.youready.net/ielts/writing/writing-overview/`, className: "text-lg hover:text-gray-300 transition-colors duration-200", onClick: toggleMenu, children: "Writing Overview" }) }), _jsx("li", { children: _jsx(Link, { href: isDev ? `https://dev.youready.net/ielts/speaking/` : `https://www.youready.net/ielts/speaking/`, className: "text-lg hover:text-gray-300 transition-colors duration-200", onClick: toggleMenu, children: "Speaking Overview" }) }), _jsx("li", { children: _jsx(Link, { href: isDev ? `https://dev.youready.net/ielts/blog/` : `https://www.youready.net/ielts/blog/`, className: "text-lg hover:text-gray-300 transition-colors duration-200", onClick: toggleMenu, children: "Blog" }) }), _jsx("li", { children: _jsx(Link, { href: isDev ? `https://dev.youready.net/ielts/dictation/` : `https://www.youready.net/ielts/dictation/`, className: "text-lg hover:text-gray-300 transition-colors duration-200", onClick: toggleMenu, children: "Dictation" }) })] })] })] })] }));
}