feat(daffio): clean up doc viewer UI (#2722)

apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.html

@@ -1,4 +1,15 @@
+<!-- <button class="daffio-doc-viewer__packages-button">
+	<fa-icon [icon]="faBars"></fa-icon>
+	<div>Packages Menu</div>
+</button> -->
 <div class="daffio-doc-viewer__grid">
-	<daff-article class="daffio-doc-viewer__content" [innerHtml]="sanitizedContent"></daff-article>
-	<daffio-docs-table-of-contents *ngIf="doc.tableOfContents" class="daffio-doc-viewer__table-of-contents" [tableOfContents]="doc.tableOfContents.json"></daffio-docs-table-of-contents>
+	<daff-article
+		class="daffio-doc-viewer__content"
+		[innerHtml]="sanitizedContent">
+	</daff-article>
+	<daffio-docs-table-of-contents
+		*ngIf="doc.tableOfContents"
+		class="daffio-doc-viewer__table-of-contents"
+		[tableOfContents]="doc.tableOfContents.json">
+	</daffio-docs-table-of-contents>
 </div>

apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.scss

@@ -2,35 +2,58 @@
 
 :host {
 	display: block;
+	max-width: 1340px;
+	margin: 0 auto;
 }
 
 .daffio-doc-viewer {
 	&__grid {
-		display: grid;
-		grid-template-columns: 1fr;
-		grid-template-areas:
-			'content';
-		padding: 48px;
-
-		@include daff.breakpoint(big-tablet) {
-			grid-template-columns: minmax(0px, 960px) 240px;
-			grid-template-areas:
-				'content table-of-contents';
+		padding: 24px;
+
+		@include daff.breakpoint(small-laptop) {
+			display: flex;
+			justify-content: space-between;
+			gap: 64px;
 			padding: 48px;
-			grid-gap: 48px;
+		}
+
+		@include daff.breakpoint(desktop) {
+			padding: 48px 0;
 		}
 	}
 
 	&__content {
-		grid-area: content;
+		flex-grow: 1;
 	}
 
 	&__table-of-contents {
 		display: none;
 
-		@include daff.breakpoint(big-tablet) {
+		@include daff.breakpoint(small-laptop) {
 			display: block;
-			grid-area: table-of-contents;
+			max-width: 240px;
+			width: 100%;
+		}
+	}
+
+	&__packages-button {
+		@include daff.clickable();
+		display: flex;
+		gap: 8px;
+		align-items: center;
+		justify-content: center;
+		background: white;
+		border: 0;
+		border-top: 1px solid rgb(var(--daff-theme-contrast-rgb), 0.1);
+		border-bottom: 1px solid rgb(var(--daff-theme-contrast-rgb), 0.1);
+		overflow: auto;
+		padding: 16px 24px;
+		position: sticky;
+		top: var(--daff-sidebar-side-fixed-top-shift);
+		width: 100%;
+
+		@include daff.breakpoint(big-tablet) {
+			display: none;
 		}
 	}
 }

apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.ts

@@ -8,6 +8,7 @@ import {
   DomSanitizer,
   SafeHtml,
 } from '@angular/platform-browser';
+import { faBars } from '@fortawesome/free-solid-svg-icons';
 
 import { DaffioDoc } from '../../models/doc';
 
@@ -18,6 +19,7 @@ import { DaffioDoc } from '../../models/doc';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DaffioDocViewerComponent implements OnChanges {
+  faBars = faBars;
 
   constructor(private sanitizer: DomSanitizer) {}
 

apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.module.ts

@@ -1,7 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import { DaffArticleModule } from '@daffodil/design/article';
+import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffContainerModule } from '@daffodil/design/container';
+import { DaffSidebarModule } from '@daffodil/design/sidebar';
 
 import { DaffioDocViewerComponent } from './doc-viewer.component';
 import { DaffioDocsTableOfContentsModule } from '../table-of-contents/table-of-contents.module';
@@ -16,7 +20,11 @@ import { DaffioDocsTableOfContentsModule } from '../table-of-contents/table-of-c
   imports: [
     CommonModule,
     DaffArticleModule,
+    DaffContainerModule,
     DaffioDocsTableOfContentsModule,
+    DaffSidebarModule,
+    DaffButtonModule,
+    FontAwesomeModule,
   ],
 })
 export class DaffioDocViewerModule { }

apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html

@@ -1,5 +1,3 @@
 <aside class="daffio-docs-table-of-contents">
-	<div *ngFor="let entry of tableOfContents" class="daffio-docs-table-of-contents__item">
-		<a class="daffio-docs-table-of-contents__item--level-{{entry.lvl}}" routerLink="./" [fragment]="entry.slug">{{ entry.content }}</a>
-	</div>
+	<a *ngFor="let entry of tableOfContents"class="daffio-docs-table-of-contents__item daffio-docs-table-of-contents__item--level-{{entry.lvl}}" routerLink="./" [fragment]="entry.slug">{{ entry.content }}</a>
 </aside>

apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.scss

@@ -5,22 +5,23 @@
 }
 
 .daffio-docs-table-of-contents {
-	position: sticky;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
 	max-height: 100vh;
 	overflow: auto;
-	top: var(--daff-sidebar-side-fixed-top-shift);
+	position: sticky;
+	top: calc(var(--daff-sidebar-side-fixed-top-shift) + 48px);
 
 	&__item {
 		display: block;
+		font-size: 1rem;
+		line-height: 1.25rem;
+		text-decoration: none;
 
 		&:first-of-type {
 			@include daff.embolden();
-			padding: 0 0 8px;
-			margin: 0 0 16px;
-		}
-
-		a {
-			text-decoration: none;
+			margin: 0 0 24px;
 		}
 
 		&--level-1 {