From 23a0f4afdc7dfafbe8a52c76e0a73ea069012671 Mon Sep 17 00:00:00 2001
From: konnorrogers <konnor5456@gmail.com>
Date: Mon, 16 Oct 2023 12:26:46 -0400
Subject: [PATCH] working on sportawesome

---
 docs/_includes/layout-templates/app.html.njk  |   2 +-
 docs/pages/layouts/sport-awesome.njk          | 153 ++++++++++++++++++
 docs/pages/layouts/web-awesome.njk            |   9 --
 src/components/layout/layout.component.ts     |   2 +-
 .../nav-group/nav-group.component.ts          |   2 +-
 src/components/nav-group/nav-group.styles.ts  |   2 +
 src/components/nav-item/nav-item.component.ts |   6 +-
 src/components/nav-item/nav-item.styles.ts    |  17 +-
 8 files changed, 173 insertions(+), 20 deletions(-)
 create mode 100644 docs/pages/layouts/sport-awesome.njk
 delete mode 100644 docs/pages/layouts/web-awesome.njk

diff --git a/docs/_includes/layout-templates/app.html.njk b/docs/_includes/layout-templates/app.html.njk
index 778edb281..f05d6d2b2 100644
--- a/docs/_includes/layout-templates/app.html.njk
+++ b/docs/_includes/layout-templates/app.html.njk
@@ -1,6 +1,6 @@
 <wa-layout main-id="main-content" class="wa-theme-light">
   <header slot="header">
-    <wa-icon-button name="list" style="font-size: 1.5rem" data-toggle-navigation></wa-icon>
+    <wa-icon-button name="list" style="font-size: 1.5rem" data-toggle-nav></wa-icon>
   </header>
   <wa-button href="#" variant="text" style="padding: 0 0.4rem" class="wa-button--logo wa-button--stretch wa-button--muted" size="large" slot="navigation-header">
     <wa-icon name="music-note" slot="prefix" style="font-size: 2rem;"></wa-icon>
