diff --git a/bricks.xml b/bricks.xml
index 96a9cb2c3ee415c7f4cac128499669d38d3d7e40..54afccc98f0c419984dd15cffb50c032a0d03b33 100644
--- a/bricks.xml
+++ b/bricks.xml
@@ -33,6 +33,15 @@
var="menu.control.sidebarDropDownMenu.setting.startId"/>
</setting>
+ <setting name="menuId" data-qui="package/quiqqer/menu/bin/Controls/Independent/Input" type="text">
+ <locale group="quiqqer/menu"
+ var="menu.control.sidebarDropDownMenu.setting.menuId"/>
+ <description>
+ <locale group="quiqqer/menu"
+ var="menu.control.sidebarDropDownMenu.setting.menuId.desc"/>
+ </description>
+ </setting>
+
<setting name="parentLink" type="checkbox">
<locale group="quiqqer/menu"
var="menu.control.sidebarDropDownMenu.setting.parentLink"/>
diff --git a/locale.xml b/locale.xml
index 7dbf2e858d3efdd2d5890fbf45d232305f662334..6ed933a395e0f6bbcdbfe7bde3a3da624a702267 100644
--- a/locale.xml
+++ b/locale.xml
@@ -79,10 +79,18 @@
<pl><![CDATA[Zaawansowany]]></pl>
</locale>
<locale name="menu.control.sidebarDropDownMenu.setting.startId">
- <de><![CDATA[Start-ID]]></de>
+ <de><![CDATA[Start-ID uu]]></de>
<en><![CDATA[Start ID]]></en>
<pl><![CDATA[Pierwsza strona]]></pl>
</locale>
+ <locale name="menu.control.sidebarDropDownMenu.setting.menuId">
+ <de><![CDATA[Menu auswählen]]></de>
+ <en><![CDATA[Select the menu]]></en>
+ </locale>
+ <locale name="menu.control.sidebarDropDownMenu.setting.menuId.desc">
+ <de><![CDATA[Diese Option ermöglicht, eigenes Menü auszuwählen. <strong>Wichtig!</strong> Diese Option hat Vorrang. Wird ein eigenes Menü ausgewählt, hat die Option "Start-ID" keine Auswirkung mehr.]]></de>
+ <en><![CDATA[This option allows you to choose your own menu. <strong>Important!</strong> This option takes precedence. If a custom menu is selected, the "Start ID" option has no effect anymore.]]></en>
+ </locale>
<locale name="menu.control.sidebarDropDownMenu.setting.parentLink">
<de><![CDATA[Eltern-Seite Link anzeigen]]></de>
<en><![CDATA[Show the parent site link]]></en>
diff --git a/src/QUI/Menu/SidebarDropDownMenu.Independent.Simple.css b/src/QUI/Menu/SidebarDropDownMenu.Independent.Simple.css
new file mode 100644
index 0000000000000000000000000000000000000000..c35a4c8c923c728ae10457088b1d85463727a302
--- /dev/null
+++ b/src/QUI/Menu/SidebarDropDownMenu.Independent.Simple.css
@@ -0,0 +1,90 @@
+.quiqqer-sidebar-dropdown-navigation ul,
+.quiqqer-sidebar-dropdown-navigation ul li {
+ list-style: none;
+ padding-left: 0;
+}
+
+.quiqqer-navigation-entry {
+ align-items: flex-start;
+ display: flex !important;
+ flex-direction: row;
+ justify-content: space-between;
+ width: 100%;
+ padding: 6px 0;
+ transition: all 0.2s;
+}
+
+.quiqqer-navigation-entry-image {
+ align-items: center;
+ align-self: stretch;
+ display: flex;
+ padding-right: 10px;
+ width: 30px;
+}
+
+.quiqqer-navigation-link {
+ display: flex;
+ padding: 4px 0;
+ flex-grow: 2;
+ /*width: 100%;*/
+}
+
+.quiqqer-sub-nav-div {
+ overflow: hidden;
+ height: 0;
+}
+
+.quiqqer-fa-levels-icon {
+ cursor: pointer;
+}
+
+.quiqqer-fa-list-icon,
+.quiqqer-fa-levels-icon,
+.quiqqer-fa-list-icon::before,
+.quiqqer-fa-levels-icon::before {
+ margin: auto;
+}
+
+.quiqqer-fa-list-icon {
+ margin-left: 6px;
+ margin-right: 6px;
+}
+
+/* site icon */
+.quiqqer-sidebar-dropdown-navigation .quiqqer-icon {
+ line-height: 1.5em;
+ margin: 0 6px 0 0;
+ padding: 4px 0;
+}
+
+.quiqqer-sidebar-dropdown-navigation .fa-nav-levels-rotate {
+ transform: rotate(90deg);
+}
+
+.quiqqer-sidebar-dropdown-navigation .quiqqer-fa-list-icon {
+ padding: 4px 0;
+ line-height: 1.5em;
+ margin: 0 6px 0 0;
+ transition: all 0.2s ease;
+}
+
+/* nav toggle */
+.quiqqer-navigation-close {
+ display: none;
+}
+
+ul.quiqqer-navigation-level-2 .quiqqer-navigation-entry {
+ margin-left: 20px;
+ width: calc(100% - 20px);
+}
+
+ul.quiqqer-navigation-level-3 .quiqqer-navigation-entry {
+ margin-left: 40px;
+ width: calc(100% - 40px);
+}
+
+ul.quiqqer-navigation-level-4 .quiqqer-navigation-entry {
+ margin-left: 60px;
+ width: calc(100% - 60px);
+}
+
diff --git a/src/QUI/Menu/SidebarDropDownMenu.Independent.Simple.html b/src/QUI/Menu/SidebarDropDownMenu.Independent.Simple.html
new file mode 100644
index 0000000000000000000000000000000000000000..beeb0de23d474c2755e1db5d7ee40567fca678a0
--- /dev/null
+++ b/src/QUI/Menu/SidebarDropDownMenu.Independent.Simple.html
@@ -0,0 +1,122 @@
+{if !isset($level)}
+ {assign var=level value=1}
+{else}
+ {assign var=level value=$level+1}
+{/if}
+
+{if $level == 1}
+ {if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
+ <header class="control-header">
+ <h1>{$this->getAttribute('frontendTitle')}</h1>
+ </header>
+ {/if}
+
+ {if $this->getAttribute('content') != ""}
+ <div class="control-content">
+ {$this->getAttribute('content')}
+ </div>
+ {/if}
+{/if}
+
+{strip}
+
+ {if count( $children )}
+ <ul class="quiqqer-navigation-level-{$level}">
+ {*if $parentLink}
+ {if $level == 1}
+ <li class="quiqqer-navigation-li">
+ <div class="quiqqer-navigation-entry">
+ {if $parentIcon}
+ <i class="fa quiqqer-fa-list-icon fa-fw {$parentIcon}"></i>
+ {/if}
+ <a href="{url site=$FirstPage}" class="quiqqer-navigation-firstpage quiqqer-navigation-link">
+ {$FirstPage->getAttribute('title')}
+ </a>
+ </div>
+ </li>
+ {/if}
+ {/if*}
+ {foreach from=$children item=Child}
+ {assign var=siteObj value=0}
+ {if $Child|get_class === 'QUI\Menu\Independent\Items\Site'}
+ {assign var=siteObj value=1}
+ {/if}
+ <li class="quiqqer-navigation-li">
+ {assign var=subnavigation value=$Child->getChildren()}
+ <div class="quiqqer-navigation-entry">
+ {if count ( $subnavigation ) && ($level < $levels || $levels == 0)}
+ {if $levelIcon}
+ <span class="fa quiqqer-fa-list-icon fa-fw {$levelIcon} quiqqer-fa-levels-icon"></span>
+ {/if}
+ {else}
+ {if $listIcon}
+ <i class="fa quiqqer-fa-list-icon fa-fw {$listIcon}"></i>
+ {/if}
+ {/if}
+
+ {if $Child->getUrl()}
+ <a href="{$Child->getUrl()}" class="quiqqer-navigation-link
+ {if !count($subnavigation)} quiqqer-navigation-link-no-icon{/if}"
+ title="{$Child->getTitleAttribute()|escape:'html'}"
+ {if $Child->getTarget()}target="{$Child->getTarget()}"{/if}>
+ {$Child->getTitle()}
+ </a>
+ {else}
+ <span class="quiqqer-navigation-link {if !count($subnavigation)} quiqqer-navigation-link-no-icon{/if}"
+ title="{$Child->getTitleAttribute()|escape:'html'}">
+ {$Child->getTitle()}
+ </span>
+ {/if}
+ </div>
+
+ {if $levels === false || $levels-1 >= $level}
+ <div class="quiqqer-sub-nav-div">
+ {include file=$navTemplate
+ children=$Child->getChildren()
+ level=$level
+ levels=$levels
+ }
+ </div>
+ {/if}
+ </li>
+ {/foreach}
+ </ul>
+ {/if}
+{/strip}
+
+{if $level == 1}
+<script>
+ let QuiIndependentMenu = document.getElement('.quiqqer-sidebar-dropdown-navigation');
+ let quiIndependentUrls = QuiIndependentMenu.getElements('.quiqqer-navigation-link');
+ const setPath = function (Elm) {
+ const Parent = Elm.getParent('.quiqqer-sub-nav-div');
+
+ if (!Parent) {
+ return false;
+ }
+
+ Parent.style.height = 'initial';
+
+ const ParentLi = Parent.getParent('.quiqqer-navigation-li');
+
+ if (ParentLi) {
+ ParentLi.classList.add('open');
+ const Icon = ParentLi.querySelector('.quiqqer-fa-list-icon');
+
+ if (Icon) {
+ Icon.classList.add('fa-nav-levels-rotate');
+ }
+ }
+
+ setPath(Parent);
+ }
+
+ quiIndependentUrls.forEach((Item) => {
+ if (window.location.href.includes(Item.href)) {
+ const LiElm = Item.closest('.quiqqer-navigation-li');
+ LiElm.classList.add('quiqqer-navigation-active');
+ setPath(LiElm);
+ }
+ });
+</script>
+{/if}
\ No newline at end of file
diff --git a/src/QUI/Menu/SidebarDropDownMenu.Simple.css b/src/QUI/Menu/SidebarDropDownMenu.Simple.css
index a1a1f7f7f1d059742661482b32a91de4a52bdedb..1e1eaca307b0295b9921ea948579e39f04cfd74f 100644
--- a/src/QUI/Menu/SidebarDropDownMenu.Simple.css
+++ b/src/QUI/Menu/SidebarDropDownMenu.Simple.css
@@ -28,6 +28,11 @@
flex-grow: 2;
/*width: 100%;*/
}
+
+.quiqqer-sub-nav-div {
+ overflow: hidden;
+}
+
.quiqqer-fa-levels-icon {
cursor: pointer;
}
@@ -51,16 +56,15 @@
padding: 4px 0;
}
-.fa-nav-levels-rotate {
+.quiqqer-sidebar-dropdown-navigation .fa-nav-levels-rotate {
transform: rotate(90deg);
- transition: all 0.2s;
- transition-timing-function: ease-in-out;
}
-i.quiqqer-fa-list-icon {
+.quiqqer-sidebar-dropdown-navigation .quiqqer-fa-list-icon {
padding: 4px 0;
line-height: 1.5em;
margin: 0 6px 0 0;
+ transition: all 0.2s ease;
}
/* nav toggle */
diff --git a/src/QUI/Menu/SidebarDropDownMenu.php b/src/QUI/Menu/SidebarDropDownMenu.php
index 6b6fa9b537bc856f7b26e1ea816ad466dbd10b3c..7f245be48c0842758cdf5c5488d3f594b5f69c91 100644
--- a/src/QUI/Menu/SidebarDropDownMenu.php
+++ b/src/QUI/Menu/SidebarDropDownMenu.php
@@ -21,11 +21,12 @@ class SidebarDropDownMenu extends QUI\Control
/**
* @param array $attributes
*/
- public function __construct($attributes = array())
+ public function __construct($attributes = [])
{
// defaults values
- $this->setAttributes(array(
+ $this->setAttributes([
'startId' => 1, // id or site link
+ 'menuId' => false,
'parentLink' => false,
'levels' => 0,
'onlyFirstLevelIcons' => false,
@@ -36,7 +37,7 @@ public function __construct($attributes = array())
'qui-class' => 'package/quiqqer/menu/bin/SidebarDropDownMenu',
'display' => 'simple',
'showAllChildren' => false
- ));
+ ]);
parent::__construct($attributes);
@@ -92,35 +93,73 @@ public function getBody()
$levels = false;
}
- switch ($this->getAttribute('display')) {
- default:
- case 'simple':
- $css = dirname(__FILE__).'/SidebarDropDownMenu.Simple.css';
- $template = dirname(__FILE__).'/SidebarDropDownMenu.Simple.html';
- break;
-
- case 'advanced':
- $css = dirname(__FILE__).'/SidebarDropDownMenu.Advanced.css';
- $template = dirname(__FILE__).'/SidebarDropDownMenu.Advanced.html';
- break;
+ if ($this->getAttribute('menuId')) {
+ $IndependentMenu = Independent\Handler::getMenu($this->getAttribute('menuId'));
+
+ $children = $IndependentMenu->getChildren();
+
+ switch ($this->getAttribute('display')) {
+ default:
+ case 'simple':
+ $css = dirname(__FILE__).'/SidebarDropDownMenu.Independent.Simple.css';
+ $template = dirname(__FILE__).'/SidebarDropDownMenu.Independent.Simple.html';
+ break;
+
+ case 'advanced':
+ $css = dirname(__FILE__).'/SidebarDropDownMenu.Independent.Advanced.css';
+ $template = dirname(__FILE__).'/SidebarDropDownMenu.Independent.Advanced.html';
+ break;
+ }
+
+ $Engine->assign([
+ 'this' => $this,
+ 'children' => $children,
+ 'Project' => $this->getProject(),
+ 'Site' => $Site,
+ 'FirstPage' => $FirstPage,
+ 'listType' => $this->getAttribute('listType'),
+ 'parentLink' => $this->getAttribute('parentLink'),
+ 'activeId' => $activeId,
+ 'navTemplate' => $template,
+ 'levels' => $levels,
+ 'Rewrite' => QUI::getRewrite(),
+ 'parentIcon' => $this->getAttribute('parentIcon'),
+ 'listIcon' => $this->getAttribute('listIcon'),
+ 'levelIcon' => $this->getAttribute('levelIcon'),
+ 'onlyFirstLevelIcons' => $this->getAttribute('onlyFirstLevelIcons')
+ ]);
+ } else {
+ switch ($this->getAttribute('display')) {
+ default:
+ case 'simple':
+ $css = dirname(__FILE__).'/SidebarDropDownMenu.Simple.css';
+ $template = dirname(__FILE__).'/SidebarDropDownMenu.Simple.html';
+ break;
+
+ case 'advanced':
+ $css = dirname(__FILE__).'/SidebarDropDownMenu.Advanced.css';
+ $template = dirname(__FILE__).'/SidebarDropDownMenu.Advanced.html';
+ break;
+ }
+
+ $Engine->assign([
+ 'this' => $this,
+ 'Project' => $this->getProject(),
+ 'Site' => $Site,
+ 'FirstPage' => $FirstPage,
+ 'listType' => $this->getAttribute('listType'),
+ 'parentLink' => $this->getAttribute('parentLink'),
+ 'activeId' => $activeId,
+ 'navTemplate' => $template,
+ 'levels' => $levels,
+ 'Rewrite' => QUI::getRewrite(),
+ 'parentIcon' => $this->getAttribute('parentIcon'),
+ 'listIcon' => $this->getAttribute('listIcon'),
+ 'levelIcon' => $this->getAttribute('levelIcon'),
+ 'onlyFirstLevelIcons' => $this->getAttribute('onlyFirstLevelIcons')
+ ]);
}
- $Engine->assign(array(
- 'this' => $this,
- 'Project' => $this->getProject(),
- 'Site' => $Site,
- 'FirstPage' => $FirstPage,
- 'listType' => $this->getAttribute('listType'),
- 'parentLink' => $this->getAttribute('parentLink'),
- 'activeId' => $activeId,
- 'navTemplate' => $template,
- 'levels' => $levels,
- 'Rewrite' => QUI::getRewrite(),
- 'parentIcon' => $this->getAttribute('parentIcon'),
- 'listIcon' => $this->getAttribute('listIcon'),
- 'levelIcon' => $this->getAttribute('levelIcon'),
- 'onlyFirstLevelIcons' => $this->getAttribute('onlyFirstLevelIcons')
- ));
$this->addCSSFile($css);