feat: support multiple sidebars (#82)

* feat: register sidebar for aside

* feat: basic primary sidebar styles

* refactor: adjust widget registration and styles

- register and add widget areas to context in same file
- rename widgets/widget areas
- remove widget area titles
- adjust css for sidebar widget area

Author: rise-erpelding

src/php/functions.php

@@ -74,7 +74,6 @@
  */
 function add_to_context( $context ) {
 	$context['menu'] = new \Timber\Menu( 'primary' );
-	$context['footer_sidebar'] = Timber\Timber::get_widgets( 'footer-area' );
 	return $context;
 }
 add_filter( 'timber/context', 'add_to_context' );

src/php/inc/theme-widgets.php

@@ -6,19 +6,40 @@
  */
 
 /**
- * Register widget area.
+ * Register widgetized areas.
  */
 function sparkpress_theme_widgets_init() {
+	register_sidebar(
+		array(
+			'name'          => 'Primary Sidebar',
+			'id'            => 'primary-sidebar',
+			'description'   => 'Widget for the sidebar area.',
+			'before_widget' => '<div>',
+			'after_widget'  => '</div>',
+		)
+	);
+
 	register_sidebar(
 		array(
 			'name'          => 'Footer',
 			'id'            => 'footer-area',
-			'description'   => 'Sidebar for a the footer area.',
+			'description'   => 'Widget for the footer area.',
 			'before_widget' => '<div>',
 			'after_widget'  => '</div>',
-			'before_title'  => '<h3>',
-			'after_title'   => '</h3>',
 		)
 	);
 }
 add_action( 'widgets_init', 'sparkpress_theme_widgets_init' );
+
+/**
+ * Adds sidebar and footer widgets to the Timber context.
+ *
+ * @param array $context The Timber context array.
+ * @return array The updated Timber context array with sidebar and footer widgets.
+ */
+function sparkpress_add_widgets_to_context( $context ) {
+	$context['sidebar_widget'] = Timber\Timber::get_widgets( 'primary-sidebar' );
+	$context['footer_widget'] = Timber\Timber::get_widgets( 'footer-area' );
+	return $context;
+}
+add_filter( 'timber/context', 'sparkpress_add_widgets_to_context' );

src/php/views/base.twig

@@ -8,18 +8,19 @@
 		</div>
 	{% endif %}
 
-	{# content block from child templates #}
-	{% block content %}
-		<div class="obj-width-limiter">
-			Sorry, no content
-		</div>
-	{% endblock %}
-
-	{% if sidebar %}
-		<aside>
-			{{ sidebar }}
-		</aside>
-	{% endif %}
+	<div class="obj-width-limiter cmp-post-body">
+		{# content block from child templates #}
+		{% block content %}
+			<div class="obj-width-limiter">
+				Sorry, no content
+			</div>
+		{% endblock %}
+		{% if sidebar_widget %}
+			<aside class="obj-width-limiter cmp-primary-sidebar">
+				{{ sidebar_widget }}
+			</aside>
+		{% endif %}
+	</div>
 </article>
 
 {% include 'footer.twig' %}

src/php/views/footer.twig

@@ -12,7 +12,7 @@
 				Privacy Policy
 			</a>
 		</p>
-		{{ footer_sidebar }}
+		{{ footer_widget }}
 	</div>
 </footer>
 

src/scss/base.scss

@@ -63,6 +63,8 @@
 //    Specific UI components. This is where majority of our work takes place
 //    and our UI components are often composed of Objects and Components
 @import 'components/main-nav';
+@import 'components/primary-sidebar';
+@import 'components/post-body';
 @import 'components/skip-to-content';
 @import 'components/sticky-footer';
 

src/scss/components/_post-body.scss

@@ -0,0 +1,9 @@
+.cmp-post-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem 3.75rem;
+  
+  @media (min-width: 50rem) {
+    flex-direction: row;
+  }
+}

src/scss/components/_primary-sidebar.scss

@@ -0,0 +1,8 @@
+.cmp-primary-sidebar {
+  background-color: var(--gray-background-color);
+  padding: 1rem;
+  
+  @media (min-width: 50rem) {
+    flex-basis: 18.75rem;
+  }
+}

src/scss/elements/_root.scss

@@ -8,6 +8,9 @@
 	--black: hsl(0deg 0% 0%);
 	--white: hsl(0deg 0% 100%);
 
+	// Gray
+	--gray: hsl(0deg 0% 97%);
+
 	// Link colors
 	--link-color: var(--primary-color);
 	--link-color-hover: var(--secondary-color);
@@ -16,6 +19,7 @@
 	// Foreground/background colors
 	--text-color: var(--black);
 	--background-color: var(--white);
+	--gray-background-color: var(--gray);
 
 	color: var(--text-color);
 	background-color: var(--background-color);