Merge pull request #57 from agilecollective/feature/sidebar

Sidebar layout

Author: tillywoodfield

src/scss/components/jump-menu/_jump-menu.scss

@@ -3,7 +3,6 @@
 @use "../../tokens/screens" as *;
 
 .iati-jump-menu {
-  max-width: 30rem;
   &__header {
     background-color: $color-green-30;
     padding: 0.5rem 1rem;

src/scss/components/section/section.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
+import { Default as Table } from "../../components/table/table.stories";
 
 import { html } from "lit";
 
@@ -43,7 +44,7 @@ export const Default: Story = {
 };
 
 export const Fill: Story = {
-  render: () => html`
+  render: (args) => html`
     <div class="iati-section iati-section--fill">
       <h2 class="iati-section__title">About</h2>
       <div class="iati-section__content">
@@ -65,6 +66,7 @@ export const Fill: Story = {
           in each of the last twelve calendar months. The current month is shown
           for informational purposes, but excluded from the assessment.
         </p>
+        ${Table.render?.call({ ...args })}
       </div>
     </div>
   `,

src/scss/components/table/_table.scss

@@ -20,6 +20,9 @@
     background-color: #{$color-green-30}cc;
     color: $color-grey-90;
   }
+  td {
+    background-color: #fff;
+  }
   td,
   th {
     border-right: 1px solid $color-teal-60;

src/scss/layout/page/_page.scss

@@ -1,8 +1,65 @@
 @use "../../base/mixins";
+@use "../../tokens/screens" as *;
 
 .iati-main {
   @include mixins.page-width-container();
   background-color: white;
   flex: 1;
   padding-block: 1rem;
 }
+
+.iati-main__before-content {
+  margin-block-end: 1rem;
+  @media (min-width: $screen-md) {
+    margin-block-end: 2rem;
+  }
+  & > * + * {
+    margin-block-start: 1rem;
+  }
+}
+
+.iati-main__content {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+  @media (min-width: $screen-md) {
+    flex-direction: row;
+    gap: 2rem;
+  }
+}
+
+.iati-main__article {
+  min-width: 0;
+  & > * + * {
+    margin-top: 1rem;
+    @media (min-width: $screen-md) {
+      margin-top: 2rem;
+    }
+  }
+  > :first-child {
+    margin-top: 0;
+  }
+}
+
+.iati-main__side {
+  min-inline-size: 15rem;
+  flex-grow: 0;
+}
+
+.iati-main__side--sticky > * {
+  position: sticky;
+  top: 1rem;
+}
+
+.iati-main__after-content {
+  margin-block-start: 1rem;
+  @media (min-width: $screen-md) {
+    margin-block-start: 2rem;
+  }
+  & > * + * {
+    margin-block-start: 1rem;
+    @media (min-width: $screen-md) {
+      margin-top: 2rem;
+    }
+  }
+}

src/scss/layout/page/page.stories.ts

@@ -2,9 +2,15 @@ import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
 
 import { Breadcrumb } from "../../components/breadcrumb/breadcrumb.stories";
+import { Links as Figures } from "../../components/figures/figures.stories";
 import { Footer } from "../../components/footer/footer.stories";
 import { Header } from "../../components/header/header.stories";
+import { Default as JumpMenu } from "../../components/jump-menu/jump-menu.stories";
 import { Notice as MessageNotice } from "../../components/message/message.stories";
+import {
+  Default as Section,
+  Fill as Summary,
+} from "../../components/section/section.stories";
 
 const meta: Meta = {
   title: "Layout/Page",
@@ -19,7 +25,7 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj;
 
-export const Page: Story = {
+export const BasicLayout: Story = {
   render: (args) => html`
     ${Header.render?.call({ ...args })}
     <main class="iati-main">
@@ -31,3 +37,35 @@ export const Page: Story = {
     ${Footer.render?.call({ ...args })}
   `,
 };
+
+export const SidebarLayout: Story = {
+  render: (args) => html`
+    ${Header.render?.call({ ...args })}
+    <main class="iati-main">
+      <div class="iati-main__before-content">
+        ${Breadcrumb.render?.call({ ...args })}
+        ${MessageNotice.render?.call({ ...args })}
+      </div>
+      <div class="iati-main__content">
+        <article class="iati-main__article">
+          <h1>Timeliness</h1>
+          <p>
+            This page provides statistics on the timeliness of IATI data
+            publication by organisations. Timeliness is an important measure of
+            IATI data quality and usefulness.
+          </p>
+          ${Summary.render?.call({ ...args })}
+          ${Figures.render?.call({ ...args })}
+          ${Section.render?.call({ ...args })}
+        </article>
+        <aside class="iati-main__side iati-main__side--sticky">
+          ${JumpMenu.render?.call({ ...args })}
+        </aside>
+      </div>
+      <div class="iati-main__after-content">
+        ${Section.render?.call({ ...args })}
+      </div>
+    </main>
+    ${Footer.render?.call({ ...args })}
+  `,
+};

src/scss/tokens/_screens.scss

@@ -1,7 +1,7 @@
 $screen-sm: 640px;
 $screen-md: 768px;
 $screen-lg: 1024px;
-$screen-xl: 1280px;
+$screen-xl: 1134px;
 $screen-2xl: 1536px;
 
 $mobile_nav_breakpoint: $screen-md;