Add responsive navigation directions

Author: zoglo

contao/templates/style-manager-core.xml

@@ -943,8 +943,63 @@
         <field title="sorting">200</field>
         <field title="alias">direction</field>
         <field title="title">Direction</field>
-        <field title="description">Defines the behavior / alignment of the navigation.</field>
-        <field title="cssClasses">a:1:{i:0;a:2:{s:3:"key";s:8:"nav-left";s:5:"value";s:4:"Left";}}</field>
+        <field title="description">Defines the behavior / alignment of the navigation for this Breakpoint.</field>
+        <field title="cssClasses">a:2:{i:0;a:2:{s:3:"key";s:8:"nav-left";s:5:"value";s:4:"Left";}i:1;a:2:{s:3:"key";s:9:"nav-right";s:5:"value";s:5:"Right";}}</field>
+        <field title="chosen">1</field>
+        <field title="blankOption">1</field>
+        <field title="extendPage">1</field>
+      </child>
+      <child alias="directionXS">
+        <field title="pid">1030</field>
+        <field title="sorting">200</field>
+        <field title="alias">directionXS</field>
+        <field title="title">Direction &amp;#40;XS&amp;#41;</field>
+        <field title="description">Defines the behavior / alignment of the navigation for this Breakpoint.</field>
+        <field title="cssClasses">a:2:{i:0;a:2:{s:3:"key";s:11:"nav-xs-left";s:5:"value";s:4:"Left";}i:1;a:2:{s:3:"key";s:12:"nav-xs-right";s:5:"value";s:5:"Right";}}</field>
+        <field title="chosen">1</field>
+        <field title="blankOption">1</field>
+        <field title="extendPage">1</field>
+      </child>
+      <child alias="directionS">
+        <field title="pid">1030</field>
+        <field title="sorting">200</field>
+        <field title="alias">directionS</field>
+        <field title="title">Direction &amp;#40;S&amp;#41;</field>
+        <field title="description">Defines the behavior / alignment of the navigation for this Breakpoint.</field>
+        <field title="cssClasses">a:2:{i:0;a:2:{s:3:"key";s:10:"nav-s-left";s:5:"value";s:4:"Left";}i:1;a:2:{s:3:"key";s:11:"nav-s-right";s:5:"value";s:5:"Right";}}</field>
+        <field title="chosen">1</field>
+        <field title="blankOption">1</field>
+        <field title="extendPage">1</field>
+      </child>
+      <child alias="directionM">
+        <field title="pid">1030</field>
+        <field title="sorting">200</field>
+        <field title="alias">directionM</field>
+        <field title="title">Direction &amp;#40;M&amp;#41;</field>
+        <field title="description">Defines the behavior / alignment of the navigation for this Breakpoint.</field>
+        <field title="cssClasses">a:2:{i:0;a:2:{s:3:"key";s:10:"nav-m-left";s:5:"value";s:4:"Left";}i:1;a:2:{s:3:"key";s:11:"nav-m-right";s:5:"value";s:5:"Right";}}</field>
+        <field title="chosen">1</field>
+        <field title="blankOption">1</field>
+        <field title="extendPage">1</field>
+      </child>
+      <child alias="directionL">
+        <field title="pid">1030</field>
+        <field title="sorting">200</field>
+        <field title="alias">directionL</field>
+        <field title="title">Direction &amp;#40;L&amp;#41;</field>
+        <field title="description">Defines the behavior / alignment of the navigation for this Breakpoint.</field>
+        <field title="cssClasses">a:2:{i:0;a:2:{s:3:"key";s:10:"nav-l-left";s:5:"value";s:4:"Left";}i:1;a:2:{s:3:"key";s:11:"nav-l-right";s:5:"value";s:5:"Right";}}</field>
+        <field title="chosen">1</field>
+        <field title="blankOption">1</field>
+        <field title="extendPage">1</field>
+      </child>
+      <child alias="directionXL">
+        <field title="pid">1030</field>
+        <field title="sorting">200</field>
+        <field title="alias">directionXL</field>
+        <field title="title">Direction &amp;#40;XL&amp;#41;</field>
+        <field title="description">Defines the behavior / alignment of the navigation for this Breakpoint.</field>
+        <field title="cssClasses">a:2:{i:0;a:2:{s:3:"key";s:11:"nav-xl-left";s:5:"value";s:4:"Left";}i:1;a:2:{s:3:"key";s:12:"nav-xl-right";s:5:"value";s:5:"Right";}}</field>
         <field title="chosen">1</field>
         <field title="blankOption">1</field>
         <field title="extendPage">1</field>

public/framework/scss/ctm_components/_navigation.scss

@@ -78,19 +78,19 @@
 
           ul ul {
             top: 0;
-            left: 100%;
           }
         }
 
-        li.nav-left {
+        li {
 
           ul {
-            right: 100%;
-            left: initial;
+            right:var(--nlr,initial);
+            left:var(--nll,100%);
           }
 
           .level_2 {
-            right: 0;
+            right: var(--nlr2,initial);
+            left: var(--nll2,initial);
           }
         }
 

public/framework/scss/ctm_layout/_alignmentSpacings.scss

@@ -62,5 +62,10 @@
     '&-1': ( --e-m: #{$element-spacing-small}),
     '&-2': ( --e-m: #{$element-spacing-medium}),
     '&-3': ( --e-m: #{$element-spacing-large}),
+  ),
+  // Navigation direction
+  'li.nav': (
+    '&-right': (--nlr: 'initial', --nlr2: 'initial', --nll: 100%, --nll2: 'initial'),
+    '&-left':  (--nlr: 100%, --nlr2: 0, --nll: 'initial', --nll2: 'initial'),
   )
 ));