Merge pull request #150 from GSA/mmeyer/30-side-nav-styles

add styling for side nav and adjust page template to allow for better…

sass/_components/side_nav.scss

@@ -0,0 +1,37 @@
+.usa-sidenav {
+    .usa-sidenav__item {
+        background-color: color($theme-color-base-lightest);
+        &:hover {
+            background-color: color($theme-color-base);
+            color: color($theme-color-base-lightest);
+        }
+    }
+    a:not(.usa-button):hover {
+        background-color: color($theme-color-base);
+    }
+    a:not(.usa-button):not(.usa-current):hover {
+        color: color($theme-color-base-lightest);
+    }
+    .usa-sidenav__item.current {
+        background-color: color($theme-color-base);
+        &:hover {
+            color: color($theme-color-base-lightest)
+        }
+    }
+
+    .usa-current {
+        color: color($theme-color-base-lightest);
+        font-weight: normal;
+    }
+}
+.sp_site_nav {
+    h4 {
+        margin-top:0;
+        padding-top: 1em;
+        border-top: 2px solid color($theme-color-base-light);
+        padding-left: .5em;
+        color: color($theme-color-base);
+    }
+}
+
+

sass/_site.scss

@@ -4,70 +4,6 @@
   flex-shrink: 0;
 }
 
-.wp-post h1{
-  font-size: 2.5rem;
-  font-weight:700;
-}
-.wp-post h2{
-  font-size: 1.8rem;
-  font-weight:700;
-}
-
-.wp-header__logo {
-  height: 100%;
-  margin-left: 0;
-}
-
-.wp-header__logo-image {
-  @include u-height('full');
-
-  @include at-media(desktop) {
-    @include u-height(7);
-  }
-}
-
-.wp-header__logo-text {
-  display: none;
-
-  @include at-media(desktop) {
-    display: inline;
-    position: relative;
-    bottom: 8px;
-    padding-left: 1rem;
-    @include u-font('sans', 'lg');
-  }
-}
-
-.wp-header__nav {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  @include at-media(desktop) {
-    flex-direction: row;
-  }
-}
-
-.wp-header__nav-title {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.wp-header__nav-title-text {
-  @include u-font('sans', 'lg');
-  @include u-line-height('sans', 1);
-  @include u-text('bold');
-  @include u-text('no-underline');
-  @include u-text('base-darkest');
-}
-
-.wp-header__nav-links {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
 .usa-nav__primary > .usa-nav__primary-item > a {
   @include u-text('base-darkest');
 }
@@ -76,18 +12,6 @@
   @include u-text('primary');
 }
 
-.wp-header__secondary {
-  bottom: 4.8rem;
-}
-
-.wp-breadcrumb {
-  @include u-bg('base-lightest');
-
-  .usa-breadcrumb {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-}
 
 // Darken the hero image
 .usa-hero {
@@ -118,36 +42,6 @@
   flex-direction: row;
 }
 
-.wp-social-icon {
-  @include u-circle(5);
-  @include u-bg('primary');
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  margin-right: 1em;
-
-  img {
-    filter: invert(1);
-  }
-}
-
-.wp-insights-heading {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  @include at-media(tablet) {
-    flex-direction: row;
-  }
-}
-
-.wp-insights-heading__header {
-  @include at-media(tablet) {
-    margin: 0;
-    align-self: flex-start;
-  }
-}
 
 blockquote {
   @include u-bg('base-lightest');

sass/_uswds-theme-custom-styles.scss

@@ -21,6 +21,7 @@ i.e.
 */
 
 @use "uswds-core" as *;
+@import '_components/side_nav.scss';
 
 html, body {
    height: 100%;

sass/_uswds-theme.scss

@@ -25,7 +25,8 @@ in the form $setting: value,
     $theme-color-base-darkest: 'blue-warm-80',
     $theme-color-base-ink: 'blue-warm-90',
 
-
     $theme-summary-box-background-color: "base-lightest",
-    $theme-summary-box-border-color: "base-light"
+    $theme-summary-box-border-color: "base-light",
+
+    $theme-sidenav-current-border-width: 0
   );

src/components/SideNav.astro

@@ -1,16 +1,18 @@
 ---
-const { id, pages, headings, parent_path} = Astro.props;
+const { id, pages, headings, parent_path, title} = Astro.props;
 pages.sort((a, b) => parseInt(a.data.order) - parseInt(b.data.order))
 
 ---
-  <nav aria-label="Secondary navigation">
+<div class="usa-layout-docs__sidenav desktop:grid-col-4">
+  <nav class="sp_site_nav" aria-label="Secondary navigation">
+    <h4>{ title }</h4>
     <ul class="usa-sidenav">
       {pages.map(page => (
-        <li class="usa-sidenav__item">
+        <li class:list={["usa-sidenav__item", {current: id === page.id }]}>
           <a 
             class={id === page.id ? 'usa-current' : null } 
             href={`${import.meta.env.BASE_URL}${parent_path}/${page.slug}`}
-          >{page.data.title} {page.id}
+          >{page.data.title}
           </a>
           <ul class="usa-sidenav__sublist">
             {id === page.id && headings
@@ -19,6 +21,7 @@ pages.sort((a, b) => parseInt(a.data.order) - parseInt(b.data.order))
                 <li class="usa-sidenav__item">
                   <a 
                     href={`#${h.slug}`}
+                    onclick={`document.querySelector('#${h.slug}').scrollIntoView({behavior: "smooth"}); event.preventDefault();`}
                   >
                     {h.text}
                   </a>
@@ -28,4 +31,4 @@ pages.sort((a, b) => parseInt(a.data.order) - parseInt(b.data.order))
         </li>))}
     </ul>
   </nav>
-
+</div>

src/layouts/PageLayout.astro

@@ -3,6 +3,7 @@ import BaseLayout from "./BaseLayout.astro";
 const { title } = Astro.props;
 ---
 <BaseLayout title={title}>
+
   <section class="grid-container usa-section">
     <div class="grid-row grid-gap">
       <slot />

src/pages/about/[...slug].astro

@@ -20,14 +20,15 @@ const { Content, headings } = await entry.render();
 ---
 <PageLayout title={entry.data.title}>
   <SideNav 
+    title="About the GSA SmartPay Program"
     parent_path="about"
     pages={entries}
     headings={headings}
     id={entry.id}
   />
-  <div class="usa-prose">
+  <div class="usa-layout-docs__main desktop:grid-col-8 usa-prose usa-layout-docs">
     <h1>{ entry.data.title }</h1>
-  <Content />
+    <Content />
 </div>
 </PageLayout>