ISTWCMS-5789: adding the sidebar - NOT COMPLETE getting code in to be reviewed

src/patterns/03-layouts/_index.scss

@@ -8,5 +8,6 @@
 @forward 'layout/layout-base';
 @forward 'node/node';
 @forward 'region/region';
+@forward 'sidebar/sidebar';
 @forward 'site-container/site-container';
 @forward 'site-footer/site-footer';

src/patterns/03-layouts/sidebar/_sidebar.scss

+// @file
+// Styles for the Sidebar layout.
+
+@use '../../01-core' as *;
+
+$l-sidebar-bp: 900px;
+$l-sidebar-width: 300px;
+$l-sidebar-gutter: var(--size-2);
+
+//.l-sidebar {
+//  margin-bottom: var(--size-10);
+//  width: 100%;
+//}
+//
+//.l-sidebar__grid {
+//  @media(min-width: $screen-md) {
+//    display: flex;
+//    flex-wrap: wrap;
+//  }
+//}
+//
+//.l-sidebar__aside {
+//  @media(min-width: $screen-md) {
+//    display: block;
+//    flex-basis: $l-sidebar-width;
+//    flex-grow: 0;
+//    flex-shrink: 0;
+//    margin-left: 0;
+//    margin-right: 0;
+//    width: $l-sidebar-width;
+//
+//    .l-sidebar--right & {
+//      order: 1;
+//    }
+//  }
+//}
+//
+//.l-sidebar__main {
+//  max-width: 100%;
+//  position: relative;
+//
+//  @media(min-width: $screen-md) {
+//    flex-basis: calc(100% - #{$l-sidebar-width});
+//    flex-grow: 1;
+//    flex-shrink: 0;
+//    width: calc(100% - #{$l-sidebar-width});
+//  }
+//}

src/patterns/03-layouts/sidebar/sidebar.twig

+
+{% set additional_header_region_attributes =  [
+  'l-sidebar__full',
+  attributes ? attributes.class
+  ]|join(' ')|trim %}
+
+{% set additional_sidebar_first_region_attributes  =  [
+  'l-sidebar__sidebar',
+  attributes ? attributes.class
+  ]|join(' ')|trim %}
+
+{% set additional_main_region_attributes =  [
+  'l-sidebar__main',
+  attributes ? attributes.class
+  ]|join(' ')|trim %}
+
+{% set additional_sidebar_second_region_attributes  =  [
+  'l-sidebar__sidebar',
+  attributes ? attributes.class
+  ]|join(' ')|trim %}
+
+{% set sidebar_classes =  [
+  'l-sidebar',
+  has_multiple_sidebar ? ' l-sidebar--multi-2',
+  modifier_classes,
+  attributes ? attributes.class
+]|join(' ')|trim%}
+
+<div class="{{ sidebar_classes }}" {{ attributes ? attributes|without('class') }}>
+
+
+  <!-- Dump code -->
+  <pre>
+    {{ dump(sidebar) }}
+ </pre>
+
+
+  {% if header_content %}
+    <div class="{{ additional_sidebar_first_region_attributes }}">
+      {{ header_content }}
+    </div>
+  {% endif %}
+
+  {% if sidebar_first_content %}
+   <aside class="{{ additional_sidebar_first_region_attributes }} ">
+      {{ sidebar_first_content }}
+    </aside>
+  {% endif %}
+
+  {% if main_content %}
+    <div class=" {{ additional_main_region_attributes }} ">
+      {{ main_content }}
+    </div>
+  {% endif %}
+
+  {% if sidebar_second_content %}
+    <aside class="{{ additional_sidebar_second_region_attributes }} ">
+      {{ sidebar_second_content }}
+    </aside>
+  {% endif %}
+</div>
+
+<!-- Ohana Chaz code -->
+<!-- Ohana Chaz code -->
+<!-- Ohana Chaz code -->
+<!-- Ohana Chaz code -->
+
+<div class="l-sidebar {{ modifier }}">
+  {% if header %}
+    <div class="l-sidebar__header">
+      {% block header %}
+        {{ header }}
+      {% endblock %}
+    </div>
+  {% endif %}
+
+ {% if constrain %}
+    <div class="{{ constrain }}">
+  {% endif %}
+
+  <div class="l-sidebar__grid">
+    {% if aside %}
+      <aside class="l-sidebar__aside">
+        {% block aside %}
+          {{ aside }}
+        {% endblock %}
+      </aside>
+    {% endif %}
+
+    <div class="l-sidebar__main">
+      {% block main %}
+        {{ main }}
+      {% endblock %}
+    </div>
+  </div>
+
+  {% if constrain %}
+    </div>
+  {% endif %}
+
+  {% if footer %}
+    <div class="l-sidebar__footer">
+      {% block footer %}
+        {{ footer }}
+      {% endblock %}
+    </div>
+  {% endif %}
+</div>
+<!-- Ohana Chaz code -->
+<!-- Ohana Chaz code -->
+<!-- Ohana Chaz code -->
+<!-- Ohana Chaz code -->

src/patterns/03-layouts/sidebar/sidebar.yml

+---
+modifier: ''
+constrain: ''
+header: |-
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Optional Header</p>
+aside: |-
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Optional Aside</p>
+main: |-
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Main Content</p>
+footer: |-
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Optional Footer</p>

src/patterns/03-layouts/sidebar/sidebar~right.yml

+---
+modifier: 'l-sidebar--right'
+constrain: ''
+header: |-
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Optional Header</p>
+aside: |-
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Optional Aside</p>
+main: |-
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Main Content</p>
+footer: |-
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Optional Footer</p>