src/components/Menu/Menu.css
.menu {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-top: -24px;
padding: 0 12px 0 20px;
position: relative;
overflow: hidden;
&__left {
position: relative;
z-index: 11;
}
&__sticky {
position: sticky;
top: 0;
z-index: 10;
background-color: rgba(255, 255, 255, 0.8);
width: 100%;
height: 34px;
margin-bottom: 6px;
}
&__button {
position: absolute;
z-index: 10;
top: 4px;
right: 4px;
}
&__back {
display: inline-block;
position: relative;
z-index: 11;
width: 30px;
height: 32px;
top: -22px;
margin-left: 12px;
transition: all ease-out 0.2s;
padding: 4px 2px 4px 0;
border-radius: var(--radius-md);
svg {
width: 100%;
height: 100%;
fill: var(--text-400);
}
&:hover {
background-color: var(--bg-gray-100);
svg {
fill: var(--text-500);
}
}
&--fixed {
position: sticky;
top: 12px;
width: 20px;
height: 22px;
padding: 2px 0;
}
}
&__back + & {
margin-left: -2px;
display: inline-block;
margin-left: -20px;
}
}