Indent subnav items on mobile

puzzle · Jan 9, 2025 · 02400d1 · 02400d1
1 parent ea68454
commit 02400d1
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## 5.0.0
 
 - BREAKING CHANGE: Change the default layout of the footer slots to vertical
+- Indent subnav items on mobile
 
 ## 4.2.4
 

diff --git a/src/components/NavItem.ts b/src/components/NavItem.ts
@@ -24,14 +24,18 @@ export class NavItem extends LitElement {
     css`
       a {
         display: block;
-        margin-top: var(--pzsh-menu-item-gap);
         padding: var(--pzsh-menu-item-padding-vertical)
           var(--pzsh-menu-item-padding-horizontal);
         color: var(--pzsh-menu-fg);
-        background-color: var(--pzsh-menu-bg-alt);
         text-decoration: none;
         white-space: nowrap;
       }
+
+      :host {
+        margin: calc(0.5 * var(--pzsh-menu-item-gap)) 0;
+        background-color: var(--pzsh-menu-bg-alt);
+      }
+
       :host(:focus) a,
       a:hover,
       a:active,
@@ -42,6 +46,8 @@ export class NavItem extends LitElement {
       @media (min-width: ${theme.breakpoint}px) {
         :host {
           line-height: var(--pzsh-nav-line-height);
+          margin: 0;
+          background-color: var(--pzsh-menu-bg);
         }
         a {
           margin: 0;

diff --git a/src/components/Subnav.ts b/src/components/Subnav.ts
@@ -17,6 +17,10 @@ export class Subnav extends LitElement {
         flex-direction: column;
       }
 
+      ::slotted(pzsh-nav-item) {
+        padding-left: calc(4 * var(--pzsh-spacer));
+      }
+
       @media (min-width: ${theme.breakpoint}px) {
         :host {
           width: 100%;
@@ -28,6 +32,7 @@ export class Subnav extends LitElement {
         ::slotted(pzsh-nav-item) {
           --pzsh-nav-fg: var(--pzsh-subnav-fg);
           --pzsh-nav-active: var(--pzsh-subnav-active);
+          padding-left: 0;
         }
       }
     `,