[react] tailwind로 메뉴바 세팅

[react] tailwind로 메뉴바 세팅

 

bottom 쪽  nav바 tailwind className 코드

import React, { useMemo } from "react";

const BottomMenuBar = () => {
    const naviIcon = useMemo(() => ({ background: "url('/images/mobile/home/hamburger.svg') no-repeat center" }), [])
    const plusIcon = useMemo(() => ({ background: "url('/images/mobile/home/plus.svg') no-repeat center" }), [])
    const userIcon = useMemo(() => ({ background: "url('/images/mobile/home/user.svg') no-repeat center" }), [])
    const naviActive = useMemo(() => ({ background: "url('/images/mobile/home/hamburger.svg') no-repeat center" }), [])
    const pluseActive = useMemo(() => ({ background: "url('/images/mobile/home/plus.svg') no-repeat center" }), [])
    const userActive = useMemo(() => ({ background: "url('/images/mobile/home/user.svg') no-repeat center" }), [])
    const pathname = window.location.pathname;


    return (
        <div className="fixed max-w-xs mx-auto bottom-6 left-0 right-0 z-20 w-full flex-shrink-0 bg-white rounded-full">
            <div className="grid grid-cols-3 gap-4 text-center text-xs m-2 font-bold">
                <div className="flex gap-0.5 flex-col justify-center items-center">
                    <div className="flex justify-center items-center rounded-full w-8 h-8"
                        style={pathname === '/intro' ? naviActive : naviIcon}
                    ></div>
                </div>

                <div className="flex gap-0.5 flex-col justify-center items-center">
                    <div className="flex justify-center items-center rounded-full w-8 h-8"
                        style={pathname === '/analysis' ? pluseActive : plusIcon}
                    ></div>
                </div>

                <div className="flex gap-0.5 flex-col justify-center items-center">
                    <div className="flex justify-center items-center rounded-full w-8 h-8"
                        style={pathname === '/stats' ? userActive : userIcon}></div>
                </div>
            </div>
        </div>
    );
};

export default BottomMenuBar;