feat: FloatedNav new settings for position and lang switch.

src/QUI/Menu/Controls/FloatedNav.css

@@ -25,12 +25,23 @@
 .quiqqer-floatedNav {
     background: #fff;
     position: fixed;
-    right: 0;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
 }
 
+.quiqqer-floatedNav__posX-right {
+    right: 0;
+}
+
+.quiqqer-floatedNav__posX-left {
+    left: 0;
+}
+
+.quiqqer-floatedNav-entry {
+    transition: 0.2s all ease;
+}
+
 .quiqqer-floatedNav-entry-inner {
     background: var(--qui-color-main, #333);
     border: var(--qui-border-width, 2px) solid var(--qui-color-main, #333);
@@ -41,18 +52,20 @@
     line-height: var(--quiqqer-floatedNav-size);
     text-align: center;
     width: var(--quiqqer-floatedNav-size);
+    overflow: hidden;
 }
 
 /* lang switch */
 .quiqqer-floatedNav .quiqqer-bricks-languageswitch-flag {
     font-size: calc(0.75 * var(--quiqqer-floatedNav-fontSize));
     width: var(--quiqqer-floatedNav-size);
-    background: var(--qui-color-main, #333);
     display: flex;
     flex-direction: column;
+    overflow: hidden;
 }
 
 .quiqqer-floatedNav .quiqqer-bricks-languageswitch-flag-entry {
+    background: var(--qui-color-main, #333);
     line-height: calc(0.5 * var(--quiqqer-floatedNav-size));
     padding: 0;
     text-align: center;
@@ -61,12 +74,26 @@
     text-transform: uppercase;
 }
 
+.quiqqer-floatedNav .quiqqer-bricks-languageswitch-flag-entry:not(.active) {
+    background-color: var(--qui-color-dark, #333);
+}
+
+.quiqqer-floatedNav .quiqqer-bricks-languageswitch-flag-entry:not(:first-child) {
+    border-top: 2px solid #fff;
+}
+
 .quiqqer-floatedNav .quiqqer-bricks-languageswitch-flag-entry-text {
     line-height: inherit;
     display: block;
 }
 
 
+/* hover */
+.quiqqer-floatedNav-entry:hover,
+.quiqqer-bricks-languageswitch-flag-entry:hover {
+    filter: brightness(90%);
+}
+
 /***********/
 /* Designs */
 /***********/
@@ -90,5 +117,5 @@
 
 /* Design: flat */
 .quiqqer-floatedNav__flat .quiqqer-floatedNav-entry:not(:last-child) {
-    margin-bottom: 4px;
+    margin-bottom: 2px;
 }

src/QUI/Menu/Controls/FloatedNav.html

-<nav class="quiqqer-floatedNav {$design} {$size}">
+<nav class="quiqqer-floatedNav {$design} {$size} {$posX}">
     {foreach $children as $Child}
         {assign var=hasUrl value=1}
         {if !$Child->getUrl()}

src/QUI/Menu/Controls/FloatedNav.php

@@ -25,9 +25,11 @@ public function __construct($attributes = [])
     {
         // default options
         $this->setAttributes([
-            'menuId' => false,
-            'size'   => 'medium', // small, medium, large
-            'design' => 'iconBar', // iconBar, flat
+            'menuId'         => false,
+            'posX'           => 'right', // right, left
+            'size'           => 'medium', // small, medium, large
+            'design'         => 'iconBar', // iconBar, flat
+            'showLangSwitch' => false
         ]);
 
         parent::__construct($attributes);
@@ -44,40 +46,64 @@ public function __construct($attributes = [])
      */
     public function getBody()
     {
-        $Engine = QUI::getTemplateManager()->getEngine();
-        $size   = 'quiqqer-floatedNav__size-medium';
-        $design = 'quiqqer-floatedNav__iconsBar';
-        $showLangSwitch = false;
-
+        $Engine          = QUI::getTemplateManager()->getEngine();
         $IndependentMenu = Independent\Handler::getMenu($this->getAttribute('menuId'));
+        $LangSwitch      = null;
 
         if (!$IndependentMenu) {
             return '';
         }
 
-        if ($this->getAttribute('size')) {
-            $size = 'quiqqer-floatedNav__size-'.$this->getAttribute('size');
+        switch ($this->getAttribute('design')) {
+            case 'small':
+            case 'medium':
+            case 'large':
+                $size = 'quiqqer-floatedNav__size-'.$this->getAttribute('size');
+                break;
+
+            default:
+                $size = 'quiqqer-floatedNav__size-medium';
         }
 
-        if ($this->getAttribute('design')) {
-            $design = 'quiqqer-floatedNav__'.$this->getAttribute('design');
+        switch ($this->getAttribute('design')) {
+            case 'iconBar':
+            case 'flat':
+                $design = 'quiqqer-floatedNav__'.$this->getAttribute('design');
+                break;
+
+            default:
+                $design = 'quiqqer-floatedNav__iconsBar';
         }
 
+        switch ($this->getAttribute('posX')) {
+            case 'left':
+            case 'right':
+                $posX = 'quiqqer-floatedNav__posX-'.$this->getAttribute('posX');
+                break;
 
-        $showLangSwitch = true;
+            default:
+                $posX = 'quiqqer-floatedNav__posX-right';
+                break;
+        }
 
-        $LangSwitch = new QUI\Bricks\Controls\LanguageSwitches\Flags([
-            'showFlags' => 0
-        ]);
+        if ($this->getAttribute('showLangSwitch')) {
+            try {
+                $LangSwitch = new QUI\Bricks\Controls\LanguageSwitches\Flags([
+                    'showFlags' => 0
+                ]);
+            } catch (QUI\Exception $Exception) {
+                QUI\System\Log::writeException($Exception);
+            }
+        }
 
         $children = $IndependentMenu->getChildren();
 
         $Engine->assign([
-            'this'     => $this,
-            'children' => $children,
-            'size'     => $size,
-            'design'   => $design,
-            'showLangSwitch' => $showLangSwitch,
+            'this'       => $this,
+            'children'   => $children,
+            'size'       => $size,
+            'posX'       => $posX,
+            'design'     => $design,
             'LangSwitch' => $LangSwitch
         ]);