@tikpage/reactjs-popup
Version:
React Popup Component - Modals,Tooltips and Menus — All in one
80 lines (72 loc) • 1.32 kB
CSS
.sidebar {
width: 250px ;
padding: 0 0.5rem 0 0;
}
.sticky-sidebar {
position: sticky;
top: 100px;
width: 100%;
}
.sticky-sidebar .menu {
background: transparent;
}
.mobile-sidebar {
display: none;
}
@media only screen and (max-width: 768px) {
.website-sidebar {
display: none;
}
.mobile-sidebar {
width: 100%;
display: block;
text-align: center;
padding: 0px;
}
.menu {
position: relative;
top: 0px;
font-size: 20px;
max-height: 100vh;
}
.menu a:after {
display: none;
}
.menu .link {
margin: 20px 0.2em;
}
}
/* mobile menu */
.burger-menu,
.burger-menu.open {
display: inline-block;
cursor: pointer;
position: fixed;
right: 20px;
bottom: 40px;
z-index: 9999;
background: #fff;
padding: 10px;
border-radius: 25px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.burger-menu .bar1,
.bar2,
.bar3 {
width: 25px;
height: 3px;
background-color: #333;
margin: 4px 0;
transition: 0.4s;
}
.burger-menu.open .bar1 {
-webkit-transform: rotate(-45deg) translate(-4px, 4px);
transform: rotate(-45deg) translate(-4px, 4px);
}
.burger-menu.open .bar2 {
opacity: 0;
}
.burger-menu.open .bar3 {
-webkit-transform: rotate(45deg) translate(-6px, -6px);
transform: rotate(45deg) translate(-6px, -6px);
}