From 0e939bc4f43c3d47fa664593fadfccf6a821d0b2 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Fri, 30 Sep 2022 13:12:23 -0400
Subject: [PATCH] ISTWCMS-5789: adding the sidebar - NOT COMPLETE getting code
in to be reviewed
---
src/patterns/03-layouts/_index.scss | 1 +
src/patterns/03-layouts/sidebar/_sidebar.scss | 48 ++++++++
src/patterns/03-layouts/sidebar/sidebar.twig | 112 ++++++++++++++++++
src/patterns/03-layouts/sidebar/sidebar.yml | 11 ++
.../03-layouts/sidebar/sidebar~right.yml | 11 ++
5 files changed, 183 insertions(+)
create mode 100644 src/patterns/03-layouts/sidebar/_sidebar.scss
create mode 100644 src/patterns/03-layouts/sidebar/sidebar.twig
create mode 100644 src/patterns/03-layouts/sidebar/sidebar.yml
create mode 100644 src/patterns/03-layouts/sidebar/sidebar~right.yml
diff --git a/src/patterns/03-layouts/_index.scss b/src/patterns/03-layouts/_index.scss
index 70e40923..f851399c 100644
--- a/src/patterns/03-layouts/_index.scss
+++ b/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';
diff --git a/src/patterns/03-layouts/sidebar/_sidebar.scss b/src/patterns/03-layouts/sidebar/_sidebar.scss
new file mode 100644
index 00000000..cca1ea42
--- /dev/null
+++ b/src/patterns/03-layouts/sidebar/_sidebar.scss
@@ -0,0 +1,48 @@
+// @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});
+// }
+//}
diff --git a/src/patterns/03-layouts/sidebar/sidebar.twig b/src/patterns/03-layouts/sidebar/sidebar.twig
new file mode 100644
index 00000000..ef67b0aa
--- /dev/null
+++ b/src/patterns/03-layouts/sidebar/sidebar.twig
@@ -0,0 +1,112 @@
+
+{% 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 -->
diff --git a/src/patterns/03-layouts/sidebar/sidebar.yml b/src/patterns/03-layouts/sidebar/sidebar.yml
new file mode 100644
index 00000000..bbfd0516
--- /dev/null
+++ b/src/patterns/03-layouts/sidebar/sidebar.yml
@@ -0,0 +1,11 @@
+---
+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>
diff --git a/src/patterns/03-layouts/sidebar/sidebar~right.yml b/src/patterns/03-layouts/sidebar/sidebar~right.yml
new file mode 100644
index 00000000..6c1d5d37
--- /dev/null
+++ b/src/patterns/03-layouts/sidebar/sidebar~right.yml
@@ -0,0 +1,11 @@
+---
+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>
--
GitLab