Skip to content

Commit

Permalink
Add Sidebar Topbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@sonvnn
sonvnn committed Dec 31, 2024
1 parent 00a9877 commit fb0d0e5
Show file tree
Hide file tree
Showing 8 changed files with 213 additions and 53 deletions.
47 changes: 47 additions & 0 deletions assets/images/header/sidebar-topbar.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
85 changes: 59 additions & 26 deletions assets/vendor/astroid/scss/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,24 +230,37 @@ header .logo-wrapper {
/* Sidebar Header */
.astroid-header {
&.has-sidebar {
position: fixed;
width: $sidebar-header-width;
top: 0;
height: 100%;
z-index: 1;
transition: .1s linear all;
box-shadow: $sidebar-header-shadow;
> .astroid-sidebar-header {
position: fixed;
top: 0;
width: 100%;
min-height: 60px;
border-bottom: 1px solid var(--bs-border-color);
z-index: 2;
transition: .1s linear all;
}
> .astroid-sidebar-content {
position: fixed;
width: $sidebar-header-width;
top: 0;
bottom: 0;
z-index: 1;
transition: .1s linear all;
box-shadow: $sidebar-header-shadow;
}

@media(max-width: 1200px) {
width: $sidebar-header-mini-width;
&.astroid-sidebar-topbar {
> .astroid-sidebar-content {
top: 60px;
}
}

&.sidebar-dir-left {
&.sidebar-dir-left > .astroid-sidebar-content {
left: 0 !important;
right: auto !important;
}

&.sidebar-dir-right {
&.sidebar-dir-right > .astroid-sidebar-content {
right: 0 !important;
left: auto !important;
}
Expand All @@ -266,10 +279,6 @@ header .logo-wrapper {
}
}

.astroid-sidebar-logo {
margin: 15px 0;
}

.astroid-logo {
margin: 0 auto !important;
}
Expand Down Expand Up @@ -298,19 +307,19 @@ header .logo-wrapper {

@media (max-width: 1200px) {
&.has-sidebar {
display: block;
width: 100%;
position: relative;
padding: 15px 0;

.astroid-sidebar-content, .astroid-sidebar-header {
display: block;
width: 100%;
position: relative;
padding: 15px 20px;
}
.astroid-sidebar-mobile-menu {
display: block;
margin-right: 20px;
}

.astroid-sidebar-logo {
display: flex;
padding: 0 15px;
align-items: center;
}
}
Expand All @@ -320,14 +329,24 @@ header .logo-wrapper {
max-width: $sidebar-header-width;
}

.astroid-sidebar-header {
@media(min-width: 1200px) {
padding: 15px 20px;
}

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

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

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

Expand Down Expand Up @@ -396,11 +415,25 @@ header .logo-wrapper {
}

@media (min-width:1201px) {
body.header-sidebar-left {
body.header-sidebar-left .astroid-content.has-sidebar {
margin-left: $sidebar-header-width;
}

body.header-sidebar-right {
body.header-sidebar-right .astroid-content.has-sidebar {
margin-right: $sidebar-header-width;
}
}
}

.astroid-header-sidebar-topbar {
.astroid-sidebar-content {
@media (max-width: 1200px) {
display: none !important;
}
}
.astroid-content {
padding-top: 60px;
@media (max-width: 1200px) {
padding-top: 0;
}
}
}
14 changes: 10 additions & 4 deletions framework/frontend/document/body.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,13 @@
$astroid_content_class = ['astroid-content']; // astroid_content_class
if ($header && !empty($header_mode) && $header_mode == 'sidebar') {
$astroid_content_class[] = 'has-sidebar';
$astroid_content_class[] = 'sidebar-dir-' . $params->get('header_sidebar_menu_mode', 'left');
$mode = $params->get('header_sidebar_menu_mode', 'left');
if ($mode == 'topbar') {
$sidebar_position = $params->get('sidebar_position', 'left');
} else {
$sidebar_position = $mode;
}
$astroid_content_class[] = 'sidebar-dir-' . $sidebar_position;
}
if ($header && !empty($header_mode) && $header_mode != 'sidebar') {
$wa->registerAndUseScript('astroid.jquery.easing', 'astroid/jquery.easing.min.js', ['relative' => true, 'version' => 'auto'], [], ['jquery']);
Expand Down Expand Up @@ -72,8 +78,6 @@
<?php
$document->include('containerStart'); // Container Start
$document->include('header.sidebar'); // sidebar
$document->include('offcanvas'); // offcanvas
$document->include('mobilemenu'); // mobile menu
?>
<!-- astroid content -->
<div class="<?php echo implode(' ', $astroid_content_class); ?>">
Expand All @@ -100,7 +104,9 @@
?>
</div>
<!-- end of astroid content -->
<?php $document->include('containerEnd'); // Container End
<?php $document->include('containerEnd'); // Container End
$document->include('offcanvas'); // offcanvas
$document->include('mobilemenu'); // mobile menu
?>
</div>
<!-- end of astroid container -->
Expand Down
78 changes: 63 additions & 15 deletions framework/frontend/header/sidebar.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,11 @@
}

$mode = $params->get('header_sidebar_menu_mode', 'left');
if ($mode == 'topbar') {
$sidebar_position = $params->get('sidebar_position', 'left');
} else {
$sidebar_position = $mode;
}

$block_2_type = $params->get('header_block_2_type', 'blank');
$block_2_position = $params->get('header_block_2_position', '');
Expand All @@ -42,17 +47,55 @@
$header_mobile_menu = $params->get('header_mobile_menu', '');
$offcanvas_animation = $params->get('offcanvas_animation', 'st-effect-1');
$offcanvas_togglevisibility = $params->get('offcanvas_togglevisibility', 'd-block');
$class = ['astroid-header', 'astroid-sidebar-header', 'sidebar-dir-' . $mode, 'h-100', 'has-sidebar'];
$class = ['astroid-header', 'astroid-sidebar-header', 'astroid-sidebar-' . $mode, 'sidebar-dir-' . $sidebar_position, 'has-sidebar'];
$navClass = ['nav', 'astroid-nav', 'd-none', 'd-lg-flex'];
$navWrapperClass = ['align-self-center', 'px-2', 'd-none', 'd-lg-block'];
$position_count = 0;
?>
<!-- header starts -->
<div id="astroid-header" class="<?php echo implode(' ', $class); ?>">
<div class="astroid-sidebar-content h-100">
<?php if ($mode == 'topbar') : ?>
<div class="astroid-sidebar-header">
<div class="astroid-sidebar-header-inner row">
<div class="astroid-sidebar-logo col-12 col-lg">
<?php if (!empty($header_mobile_menu)) { ?>
<div class="justify-content-start astroid-sidebar-mobile-menu">
<div class="header-mobilemenu-trigger burger-menu-button align-self-center" data-offcanvas="#astroid-mobilemenu" data-effect="mobilemenu-slide">
<button aria-label="Mobile Menu Toggle" class="button" type="button"><span class="box"><span class="inner"><span class="visually-hidden">Mobile Menu Toggle</span></span></span></button>
</div>
</div>
<?php } ?>
<div class="flex-grow-1">
<?php $document->include('logo'); ?>
</div>
</div>
<?php
$position_count ++;
if (${'block_'.$position_count.'_type'} != 'blank') : ?>
<div class="astroid-sidebar-block d-none d-lg-block col-lg-auto astroid-sidebar-block-<?php echo $position_count; ?>">
<?php
if (${'block_'.$position_count.'_type'} == 'position') {
echo '<div class="header-block-item">';
echo $document->position(${'block_'.$position_count.'_position'}, 'xhtml');
echo '</div>';
}
if (${'block_'.$position_count.'_type'} == 'custom') {
echo '<div class="header-block-item">';
echo ${'block_'.$position_count.'_custom'};
echo '</div>';
}
?>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<div class="astroid-sidebar-content">
<div class="astroid-sidebar-collapsable">
<i class="fa"></i>
</div>
<div class="astroid-sidebar-logo">
<?php if ($mode != 'topbar') : ?>
<div class="astroid-sidebar-logo mb-xl-4">
<?php if (!empty($header_mobile_menu)) { ?>
<div class="justify-content-start astroid-sidebar-mobile-menu">
<div class="header-mobilemenu-trigger burger-menu-button align-self-center" data-offcanvas="#astroid-mobilemenu" data-effect="mobilemenu-slide">
Expand All @@ -64,17 +107,20 @@
<?php $document->include('logo'); ?>
</div>
</div>
<?php if ($block_1_type != 'blank') : ?>
<div class="astroid-sidebar-block astroid-sidebar-block-1">
<?php endif; ?>
<?php
$position_count ++;
if (${'block_'.$position_count.'_type'} != 'blank') : ?>
<div class="astroid-sidebar-block astroid-sidebar-block-<?php echo $position_count; ?>">
<?php
if ($block_1_type == 'position') {
if (${'block_'.$position_count.'_type'} == 'position') {
echo '<div class="header-block-item">';
echo $document->position($block_1_position, 'xhtml');
echo $document->position(${'block_'.$position_count.'_position'}, 'xhtml');
echo '</div>';
}
if ($block_1_type == 'custom') {
if (${'block_'.$position_count.'_type'} == 'custom') {
echo '<div class="header-block-item">';
echo $block_1_custom;
echo ${'block_'.$position_count.'_custom'};
echo '</div>';
}
?>
Expand All @@ -89,17 +135,19 @@
}
?>
</div>
<?php if ($block_2_type != 'blank') : ?>
<div class="astroid-sidebar-block astroid-sidebar-block-2">
<?php
$position_count ++;
if (${'block_'.$position_count.'_type'} != 'blank') : ?>
<div class="astroid-sidebar-block astroid-sidebar-block-<?php echo $position_count; ?>">
<?php
if ($block_2_type == 'position') {
if (${'block_'.$position_count.'_type'} == 'position') {
echo '<div class="header-block-item">';
echo $document->position($block_2_position, 'xhtml');
echo $document->position(${'block_'.$position_count.'_position'}, 'xhtml');
echo '</div>';
}
if ($block_2_type == 'custom') {
if (${'block_'.$position_count.'_type'} == 'custom') {
echo '<div class="header-block-item">';
echo $block_2_custom;
echo ${'block_'.$position_count.'_custom'};
echo '</div>';
}
?>
Expand Down
8 changes: 7 additions & 1 deletion framework/frontend/mobilemenu.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,13 @@
$header = $params->get('header', TRUE);
$header_mode = $params->get('header_mode', 'horizontal');
$mode = $params->get('header_sidebar_menu_mode', 'left');
$dir = $header ? ($header_mode == 'sidebar' ? $mode : $dir) : $dir;
if ($header_mode == 'sidebar') {
if ($mode == 'topbar') {
$dir = $params->get('sidebar_position', 'left');
} else {
$dir = $mode;
}
}

$wa->registerAndUseScript('astroid.offcanvas', 'astroid/offcanvas.min.js', ['relative' => true, 'version' => 'auto'], [], ['jquery']);
$wa->registerAndUseScript('astroid.mobilemenu', 'astroid/mobilemenu.min.js', ['relative' => true, 'version' => 'auto'], [], ['jquery']);
Expand Down
4 changes: 2 additions & 2 deletions framework/library/astroid/Component/Utility.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -440,8 +440,8 @@ public static function colors(): void
$header->link()->hover()->addCss('color', $header_link_hover_color['dark']);
$header->render();

Style::addCssBySelector('.astroid-header-section, .astroid-sidebar-header', 'background-color', $header_bg['light']);
Style::addCssBySelector('[data-bs-theme=dark] .astroid-header-section, [data-bs-theme=dark] .astroid-sidebar-header', 'background-color', $header_bg['dark']);
Style::addCssBySelector('.astroid-header-section, .astroid-sidebar-header, .astroid-sidebar-header > *', 'background-color', $header_bg['light']);
Style::addCssBySelector('[data-bs-theme=dark] .astroid-header-section, [data-bs-theme=dark] .astroid-sidebar-header, [data-bs-theme=dark] .astroid-sidebar-header > *', 'background-color', $header_bg['dark']);

// Sticky Header
$stick_header_bg_color = Style::getColor($params->get('stick_header_bg_color', ''));
Expand Down
Loading

0 comments on commit fb0d0e5

Please sign in to comment.