Skip to content

Commit

Permalink
Optimize Sidebar Menu Css
Browse files Browse the repository at this point in the history
  • Loading branch information
@sonvnn
sonvnn committed Feb 17, 2025
1 parent f217d3f commit b3a5a69
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 55 deletions.
2 changes: 1 addition & 1 deletion assets/vendor/astroid/scss/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -369,7 +369,7 @@ header .logo-wrapper {

@media(max-width: 1200px) {
.astroid-sidebar-content {
>div.astroid-sidebar-menu {
>div.astroid-sidebar-menu-wrap {
display: none;
}

Expand Down
58 changes: 53 additions & 5 deletions assets/vendor/astroid/scss/_menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,14 @@
.megamenu-container {
--as-menu-gutter-x: #{$megamenu-gutter-width};
display: none;
background-color: var(--as-dropdown-bg-color);
position: absolute;
z-index: 1003;

.nav-submenu {
background-color: var(--as-dropdown-bg-color);
}

&.nav-submenu-container {
padding: 0;
}
Expand All @@ -44,6 +49,18 @@
}
}
}

li.nav-item-submenu > a {
color: var(--as-dropdown-link-color);
&:hover {
color: var(--as-dropdown-menu-link-hover-color);
background-color: var(--as-dropdown-menu-hover-bg-color);
}
&:active, &.active {
color: var(--as-dropdown-menu-active-link-color);
background-color: var(--as-dropdown-menu-active-bg-color);
}
}
}

.nav-item-megamenu .nav-submenu {
Expand Down Expand Up @@ -309,22 +326,31 @@ ul {
width: 100%;
margin: 5px 0;
.nav-item-inner {
background-color: var(--as-main-menu-link-background);
border-radius: var(--bs-border-radius);
transition: all 500ms ease;

&.active, &:active {
background-color: var(--as-main-menu-active-background);
> i {
color: var(--as-main-menu-link-active-color);
}
}
&:hover {
background-color: var(--as-main-menu-hover-background);
> i {
color: var(--as-main-menu-link-hover-color);
}
}
> .as-menu-item {
color: var(--as-main-menu-link-color);
&:active, &.active {
color: var(--as-main-menu-link-active-color);
}
&:hover {
color: var(--as-main-menu-link-hover-color);
}
}
}
> .nav-item-inner {
background-color: var(--as-main-menu-link-background);
}

.as-menu-item {
display: block;
Expand All @@ -334,11 +360,15 @@ ul {

ul.nav-child {
display: none;
background-color: var(--as-dropdown-bg-color);
list-style: none;
border-left: 1px dashed var(--bs-border-color);
margin-left: 20px;
padding-left: 15px;
> li > div.nav-item-inner > a {
}

.nav-item-submenu .nav-item-inner {
> a {
position: relative;
&:before {
content: "";
Expand All @@ -350,6 +380,24 @@ ul {
top: 50%;
left: -13px;
}
&.as-menu-item {
color: var(--as-dropdown-link-color);
}
}
> i {
color: var(--as-dropdown-link-color);
}
&:active, &.active {
background-color: var(--as-dropdown-menu-active-bg-color);
> a.as-menu-item, > i {
color: var(--as-dropdown-menu-active-link-color);
}
}
&:hover {
background-color: var(--as-dropdown-menu-hover-bg-color);
> a.as-menu-item, > i {
color: var(--as-dropdown-menu-link-hover-color);
}
}
}

Expand Down
61 changes: 12 additions & 49 deletions framework/library/astroid/Component/Utility.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -475,60 +475,23 @@ public static function colors(): void
$dropdown_menu_active_bg_color = Style::getColor($params->get('dropdown_menu_active_bg_color', ''));
$dropdown_menu_active_link_color= Style::getColor($params->get('dropdown_menu_active_link_color', ''));

$dropdown = Style::addCssBySelector('.megamenu-container', 'background-color', $dropdown_bg_color['light']);
$submenuDropdown = Style::addCssBySelector('.megamenu-container .nav-submenu .nav-submenu', 'background-color', $dropdown_bg_color['light']);
$root->addCss('--as-dropdown-bg-color', $dropdown_bg_color['light']);
$root_dark->addCss('--as-dropdown-bg-color', $dropdown_bg_color['dark']);

Style::addCssBySelector('.has-megamenu.open .arrow', 'border-bottom-color', $dropdown_bg_color['light']);
$root->addCss('--as-dropdown-link-color', $dropdown_link_color['light']);
$root_dark->addCss('--as-dropdown-link-color', $dropdown_link_color['dark']);

$link = $dropdown->child('li.nav-item-submenu > a');
$link->addCss('color', $dropdown_link_color['light']);
$link->hover()->addCss('color', $dropdown_menu_link_hover_color['light'])->addCss('background-color', $dropdown_menu_hover_bg_color['light']);
$link->active('.active')->addCss('color', $dropdown_menu_active_link_color['light'])->addCss('background-color', $dropdown_menu_active_bg_color['light']);
$dropdown->render(); // render dropdown
$root->addCss('--as-dropdown-menu-link-hover-color', $dropdown_menu_link_hover_color['light']);
$root_dark->addCss('--as-dropdown-menu-link-hover-color', $dropdown_menu_link_hover_color['dark']);

$dropdown = Style::addCssBySelector('[data-bs-theme=dark] .megamenu-container', 'background-color', $dropdown_bg_color['dark']);
$submenuDropdown = Style::addCssBySelector('[data-bs-theme=dark] .megamenu-container .nav-submenu .nav-submenu', 'background-color', $dropdown_bg_color['dark']);
$root->addCss('--as-dropdown-menu-hover-bg-color', $dropdown_menu_hover_bg_color['light']);
$root_dark->addCss('--as-dropdown-menu-hover-bg-color', $dropdown_menu_hover_bg_color['dark']);

Style::addCssBySelector('[data-bs-theme=dark] .has-megamenu.open .arrow', 'border-bottom-color', $dropdown_bg_color['dark']);
$root->addCss('--as-dropdown-menu-active-link-color', $dropdown_menu_active_link_color['light']);
$root_dark->addCss('--as-dropdown-menu-active-link-color', $dropdown_menu_active_link_color['dark']);

$link = $dropdown->child('li.nav-item-submenu > a');
$link->addCss('color', $dropdown_link_color['dark']);
$link->hover()->addCss('color', $dropdown_menu_link_hover_color['dark'])->addCss('background-color', $dropdown_menu_hover_bg_color['dark']);
$link->active('.active')->addCss('color', $dropdown_menu_active_link_color['dark'])->addCss('background-color', $dropdown_menu_active_bg_color['dark']);
$dropdown->render(); // render dropdown

// Sidebar Submenu
$sidebar_menu_style = new Style('.astroid-sidebar-menu');
$sidebar_menu_style->child('.nav-item-inner')->addCss('background-color', $main_menu_link_background['light']);
$sidebar_menu_style->child('.nav-item-inner > .as-menu-item')->hover()->addCss('color', $main_menu_link_hover_color['light']);
$sidebar_menu_style->child('.nav-item-inner')->hover()->child('> i')->addCss('color', $main_menu_link_hover_color['light']);
$root->addCss('--as-main-menu-hover-background', $main_menu_hover_background['light']);
$sidebar_menu_style->child('.nav-item-inner > .as-menu-item')->active('.active')->addCss('color', $main_menu_link_active_color['light']);
$sidebar_menu_style->child('.nav-item-inner')->active('.active')->child('> i')->addCss('color', $main_menu_link_active_color['light']);
$root->addCss('--as-main-menu-active-background', $main_menu_active_background['light']);
$sidebar_link = $sidebar_menu_style->child('.nav-item-submenu .nav-item-inner');
$sidebar_link->child('a.as-menu-item')->addCss('color', $dropdown_link_color['light']);
$sidebar_link->hover()->child('a.as-menu-item')->addCss('color', $dropdown_menu_link_hover_color['light']);
$sidebar_link->hover()->addCss('background-color', $dropdown_menu_hover_bg_color['light']);
$sidebar_link->child('a.as-menu-item')->active()->addCss('color', $dropdown_menu_active_bg_color['light']);
$sidebar_link->active()->addCss('background-color', $dropdown_menu_active_bg_color['light']);
$sidebar_menu_style->child('.navbar-subnav')->addCss('background-color', $dropdown_bg_color['light']);
$sidebar_menu_style->render();

$sidebar_menu_style = new Style('.astroid-sidebar-menu', 'dark');
$sidebar_menu_style->child('.nav-item-inner')->addCss('background-color', $main_menu_link_background['dark']);
$sidebar_menu_style->child('.nav-item-inner > .as-menu-item')->hover()->addCss('color', $main_menu_link_hover_color['dark']);
$root_dark->addCss('--as-main-menu-hover-background', $main_menu_hover_background['dark']);
$sidebar_menu_style->child('.nav-item-inner > .as-menu-item')->active('.active')->addCss('color', $main_menu_link_active_color['dark']);
$root_dark->addCss('--as-main-menu-active-background', $main_menu_active_background['dark']);
$sidebar_link = $sidebar_menu_style->child('.nav-item-submenu .nav-item-inner');
$sidebar_link->child('a.as-menu-item')->addCss('color', $dropdown_link_color['dark']);
$sidebar_link->hover()->child('a.as-menu-item')->addCss('color', $dropdown_menu_link_hover_color['dark']);
$sidebar_link->hover()->addCss('background-color', $dropdown_menu_hover_bg_color['dark']);
$sidebar_link->child('a.as-menu-item')->active()->addCss('color', $dropdown_menu_active_bg_color['dark']);
$sidebar_link->active()->addCss('background-color', $dropdown_menu_active_bg_color['dark']);
$sidebar_menu_style->child('.navbar-subnav')->addCss('background-color', $dropdown_bg_color['dark']);
$sidebar_menu_style->render();
$root->addCss('--as-dropdown-menu-active-bg-color', $dropdown_menu_active_bg_color['light']);
$root_dark->addCss('--as-dropdown-menu-active-bg-color', $dropdown_menu_active_bg_color['dark']);

// Sticky Menu
$stick_header_mobile_menu_icon_color = Style::getColor($params->get('stick_header_mobile_menu_icon_color', ''));
Expand Down

0 comments on commit b3a5a69

Please sign in to comment.