[アニメーション]前進するナビゲーション

構成部品構造

<Tap name="HOME" selected={page}>
    <span />
    <Link href="/">
        <div>Home</div>
    </Link>
</Tap>

CSS

const Tap = styled.div<{ selected?: string; name?: string }>`
    // border: 1px solid black;
    position: relative;
    span {
        position: absolute;
        top: 25px;
        background-color: white;
        width: 185px;
        height: 10px;
        z-index: -1;
    }
    div {
        // border: 1px solid black;
        margin-left: 30px;
        background-color: white;
        width: 185px;
        height: 55px;
        border-radius: 15px;
        text-align: center;
        line-height: 60px;
        transform: ${(props) => props.selected === props.name && 'translateX(30px)'};
        cursor: pointer;
        &:hover {
            transform: translateX(30px);
            transition: all 0.6s ease-in-out;
        }
    }
`;