ISTWCMS-2286: Adding grid layout for menus, content and sidebar

components/_patterns/00-base/_global.scss

@@ -9,7 +9,7 @@ html.uw_html {
 body {
   font-family: georgia, "droid serif", "Times New Roman", Times, serif;
   font-size: 1rem;
-  color: #4e4e4e;
+  color: #000;
   background-color: white;
 }
 

components/_patterns/02-molecules/menus/main-menu/_00-main-menu.scss

+.nav-main {
+  max-width: 93%;
+  background-color: #fff;
+}
+
 ul.main-menu {
   padding: 0;
   margin: 0;
+  list-style-type: none;
+
+  li {
+    padding: 0;
+    margin: 0;
+    list-style-image: none;
+    list-style-type: none;
+    position: relative;
+
+    a {
+      border-right: solid 5px #eee;
+      border-bottom: solid 1px #eee;
+      display: block;
+      text-decoration: none;
+      padding: .5rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-family: "BureauGrot Book",impact,"avenir next condensed heavy","Droid Sans",sans-serif;
+      font-size: .79012rem;
+      color: $uw-black;
+    }
+
+    a:active {
+      background-color: #eee;
+      border-color: #4e4e4e;
+      color: #000;
+    }
+
+    a:hover {
+      background-color: #DFDFDF;
+      border-color: #000;
+    }
+  }
+}
+
+ul.main-menu li::after {
+  content: "";
+  display: block;
+  position: absolute;
+  right: .8rem;
+  top: .9rem;
 }

components/_patterns/02-molecules/menus/main-menu/main-menu.yml

 items:
-  - title: "Menu Item 1"
-    url: "#"
-    below:
-      - title: "Menu Item 1 Sub 1"
-        url: "#"
-      - title: "Menu Item 1 Sub 2"
-        url: "#"
-        below:
-          - title: "Menu Item 1 Sub Sub 1"
-            url: "#"
-          - title: "Menu Item 1 Sub Sub 2"
-            url: "#"
-      - title: "Menu Item 1 Sub 3"
-        url: "#"
-      - title: "Menu Item 1 Sub 4"
-        url: "#"
-  - title: "Menu Item 2"
-    url: "#"
-    below:
-      - title: "Menu Item 2 Sub 1"
-        url: "#"
-      - title: "Menu Item 2 Sub 2"
-        url: "#"
-      - title: "Menu Item 2 Sub 3"
-        url: "#"
-  - title: "Menu Item 3"
-    url: "#"
-    below:
-      - title: "Menu Item 3 Sub 1"
-        url: "#"
-      - title: "Menu Item 3 Sub 2"
-        url: "#"
-      - title: "Menu Item 3 Sub 3"
-        url: "#"
-      - title: "Menu Item 3 Sub 4"
-        url: "#"
+  menu_tree:
+    - title: "Menu Item 1"
+      url: "#"
+      below:
+        - title: "Menu Item 1 Sub 1"
+          url: "#"
+        - title: "Menu Item 1 Sub 2"
+          url: "#"
+          below:
+            - title: "Menu Item 1 Sub Sub 1"
+              url: "#"
+            - title: "Menu Item 1 Sub Sub 2"
+              url: "#"
+        - title: "Menu Item 1 Sub 3"
+          url: "#"
+        - title: "Menu Item 1 Sub 4"
+          url: "#"
+    - title: "Menu Item 2"
+      url: "#"
+      below:
+        - title: "Menu Item 2 Sub 1"
+          url: "#"
+        - title: "Menu Item 2 Sub 2"
+          url: "#"
+        - title: "Menu Item 2 Sub 3"
+          url: "#"
+    - title: "Menu Item 3"
+      url: "#"
+      below:
+        - title: "Menu Item 3 Sub 1"
+          url: "#"
+        - title: "Menu Item 3 Sub 2"
+          url: "#"
+        - title: "Menu Item 3 Sub 3"
+          url: "#"
+        - title: "Menu Item 3 Sub 4"
+          url: "#"
+menu_class: "main-menu"

components/_patterns/05-pages/_page.twig

@@ -62,7 +62,11 @@
 
       {% if main_nav %}
         <div id="main-navigation" class="uw-main-navigation">
-          {{ i }}
+
+          {% include "@molecules/menus/main-menu/main-menu.twig" with {
+          "items": items,
+          "menu_class": menu_class
+          } %}
         </div>
       {% endif %}
 

components/_patterns/05-pages/page.yml

+items:
+  menu_tree:
+    - title: "Menu Item 1"
+      url: "#"
+      below:
+        - title: "Menu Item 1 Sub 1"
+          url: "#"
+        - title: "Menu Item 1 Sub 2"
+          url: "#"
+          below:
+            - title: "Menu Item 1 Sub Sub 1"
+              url: "#"
+            - title: "Menu Item 1 Sub Sub 2"
+              url: "#"
+        - title: "Menu Item 1 Sub 3"
+          url: "#"
+        - title: "Menu Item 1 Sub 4"
+          url: "#"
+    - title: "Menu Item 2"
+      url: "#"
+      below:
+        - title: "Menu Item 2 Sub 1"
+          url: "#"
+        - title: "Menu Item 2 Sub 2"
+          url: "#"
+        - title: "Menu Item 2 Sub 3"
+          url: "#"
+    - title: "Menu Item 3"
+      url: "#"
+      below:
+        - title: "Menu Item 3 Sub 1"
+          url: "#"
+        - title: "Menu Item 3 Sub 2"
+          url: "#"
+        - title: "Menu Item 3 Sub 3"
+          url: "#"
+        - title: "Menu Item 3 Sub 4"
+          url: "#"
+menu_class: "main-menu"

templates/layout/page.html.twig

@@ -46,5 +46,6 @@
 {% set main_nav = simplify_menu('main') %}
 
 {% include "@pages/_page.twig" with {
-  "main_nav": main_nav
+  "items": main_nav,
+  "menu_class": "main-menu"
 }%}