diff --git a/docs/pages/layouts/sport-awesome.njk b/docs/pages/layouts/sport-awesome.njk
new file mode 100644
index 000000000..e8990fa4b
--- /dev/null
+++ b/docs/pages/layouts/sport-awesome.njk
@@ -0,0 +1,153 @@
+---
+layout: layout-example.njk
+---
+
+<style>
+  {% include "layout-templates/reset.css.njk" %}
+
+  img {
+    display: inline-block;
+    max-width: 100%;
+    height: auto;
+  }
+
+  .navigation--desktop::part(nav-items) {
+    gap: 2rem;
+  }
+
+  .navigation--top::part(nav-items) {
+    flex-direction: row;
+  }
+
+  .navigation--top wa-nav-item {
+    font-size: 1.4rem;
+    font-weight: bold;
+  }
+
+  .navigation--top wa-nav-item::part(content) {
+    text-align: center;
+    justify-content: center;
+    color: var(--wa-color-brand-text-on-vivid);
+  }
+
+  .header {
+    display: flex;
+    border-bottom: 1px solid var(--wa-color-blue-20);
+  }
+
+  .header > * {
+    padding: 1rem;
+  }
+
+  .header__navigation {
+    display: flex;
+    clip-path: polygon(2rem 0,100% 0,100% 100%,0 100%);
+    padding-inline-start: 2.5rem;
+    background-color: var(--wa-color-blue-20);
+    width: 100%;
+  }
+
+  a.logo {
+    flex-shrink: 0;
+    font-size: 1.4rem;
+    font-weight: bold;
+    color: black;
+    text-decoration: none;
+    margin: auto;
+  }
+
+  a.logo:is(:hover, :focus) {
+    text-decoration: underline;
+  }
+
+  .logo__accent {
+    color: var(--wa-color-yellow-70);
+  }
+
+  .navigation--desktop {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .navigation--desktop wa-nav-item[current="page"] {
+    text-decoration: underline;
+    text-underline-offset: 8px;
+    text-decoration-thickness: 4px;
+    text-decoration-color: var(--wa-color-red-50);
+  }
+
+  .navigation--extra {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-inline-start: auto;
+  }
+
+  wa-layout[view="desktop"] [data-toggle-nav],
+  wa-layout[view="desktop"]::part(navigation) {
+    display: none;
+  }
+
+  wa-layout[view="mobile"] .navigation--desktop {
+    display: none;
+  }
+
+</style>
+
+<wa-layout main-id="main-content" class="wa-theme-light" mobile-breakpoint="925">
+  <header class="header" slot="header">
+    <a href="#" class="logo">
+      Sport <span class="logo__accent">Awesome</span>
+    </a>
+
+    <div class="header__navigation">
+      <wa-nav-group class="navigation navigation--top navigation--desktop">
+        <wa-nav-item href="#" current="page">Home</wa-nav-item>
+        <wa-nav-item href="#">Schedule</wa-nav-item>
+        <wa-nav-item href="#">Roster</wa-nav-item>
+        <wa-nav-item href="#">Stats</wa-nav-item>
+        <wa-nav-item href="#">Videos</wa-nav-item>
+
+      </wa-nav-group>
+
+      <wa-nav-group class="navigation navigation--top navigation--extra">
+        <wa-nav-item href="#"><wa-icon name="instagram"></wa-icon></wa-nav-item>
+        <wa-nav-item href="#"><wa-icon name="facebook"></wa-icon></wa-nav-item>
+        <wa-nav-item data-toggle-nav href="#"><wa-icon name="list"></wa-icon></wa-nav-item>
+      </wa-nav-group>
+    </div>
+  </header>
+
+  <wa-nav-group slot="navigation">
+    <wa-nav-item href="#" current="page">Home</wa-nav-item>
+    <wa-nav-item href="#">Schedule</wa-nav-item>
+    <wa-nav-item href="#">Roster</wa-nav-item>
+    <wa-nav-item href="#">Stats</wa-nav-item>
+    <wa-nav-item href="#">Videos</wa-nav-item>
+  </wa-nav-group>
+
+  <main id="main-content">
+    <div style="display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); padding-top: 1rem; gap: 16px; padding: 1rem;">
+      <img src="https://via.placeholder.com/512x512" height="512" width="300" style="aspect-ratio: 16/9; width: 100%;">
+      <aside style="display: flex; flex-direction: column;">
+        <header style="font-size: 1.4rem; font-weight: bold; color: var(--wa-color-brand-text-on-vivid); background-color: var(--wa-color-blue-20); padding: 1rem; text-align: center;">
+          Upcoming
+        </header>
+
+        <div style="color: var(--wa-color-brand-text-on-vivid); background-color: var(--wa-color-red-40); padding: 0.5rem; text-align: center; font-weight: bold;">
+          Tryouts!
+        </div>
+
+        <div style="background-color: var(--wa-color-neutral-90); padding: 1rem;">
+          <span style="font-weight: bold; font-size: 1.2rem;">Barclay's Center</span>
+
+          <br><br>
+
+          <time>Sat, Jul 3rd • 11:30am</time>
+        </div>
+      </aside>
+    </div>
+  </main>
+</wa-layout>
diff --git a/docs/pages/layouts/web-awesome.njk b/docs/pages/layouts/web-awesome.njk
deleted file mode 100644
index d6fadcb01..000000000
--- a/docs/pages/layouts/web-awesome.njk
+++ /dev/null
@@ -1,9 +0,0 @@
----
-layout: layout-example.njk
----
-
-<style>
-  {% include "layout-templates/web-awesome.css.njk" %}
-</style>
-
-{% include "layout-templates/web-awesome.html.njk" %}
diff --git a/src/components/layout/layout.component.ts b/src/components/layout/layout.component.ts
index e3a8741ff..80db05c71 100644
--- a/src/components/layout/layout.component.ts
+++ b/src/components/layout/layout.component.ts
@@ -139,7 +139,7 @@ export default class WaLayout extends WebAwesomeElement {
 
 
   handleNavigationToggle = (e: Event) => {
-    if (e.composedPath().find((el: Element) => el?.hasAttribute?.("data-toggle-navigation"))) {
+    if (e.composedPath().find((el: Element) => el?.hasAttribute?.("data-toggle-nav"))) {
       e.preventDefault()
       this.toggleNavigation()
     }
diff --git a/src/components/nav-group/nav-group.component.ts b/src/components/nav-group/nav-group.component.ts
index 723c41aa8..1cbd17990 100644
--- a/src/components/nav-group/nav-group.component.ts
+++ b/src/components/nav-group/nav-group.component.ts
@@ -36,7 +36,7 @@ export default class WaNavGroup extends WebAwesomeElement {
 
   render() {
     return html`
-      <div part="base" class="base">
+      <div part="base" class="base" role="navigation" aria-labelledby="label">
         <p id="label" part="label" class="label">
           <slot name="label">${this.label}</slot>
         </p>
diff --git a/src/components/nav-group/nav-group.styles.ts b/src/components/nav-group/nav-group.styles.ts
index 5805a1427..bdae210d5 100644
--- a/src/components/nav-group/nav-group.styles.ts
+++ b/src/components/nav-group/nav-group.styles.ts
@@ -12,6 +12,7 @@ export default css`
   .base {
     color: var(--wa-color-text-normal);
     height: 100%;
+    width: 100%;
   }
 
   .label {
@@ -28,5 +29,6 @@ export default css`
     flex-direction: column;
     gap: var(--gap);
     height: 100%;
+    width: 100%;
   }
 `;
diff --git a/src/components/nav-item/nav-item.component.ts b/src/components/nav-item/nav-item.component.ts
index 1e06586f7..e1a5ef684 100644
--- a/src/components/nav-item/nav-item.component.ts
+++ b/src/components/nav-item/nav-item.component.ts
@@ -127,9 +127,9 @@ export default class WaNavItem extends WebAwesomeElement {
               @blur=${this.handleBlur}
               @focus=${this.handleFocus}
             >
-              <slot name="prefix"></slot>
-              <slot></slot>
-              <slot name="suffix"></slot>
+              <slot part="prefix" name="prefix"></slot>
+              <div class="content" part="content"><slot></slot></div>
+              <slot part="suffix" name="suffix"></slot>
             </a>
           `
         )}
diff --git a/src/components/nav-item/nav-item.styles.ts b/src/components/nav-item/nav-item.styles.ts
index 9bdb53d8a..e1115ec6e 100644
--- a/src/components/nav-item/nav-item.styles.ts
+++ b/src/components/nav-item/nav-item.styles.ts
@@ -34,14 +34,21 @@ export default css`
   }
 
   .control {
-    display: grid;
-    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
-    grid-auto-flow: column;
+    display: flex;
     align-items: center;
-    justify-content: start;
-    gap: 8px;
     width: 100%;
     border: none;
+    gap: 8px;
+  }
+
+  .content {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .suffix {
+    align-self: end;
   }
 
   .control::-moz-focus-inner {