refactor(core): ♻️ wrap ToC inside citizen-body-sidebar

resources/skins.citizen.styles/components/ContentSidebar.less

@@ -0,0 +1,5 @@
+.citizen-body-sidebar {
+	@media ( min-width: @min-width-breakpoint-desktop ) {
+		grid-area: sidebar;
+	}
+}

resources/skins.citizen.styles/components/TableOfContents.less

@@ -206,27 +206,16 @@
 
 @media ( min-width: @min-width-breakpoint-desktop ) {
 	.citizen-toc {
-		grid-area: toc;
+		--toc-margin-top: var( --space-xs );
+		position: -webkit-sticky;
+		position: sticky;
+		top: var( --toc-margin-top );
+		max-height: ~'calc( 100vh - var( --toc-margin-top ) - var( --space-md ) )';
+		overflow-y: auto;
+		overscroll-behavior: contain;
 
-		&__card {
-			--toc-margin-top: var( --space-xs );
-			position: -webkit-sticky;
-			position: sticky;
-			top: var( --toc-margin-top );
-			max-height: ~'calc( 100vh - var( --toc-margin-top ) - var( --space-md ) )';
-			overflow-y: auto;
-			overscroll-behavior: contain;
-		}
-	}
-
-	// Hide button in desktop viewport
-	#citizen-toc__buttonCheckbox {
-		display: none;
-	}
-
-	// Sticky header styles
-	.citizen-body-header--sticky {
-		.citizen-toc__card {
+		// Sticky header styles
+		.citizen-body-header--sticky & {
 			--toc-margin-top: ~'calc( var( --header-size ) + var(  --space-xxl  ) )';
 
 			// Sticky header is shorter without buttons
@@ -235,4 +224,9 @@
 			}
 		}
 	}
+
+	// Hide button in desktop viewport
+	#citizen-toc__buttonCheckbox {
+		display: none;
+	}
 }

resources/skins.citizen.styles/layout.less

@@ -62,7 +62,7 @@
 			display: grid;
 			grid-template-areas:
  'header header'
-				'content toc'
+				'content sidebar'
 				'footer footer';
 			grid-template-columns: minmax( 0, var( --width-layout ) ) var( --width-toc );
 		}

resources/skins.citizen.styles/skin.less

@@ -33,6 +33,7 @@
 	@import 'components/Pagetools.less';
 	@import 'components/Menu.less';
 	@import 'components/ContentHeader.less';
+	@import 'components/ContentSidebar.less';
 	@import 'components/ContentFooter.less';
 	@import 'components/Footer.less';
 	@import 'components/TableOfContents.less';

templates/ContentSidebar.mustache

@@ -0,0 +1,6 @@
+{{!
+	
+}}
+<div class="citizen-body-sidebar">
+	{{>TableOfContents}}
+</div>

templates/skin.mustache

@@ -22,7 +22,7 @@
 			{{{html-user-message}}}
 			{{{html-body-content--formatted}}}
 		</div>
-		{{#toc-enabled}}{{>TableOfContents}}{{/toc-enabled}}
+		{{#toc-enabled}}{{>ContentSidebar}}{{/toc-enabled}}
 		{{>ContentFooter}}
 		</div>
 	</main>