FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use unified navbar for all pages

Browse source 
Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
hossainemruz 2023-09-26 03:58:32 +06:00
parent 5a9af3cc46
commit cb0ae29984
24 changed files with 243 additions and 298 deletions
Download patch file Download diff file Expand all files Collapse all files

146
assets/styles/navigators/navbar.scss
View file

@ -1,10 +1,4 @@
@mixin initial-nav-item-hover-effect() {
color: #f9fafc;
transition: all 0.3s ease-out;
transform: translateY(-2px);
}
@mixin final-nav-item-hover-effect() {
@mixin nav-item-hover-effect() {
color: #2098d1 !important;
transition: all 0.3s ease-out;
border-bottom: 2px solid #2098d1 !important;
@ -12,7 +6,53 @@
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(34, 136, 168, 0.1) 0%);
}
@mixin navbar-dropdown() {
.top-navbar {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px;
z-index: 99999;
transition: all 0.4s ease-out;
margin: 0px;
padding-top: 0.4rem;
text-align: center;
background-color: #f9fafc;
color: #1c2d41;
transition: all 0.3s ease-out;
.navbar-brand {
color: #1c2d41;
font-weight: 600;
}
.sidebar-icon {
width: 32px;
height: 32px;
filter: invert(0.5);
}
li {
a {
color: #1c2d41;
font-weight: 500;
transition: all 0.3s ease-out;
border-bottom: 2px solid transparent;
&:hover {
@include nav-item-hover-effect();
}
}
}
.navbar-nav .active {
@include nav-item-hover-effect();
}
#top-navbar-divider {
background: rgba(0, 0, 0, 0.6);
}
.dropdown-menu {
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
border: 1px solid #fff;
@ -31,74 +71,11 @@
color: #1c2d41 !important;
&:hover {
@include final-nav-item-hover-effect();
@include nav-item-hover-effect();
}
}
}
}
}
.top-navbar {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px;
z-index: 99999;
transition: all 0.4s ease-out;
margin: 0px;
padding-top: 0.4rem;
text-align: center;
&.initial-navbar {
background-color: transparent;
.navbar-brand {
color: #c0ccda;
font-weight: 600;
}
li {
a {
color: #c0ccda;
&:hover {
@include initial-nav-item-hover-effect();
}
}
}
.navbar-nav .active {
@include initial-nav-item-hover-effect();
}
@include navbar-dropdown();
}
&.final-navbar {
background-color: #f9fafc;
color: #1c2d41;
transition: all 0.3s ease-out;
.navbar-brand {
color: #1c2d41;
font-weight: 600;
}
li {
a {
color: #1c2d41;
font-weight: 500;
transition: all 0.3s ease-out;
border-bottom: 2px solid#F9FAFC;
&:hover {
@include final-nav-item-hover-effect();
}
}
}
.navbar-nav .active {
@include final-nav-item-hover-effect();
}
#top-navbar-divider {
background: rgba(0, 0, 0, 0.6);
}
@include navbar-dropdown();
}
.navbar-collapse {
margin-top: -5px;
@ -125,6 +102,22 @@
}
}
&.transparent-navbar {
background-color: transparent;
.navbar-brand {
color: #c0ccda;
font-weight: 600;
}
li {
a {
color: #c0ccda;
}
}
.feather-menu {
stroke: #8392a5;
}
}
#top-navbar-divider {
margin-top: 10px;
background: rgba(192, 204, 218, 0.8);
@ -148,7 +141,7 @@
max-width: 100%;
}
&.initial-navbar {
&.transparent-navbar {
.navbar-nav .active,
li a:hover {
color: #2098d1;
@ -194,3 +187,10 @@
}
}
}
.feather-sidebar,
.feather-menu {
width: 1.5rem;
height: 1.5rem;
stroke: #3c4858;
}