Skip to content

Commit

Permalink
Add new header style - Divided Logo Left
Browse files Browse the repository at this point in the history
  • Loading branch information
@sonvnn
sonvnn committed Apr 27, 2022
1 parent 8a754db commit bc32b53
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 1 deletion.
29 changes: 29 additions & 0 deletions assets/images/header/stacked_style4.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.
90 changes: 89 additions & 1 deletion framework/frontend/header/stacked.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
$header_mobile_menu = $params->get('header_mobile_menu', '');
$header_menu = $params->get('header_menu', '');
$odd_menu_items = $params->get('odd_menu_items', 'left');
$divided_logo_width = $params->get('divided_logo_width', 200);
$class = ['astroid-header', 'astroid-stacked-header', 'astroid-stacked-' . $mode . '-header'];
$enable_offcanvas = $params->get('enable_offcanvas', FALSE);
$offcanvas_animation = $params->get('offcanvas_animation', 'st-effect-1');
Expand All @@ -34,7 +35,12 @@
$navClass = ['nav', 'astroid-nav', 'justify-content-center', 'd-flex', 'align-items-center'];
$navClassLeft = ['nav', 'astroid-nav', 'justify-content-left', 'd-flex', 'align-items-left'];
$navClassDivided = ['nav', 'astroid-nav'];
$navWrapperClass = ['astroid-nav-wraper', 'align-self-center', 'px-2', 'd-none', 'd-lg-block', 'w-100'];
if ($mode == 'divided-logo-left') {
$navWrapperClass = ['astroid-nav-wraper', 'align-self-center', 'd-none', 'd-lg-block', 'w-100'];
} else {
$navWrapperClass = ['astroid-nav-wraper', 'align-self-center', 'px-2', 'd-none', 'd-lg-block', 'w-100'];
}
$document->addStyleDeclaration('@media (min-width: 992px) {.col-divided-logo{width: '.$divided_logo_width.'px;}}');
?>
<header id="astroid-header" class="<?php echo implode(' ', $class); ?>">
<div class="d-flex">
Expand Down Expand Up @@ -272,6 +278,88 @@
echo '</div>';
// header block ends
}
if ($mode == 'divided-logo-left') {
echo '<div class="row g-0 divided-logo-left">';
echo '<div class="col-12 col-divided-logo">';
echo '<div class="w-100 h-100 d-flex justify-content-center">';
?>
<?php if (!empty($header_mobile_menu)) { ?>
<div class="d-flex d-lg-none justify-content-start">
<div class="header-mobilemenu-trigger d-lg-none burger-menu-button align-self-center" data-offcanvas="#astroid-mobilemenu" data-effect="mobilemenu-slide">
<button class="button" aria-label="Mobile Menu Toggle" type="button"><span class="box"><span class="inner"></span></span></button>
</div>
</div>
<?php
}
echo '<div class="d-flex w-100 w-auto@l justify-content-center justify-content-lg-start">';
$document->include('logo');
echo '</div>';

if ($enable_offcanvas) {
?>
<div class="d-lg-none d-flex justify-content-end">
<?php $document->include('offcanvas.trigger', ['offcanvas' => '#astroid-offcanvas', 'visibility' => $offcanvas_togglevisibility, 'effect' => $offcanvas_animation, 'direction' => $offcanvas_direction]); ?>
</div>
<?php
}
echo '</div>';
echo '</div>';

echo '<div class="col d-none d-lg-flex flex-column justify-content-center">';
echo '<div class="divided-menu-block">';
if ($block_1_type != '' || $block_1_type != '') {
echo '<div class="header-block-items py-3">';
echo '<div class="d-flex justify-content-between">';
// header block starts
if ($block_1_type == 'position') {
echo '<div class="d-flex header-block-item justify-content-start align-items-center">';
echo $document->position($block_1_position, 'xhtml');
echo '</div>';
}
if ($block_1_type == 'custom') {
echo '<div class="d-flex header-block-item justify-content-start align-items-center">';
echo $block_1_custom;
echo '</div>';
}
if ($block_2_type == 'position') {
echo '<div class="d-flex header-block-item justify-content-end align-items-center">';
echo $document->position($block_2_position, 'xhtml');
echo '</div>';
}
if ($block_2_type == 'custom') {
echo '<div class="d-flex header-block-item justify-content-end align-items-center">';
echo $block_2_custom;
echo '</div>';
}
// header block ends
echo '</div>';
echo '</div>';
}
// header nav starts -->
echo '<div class="d-flex w-100 h-100">';
?>
<div data-megamenu data-megamenu-class=".has-megamenu" data-megamenu-content-class=".megamenu-container" data-dropdown-arrow="<?php echo $params->get('dropdown_arrow', 0) ? 'true' : 'false'; ?>" data-header-offset="true" data-transition-speed="<?php echo $params->get('dropdown_animation_speed', 300); ?>" data-megamenu-animation="<?php echo $params->get('dropdown_animation_type', 'fade'); ?>" data-easing="<?php echo $params->get('dropdown_animation_ease', 'linear'); ?>" data-astroid-trigger="<?php echo $params->get('dropdown_trigger', 'hover'); ?>" data-megamenu-submenu-class=".nav-submenu" class="astroid-stacked-<?php echo $mode; ?>-menu d-flex justify-content-start flex-lg-grow-1">
<?php
Astroid\Component\Menu::getMenu($header_menu, $navClassLeft, null, 'left', 'stacked', $navWrapperClass);
?>
</div>
<?php
// header nav ends
if ($enable_offcanvas) {
?>
<div class="d-flex justify-content-end ps-4">
<?php $document->include('offcanvas.trigger', ['offcanvas' => '#astroid-offcanvas', 'visibility' => $offcanvas_togglevisibility, 'effect' => $offcanvas_animation, 'direction' => $offcanvas_direction]); ?>
</div>
<?php
}
echo '</div>';

echo '</div>';

echo '</div>';

echo '</div>';
}
?>
</div>
</div>
Expand Down
3 changes: 3 additions & 0 deletions framework/options/header.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,11 @@
<option label="TPL_ASTROID_STACKED_CENTER" value="center">media/astroid/assets/images/header/stacked_style1.svg</option>
<option label="TPL_ASTROID_STACKED_SEPERATED" value="seperated">media/astroid/assets/images/header/stacked_style2.svg</option>
<option label="TPL_ASTROID_STACKED_DIVIDED" value="divided">media/astroid/assets/images/header/stacked_style3.svg</option>
<option label="TPL_ASTROID_STACKED_DIVIDED_LOGO_LEFT" value="divided-logo-left">media/astroid/assets/images/header/stacked_style4.svg</option>
</field>

<field ngShow="header==true AND header_mode=='stacked' AND header_stacked_menu_mode=='divided-logo-left'" astroidgroup="header_element" name="divided_logo_width" type="astroidrange" min="20" max="600" step="1" postfix="px" default="200" label="TPL_ASTROID_HEADER_STACKED_DIVIDED_LOGO_WIDTH_LABEL" description="TPL_ASTROID_HEADER_STACKED_DIVIDED_LOGO_WIDTH_DESC" />

<field ngShow="header==true AND header_mode=='stacked' AND header_stacked_menu_mode=='seperated'" astroidgroup="header_element" description="TPL_ASTROID_STICKY_ODD_NUMBER_POSITION_DESC" name="odd_menu_items" ngModel="odd_menu_items" type="astroidradio" default="left" label="TPL_ASTROID_STICKY_ODD_NUMBER_POSITION_LBL">
<option value="left">JGLOBAL_LEFT</option>
<option value="right">JGLOBAL_RIGHT</option>
Expand Down

0 comments on commit bc32b53

Please sign in to comment.