Skip to content

Commit

Permalink
Improve Sidebar Menu Style
Browse files Browse the repository at this point in the history
  • Loading branch information
@sonvnn
sonvnn committed Aug 10, 2024
1 parent ac5af52 commit 96ac270
Show file tree
Hide file tree
Showing 10 changed files with 87 additions and 39 deletions.
8 changes: 7 additions & 1 deletion assets/vendor/astroid/scss/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,7 +272,6 @@ header .logo-wrapper {

.astroid-logo {
margin: 0 auto !important;
justify-content: center;
}

.astroid-sidebar-mobile-menu {
Expand Down Expand Up @@ -327,6 +326,13 @@ header .logo-wrapper {

.astroid-sidebar-content {
overflow-y: auto;
@media(min-width: 1200px) {
padding: 15px 25px;
}

@media(min-width: 1400px) {
padding: 15px 35px;
}
}

.astroid-sidebar-collapsable {
Expand Down
53 changes: 30 additions & 23 deletions assets/vendor/astroid/scss/_menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ ul {
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #eee;
border-bottom: 8px solid var(--bs-border-color);
z-index: 0;
left: 50%;
margin-left: -8px;
Expand All @@ -268,29 +268,40 @@ ul {
list-style-type: none;
margin: 0;
padding: 0;

.nav-title {
display: block;
}
li {
width: 100%;
display: block;
border-bottom: 1px solid $border-color;
width: 100%;
margin: 10px 0;
.nav-item-inner {
border-radius: var(--bs-border-radius);
}

.as-menu-item {
padding: 10px;
width: calc(100% - 50px);
display: inline-block;
display: block;
padding: $sidebar-menu-item-padding;
flex: auto;
}

>ul {
list-style-type: none;
margin: 0;
padding: 0;
padding-left: 20px;
ul.nav-child {
display: none;
border-top: 1px solid #eee;

li {
&:last-child {
border-bottom: 0;
list-style: none;
border-left: 1px dashed var(--bs-border-color);
margin-left: 20px;
padding-left: 15px;
> li > div.nav-item-inner > a {
position: relative;
&:before {
content: "";
margin-right: 10px;
border-top: 1px dashed var(--bs-border-color);
width: 7px;
height: 1px;
position: absolute;
top: 50%;
left: -13px;
}
}
}
Expand All @@ -301,14 +312,10 @@ ul {
}
}

>.nav-item-caret {
width: 50px;
display: inline-block;
.nav-item-caret {
font-size: 13px;
text-align: right;
padding: 10px;
padding: $sidebar-menu-item-padding;
cursor: pointer;
float: right;
line-height: inherit;

&:before {
Expand Down
1 change: 1 addition & 0 deletions assets/vendor/astroid/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ $sidebar-header-mini-width: 54px !default;

// Menu
$megamenu-gutter-width: 30px !default;
$sidebar-menu-item-padding: 5px 15px !default;

// Deprecated Variable
$header-sidebar-width: 320px !default;
Expand Down
2 changes: 1 addition & 1 deletion framework/frontend/header/menu/link.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,6 @@
<?php } ?>
</a>
<?php if ($slidemenu && ($item->parent && $item->deeper == 1)) { ?>
<i class="fas fa-plus nav-item-caret<?php echo $active ? ' open' : ''; ?>"></i>
<i class="fas fa-plus nav-item-caret<?php echo $active ? ' open' : ''; ?>"></i>
<?php } ?>
<!--menu link ends-->
4 changes: 3 additions & 1 deletion framework/library/astroid/Component/Menu.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -653,9 +653,11 @@ public static function getSidebarMenu($menutype = '')
$options = self::getAstroidMenuOptions($item, $list);
$class = self::getLiClass($item, $options, $default_id, $active_id, $path);
echo '<li class="' . \implode(' ', $class) . '">';
echo '<div class="nav-item-inner d-flex align-items-center'.(in_array('nav-item-active', $class) ? ' active' : '').'">';
$document->include('header.menu.link', ['item' => $item, 'options' => $options, 'mobilemenu' => false, 'slidemenu' => 1, 'active' => in_array('nav-item-active', $class)]);
echo '</div>';
if ($item->deeper) {
echo '<ul class="nav-child list-group navbar-subnav level-' . $item->level . '">';
echo '<ul class="nav-child navbar-subnav level-' . $item->level . '">';
} elseif ($item->shallower) {
echo '</li>';
echo str_repeat('</ul></li>', $item->level_diff);
Expand Down
37 changes: 34 additions & 3 deletions framework/library/astroid/Component/Utility.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ public static function typography()
$customselector = $params->get('custom_typography_selectors', '');
$logo_type = $params->get('logo_type', 'none');

$types = array('body' => 'body, .body', 'h1' => 'h1, .h1', 'h2' => 'h2, .h2', 'h3' => 'h3, .h3', 'h4' => 'h4, .h4', 'h5' => 'h5, .h5', 'h6' => 'h6, .h6', 'logo' => ['.astroid-logo-text', '.astroid-logo-text > a.site-title'], 'logo_tag_line' => '.astroid-logo-text > p.site-tagline', 'menu' => '.astroid-nav > li > .as-menu-item, .astroid-sidebar-menu > li > .as-menu-item, .astroid-mobile-menu > .nav-item > .as-menu-item', 'submenu' => '.nav-submenu-container .nav-submenu > li, .jddrop-content .megamenu-item .megamenu-menu li, .nav-submenu, .astroid-mobile-menu .nav-child .menu-go-back, .astroid-mobile-menu .nav-child .nav-item-submenu > .as-menu-item', 'custom' => $customselector);
$types = array('body' => 'body, .body', 'h1' => 'h1, .h1', 'h2' => 'h2, .h2', 'h3' => 'h3, .h3', 'h4' => 'h4, .h4', 'h5' => 'h5, .h5', 'h6' => 'h6, .h6', 'logo' => ['.astroid-logo-text', '.astroid-logo-text > a.site-title'], 'logo_tag_line' => '.astroid-logo-text > p.site-tagline', 'menu' => '.astroid-nav > li > .as-menu-item, .astroid-sidebar-menu > li > .nav-item-inner > .as-menu-item, .astroid-mobile-menu > .nav-item > .as-menu-item', 'submenu' => '.nav-submenu-container .nav-submenu > li, .jddrop-content .megamenu-item .megamenu-menu li, .nav-submenu, .astroid-mobile-menu .nav-child .menu-go-back, .astroid-mobile-menu .nav-child .nav-item-submenu > .as-menu-item, .nav-item-submenu .as-menu-item', 'custom' => $customselector);

$bodyTypography = null;
foreach ($types as $type => $selector) {
Expand Down Expand Up @@ -335,7 +335,7 @@ public static function colors()
$main_menu_link_active_color = Style::getColor($params->get('main_menu_link_active_color', ''));
$main_menu_active_background = Style::getColor($params->get('main_menu_active_background', ''));
$main_menu_hover_background = Style::getColor($params->get('main_menu_hover_background', ''));
$navLink = new Style(['.astroid-nav .nav-link', '.astroid-sidebar-menu .nav-link']);
$navLink = new Style(['.astroid-nav .nav-link']);
$navLink->addCss('color', $main_menu_link_color['light']);
$navLink->hover()->addCss('color', $main_menu_link_hover_color['light']);
$navLink->hover()->addCss('background-color', $main_menu_hover_background['light']);
Expand All @@ -344,7 +344,7 @@ public static function colors()
$navLink->active('.active')->addCss('background-color', $main_menu_active_background['light']);
$navLink->render(); // render navlink

$navLink = new Style(['.astroid-nav .nav-link', '.astroid-sidebar-menu .nav-link'], 'dark');
$navLink = new Style(['.astroid-nav .nav-link'], 'dark');
$navLink->addCss('color', $main_menu_link_color['dark']);
$navLink->hover()->addCss('color', $main_menu_link_hover_color['dark']);
$navLink->hover()->addCss('background-color', $main_menu_hover_background['dark']);
Expand Down Expand Up @@ -383,6 +383,37 @@ public static function colors()
$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 > .as-menu-item')->addCss('color', $main_menu_link_color['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()->addCss('background-color', $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')->addCss('background-color', $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 > .as-menu-item')->addCss('color', $main_menu_link_color['dark']);
$sidebar_menu_style->child('.nav-item-inner > .as-menu-item')->hover()->addCss('color', $main_menu_link_hover_color['dark']);
$sidebar_menu_style->child('.nav-item-inner')->hover()->addCss('background-color', $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']);
$sidebar_menu_style->child('.nav-item-inner')->active('.active')->addCss('background-color', $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();

// Sticky Menu
$stick_header_mobile_menu_icon_color = Style::getColor($params->get('stick_header_mobile_menu_icon_color', ''));
$stick_header_mobile_menu_active_icon_color = Style::getColor($params->get('stick_header_mobile_menu_active_icon_color', ''));
Expand Down
6 changes: 3 additions & 3 deletions js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@
return;
}
$('.astroid-sidebar-menu .nav-item-caret').click(function () {
$(this).parent('li').siblings('li').children('ul').slideUp();
$(this).parent('li').siblings('li').children('.nav-item-caret').removeClass('open');
$(this).parent().parent('li').siblings('li').children('ul').slideUp();
$(this).parent().parent('li').siblings('li').children('div').children('.nav-item-caret').removeClass('open');
$(this).toggleClass('open');
$(this).siblings('ul').slideToggle();
$(this).parent().siblings('ul').slideToggle();
});
$('.astroid-sidebar-collapsable').click(function () {
$('#astroid-header').toggleClass('expanded');
Expand Down
2 changes: 1 addition & 1 deletion js/script.min.js
View file

Large diffs are not rendered by default.

11 changes: 6 additions & 5 deletions js/videobg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@

var _video = $('<video />', {
playsinline: true,
autoplay: true,
loop: true,
src: _url,
});
Expand All @@ -40,13 +39,15 @@
_video.css('transform', 'translate(-50%, -50%)');
_video.css('max-width', 'inherit');
_video.prop('muted', true);
$(window).on('load', function () {
_container.append(_video);
});

_container.append(_video);
$(this).prepend(_container);

_video.prop('muted', true);
_video.trigger('play');
});
};
$(function () {
$(document).ready(function () {
$('[data-as-video-bg]').ASVideoBG();
});
}(jQuery));
Expand Down
2 changes: 1 addition & 1 deletion js/videobg.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 96ac270

Please sign in to comment.