Tabbed content

web/themes/custom/dchadwick/css/style.css

@@ -38,10 +38,11 @@ h4 {
 }
 
 #block-dchadwick-primary-local-tasks {
-  width: 100%;
+  width: auto;
   position: fixed;
   bottom: 0;
-  left: 0;
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 9999;
 }
 #block-dchadwick-primary-local-tasks > ul {

web/themes/custom/dchadwick/css/tabbed-content.css

@@ -0,0 +1,12 @@
+.tabbed-content {
+  display: flex;
+}
+
+.tabbed-content .tab-labels {
+  flex: 0 1 25%;
+}
+
+.tabbed-content .tab-content {
+  flex: 0 1 75%;
+}
+

web/themes/custom/dchadwick/dchadwick.layouts.yml

@@ -11,3 +11,16 @@ two_row:
   icon_map:
     - [top]
     - [bottom]
+
+tabbed_content:
+  label: 'Tabbed Content'
+  category: 'DC Layouts'
+  template: templates/layouts/tabbed-content
+  library: dchadwick/tabbed-content
+  regions:
+    label_side:
+      label: Label Side
+    content_side:
+      label: Content Side
+  icon_map:
+    - [first, second]

web/themes/custom/dchadwick/dchadwick.libraries.yml

@@ -34,3 +34,12 @@ articles:
     - core/drupal
     - core/once
 
+tabbed-content:
+  css:
+    theme:
+      css/tabbed-content.css: {}
+  js:
+    js/tabbedContent.js: { }
+  dependencies:
+    - core/drupal
+    - core/once

web/themes/custom/dchadwick/js/tabbedContent.js

@@ -0,0 +1,7 @@
+((Drupal, once) => {
+  Drupal.behaviors.tabbedContent = {
+    attach(context) {
+      // console.log("hello");
+    },
+  };
+})(Drupal, once);

web/themes/custom/dchadwick/src/sass/partials/local-tasks.scss

@@ -1,8 +1,9 @@
 #block-dchadwick-primary-local-tasks {
-  width: 100%;
+  width: auto;
   position: fixed;
   bottom: 0;
-  left: 0;
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 9999;
 
   > ul {

web/themes/custom/dchadwick/templates/layouts/tabbed-content.html.twig

@@ -0,0 +1,15 @@
+{{ attach_library('dchadwick/tabbed-content') }}
+{% if content %}
+  <div {{ attributes.addClass('tabbed-content') }}>
+  {% if content.label_side %}
+    <div {{ region_attributes.label_side.addClass('tab-labels') }}>
+      {{ content.label_side }}
+    </div>
+  {% endif %}
+  {% if content.content_side %}
+    <div {{ region_attributes.content_side.addClass('tab-content') }}>
+      {{ content.content_side }}
+    </div>
+  {% endif %}
+  </div>
+{% endif %}