Open tkv00 opened 1 month ago
import * as React from "react"; import styled from "styled-components"; import { Link } from "react-router-dom"; import { GoHome } from "react-icons/go"; import { MdOutlineChat } from "react-icons/md"; import { FiUser } from "react-icons/fi"; import { responsiveSize } from "../utils/Mediaquery"; export default function BottomNav() { return ( <BottomNavContainer> <div> {/* 메인이동 */} <Link to="/main"> <StyledIcon as={GoHome} /> </Link> </div> {/* 프로필 이동 */} <div> <Link> <StyledIcon as={FiUser} /> </Link> </div> {/* 채팅이동 */} <div> <Link> <StyledIcon as={MdOutlineChat} /> </Link> </div> </BottomNavContainer> ); } //================================================================================ export const BottomNavContainer = styled.nav` width: 100%; position: sticky; bottom: 0; display: flex; flex-direction: row; justify-content: space-around; align-items: center; background-color: ${({ theme }) => theme.colors.black}; height: ${responsiveSize("90")}; bottom: 0; border-top-left-radius: ${responsiveSize("30")}; border-top-right-radius: ${responsiveSize("30")}; z-index: 1; `; const StyledIcon = styled.div` width: ${responsiveSize("48")}; height: ${responsiveSize("48")}; color: gray; transition: color 0.3s; &:hover { color: ${({ theme }) => theme.colors.lightpurple}; } `;
마우스 클릭OFF
마우스 클릭ON
BottomNav
Wrapper
height
감사합니다~
코드
마우스 클릭OFF![스크린샷 2024-07-23 20 49 16](https://github.com/user-attachments/assets/6e072650-956e-4e99-9d6c-0aafebc98c8a)
마우스 클릭ON![스크린샷 2024-07-23 20 49 25](https://github.com/user-attachments/assets/fe291f92-2ab0-4dab-be2f-ddc521566427)
사용시 주의사항
BottomNav
의 위치는 /components 입니다.BottomNav
을 감싸는Wrapper
요소의height
값이 없어야 하단에 고정배치됩니다.