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;
반응형
'개발 > React' 카테고리의 다른 글
[react] Warning: `value` prop on `input` should not be null. (65) | 2022.02.08 |
---|---|
[react] axios headers authorization 추가 (0) | 2022.01.20 |
[react] 검색 기능 구현하기 (0) | 2022.01.10 |
[react] Warning: A component is changing an uncontrolled input to be controlled... (64) | 2022.01.07 |
[react] Warning: `value` prop on `select` should not be null. (0) | 2022.01.07 |
댓글