improve nav bar style
This commit is contained in:
parent
0b228f4315
commit
478e02d29a
2 changed files with 136 additions and 121 deletions
|
@ -243,45 +243,46 @@ nav .navigation-wrapper {
|
|||
align-items: center;
|
||||
width: auto;
|
||||
}
|
||||
nav .navigation-wrapper .sidebar-container {
|
||||
nav .sidebar-container {
|
||||
height: 30px;
|
||||
}
|
||||
nav .navigation-wrapper .navbar-brand {
|
||||
nav .navbar-brand {
|
||||
display: inline-flex;
|
||||
gap: 10px;
|
||||
}
|
||||
nav .navigation-wrapper .navbar-brand span {
|
||||
nav .navbar-brand span {
|
||||
font-weight: bold;
|
||||
font-size: 1.3em;
|
||||
color: #fff;
|
||||
}
|
||||
nav .navigation-wrapper .navbar-entry {
|
||||
nav .navbar-entry {
|
||||
display: flex;
|
||||
}
|
||||
nav .navigation-wrapper .navbar-entry img {
|
||||
nav .navbar-entry img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
nav .navigation-wrapper .search-form {
|
||||
nav .search-form {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-left: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
nav .navigation-wrapper .search-form input {
|
||||
nav .search-form input {
|
||||
margin: 0;
|
||||
}
|
||||
nav .navigation-wrapper .sidebar-toggler {
|
||||
nav .sidebar-toggler {
|
||||
display: none;
|
||||
}
|
||||
nav .navigation-wrapper .sidebar-toggler:checked ~ .sidebar {
|
||||
nav .sidebar-toggler:checked ~ .sidebar {
|
||||
transform: translateX(0);
|
||||
}
|
||||
nav .navigation-wrapper .sidebar-label {
|
||||
nav .sidebar-label {
|
||||
display: flex;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
nav .navigation-wrapper .sidebar {
|
||||
nav .sidebar {
|
||||
z-index: 1;
|
||||
isolation: isolate;
|
||||
background-color: #131516;
|
||||
|
@ -292,16 +293,16 @@ nav .navigation-wrapper .sidebar {
|
|||
transform: translateX(-220px);
|
||||
transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
nav .navigation-wrapper .sidebar br {
|
||||
nav .sidebar br {
|
||||
align-self: stretch;
|
||||
margin-top: 10px;
|
||||
}
|
||||
nav .navigation-wrapper .sidebar .sidebar-list {
|
||||
nav .sidebar-list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item {
|
||||
nav .sidebar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
|
@ -310,10 +311,10 @@ nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item {
|
|||
text-decoration: none;
|
||||
padding: 10px;
|
||||
}
|
||||
nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item:hover {
|
||||
nav .sidebar-item:hover {
|
||||
background-color: #222;
|
||||
}
|
||||
nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item img {
|
||||
nav .sidebar-item img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: 1.2rem;
|
||||
|
@ -332,19 +333,22 @@ nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item img {
|
|||
background-color: #131516;
|
||||
padding-block: 8px;
|
||||
}
|
||||
nav .navigation-wrapper .sidebar {
|
||||
nav .sidebar {
|
||||
z-index: -1;
|
||||
width: 100vw;
|
||||
transform: translateY(-100%);
|
||||
padding-block: 8px 16px;
|
||||
}
|
||||
nav .navigation-wrapper .sidebar br {
|
||||
nav .sidebar br {
|
||||
display: none;
|
||||
}
|
||||
nav .sidebar-list {
|
||||
background-color: #131516;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-columns: minmax(0px, 400px) repeat(auto-fit, minmax(0px, 400px));
|
||||
}
|
||||
nav .sidebar-item {
|
||||
padding-inline: unset;
|
||||
}
|
||||
}
|
||||
.component-header {
|
||||
|
|
|
@ -277,99 +277,6 @@ nav {
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
|
||||
.sidebar-container {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
display: inline-flex;
|
||||
gap: 10px;
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
font-size: 1.3em;
|
||||
color: $fg;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-entry {
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-form {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-toggler {
|
||||
display: none;
|
||||
|
||||
&:checked ~ .sidebar {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-label {
|
||||
display: flex;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
z-index: 1;
|
||||
isolation: isolate;
|
||||
background-color: $bg;
|
||||
position: absolute;
|
||||
padding-top: 6px;
|
||||
left: 0;
|
||||
width: 220px;
|
||||
transform: translateX(-220px);
|
||||
transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
|
||||
br {
|
||||
align-self: stretch;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.sidebar-list {
|
||||
list-style-type: none;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.sidebar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
color: $fg;
|
||||
font-size: 0.9em;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
|
||||
&:hover {
|
||||
background-color: $bg-secondary;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: 1.2rem;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .navbar-shadow {
|
||||
|
@ -383,6 +290,100 @@ nav {
|
|||
// rgba(240, 248, 255, 0) 28px
|
||||
// );
|
||||
// }
|
||||
|
||||
.sidebar-container {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
display: inline-flex;
|
||||
gap: 10px;
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
font-size: 1.3em;
|
||||
color: $fg;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-entry {
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-form {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-left: 8px;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-toggler {
|
||||
display: none;
|
||||
|
||||
&:checked ~ .sidebar {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-label {
|
||||
display: flex;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
z-index: 1;
|
||||
isolation: isolate;
|
||||
background-color: $bg;
|
||||
position: absolute;
|
||||
padding-top: 6px;
|
||||
left: 0;
|
||||
width: 220px;
|
||||
transform: translateX(-220px);
|
||||
transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
|
||||
br {
|
||||
align-self: stretch;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-list {
|
||||
list-style-type: none;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
color: $fg;
|
||||
font-size: 0.9em;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
|
||||
&:hover {
|
||||
background-color: $bg-secondary;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: 1.2rem;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// mobile nav bar
|
||||
|
@ -397,23 +398,33 @@ nav {
|
|||
.navigation-wrapper {
|
||||
background-color: $bg;
|
||||
padding-block: 8px; // Reduced from 15px
|
||||
.sidebar {
|
||||
z-index: -1;
|
||||
width: 100vw;
|
||||
transform: translateY(-100%);
|
||||
padding-block: 8px 16px;
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
z-index: -1;
|
||||
width: 100vw;
|
||||
transform: translateY(-100%);
|
||||
padding-block: 8px 16px;
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-list {
|
||||
background-color: $bg;
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// flex-wrap: wrap;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-columns: minmax(0px, 400px) repeat(
|
||||
auto-fit,
|
||||
minmax(0px, 400px)
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
padding-inline: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue