.sidebar-nav {
height: 100%; width: 0; position: fixed; z-index: 1; top: 0; right: 0; background-color: $sidebar-background; overflow-x: hidden; transition: 0.5s; padding-top: 60px;
}
.sidebar-nav a {
padding: 8px; text-decoration: none; color: $sidebar-text-color; font-size: 25px; display: block; transition: 0.3s;
}
.sidebar-table {
padding: 0 26px;
}
.sidebar-tr {
white-space: nowrap; padding: 8px 8px 8px 32px; text-decoration: none; color: $primary; font-size: 25px; transition: 0.3s;
}
.sidebar-icon {
color: $sidebar-text-color;
}
.sidebar-td {
padding: 7px 0;
}
@media screen and (max-height: 450px) {
.sidebar-nav { padding-top: 15px; } .sidebar-nav a { font-size: 18px; }
}
nav-btn {
width: 60px; height: 35px; position: fixed; right: 25px; top: 25px; margin: 0; z-index: 2; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer;
}
nav-btn span {
display: block; position: absolute; height: 5px; width: 100%; background-color: $primary; border-radius: 5px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out;
}
nav-btn span:nth-child(1) {
top: 0px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;
}
nav-btn span:nth-child(2) {
top: 15px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;
}
nav-btn span:nth-child(3) {
top: 30px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;
}
nav-btn.open span {
background-color: $primary;
}
nav-btn.open span:nth-child(1) {
-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: -3px; left: 8px;
}
nav-btn.open span:nth-child(2) {
width: 0%; opacity: 0;
}
nav-btn.open span:nth-child(3) {
-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 39px; left: 8px;
}
@media (prefers-reduced-motion: reduce) {
#nav-btn, #nav-btn span, .sidebar-nav { -webkit-transition: 0; -moz-transition: 0; -o-transition: 0; transition: 0; }
}