diff --git a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.html b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.html
index f5ae4dc2c6..558f1ff228 100644
--- a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.html
+++ b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.html
@@ -1,4 +1,15 @@
+
-
-
+
+
+
+
diff --git a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.scss b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.scss
index f7f2cceec0..fc02f66813 100644
--- a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.scss
+++ b/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;
}
}
}
diff --git a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.ts b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.ts
index 0c13a48f00..aaba903d37 100644
--- a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.ts
+++ b/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) {}
diff --git a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.module.ts b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.module.ts
index 2873a042aa..f97dce4886 100644
--- a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.module.ts
+++ b/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 { }
diff --git a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html
index 75ed58c258..4c1a6244fc 100644
--- a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html
+++ b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html
@@ -1,5 +1,3 @@
\ No newline at end of file
diff --git a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.scss b/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.scss
index effab5a514..d1c217f724 100644
--- a/apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.scss
+++ b/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 {