✨ feat: Work on nav

dist/index.html

@@ -20,7 +20,10 @@
 
 <nav class="Site-nav Nav" x-data :style="$store['subNav'].open ? '--Site-nav-gridArea: Site-nav;' : ''">
     <a href="/" class="Nav-link">index</a>
-    <button class="Nav-link" @click="$store['subNav'].toggle('collections')">collections</button>
+    <button class="Nav-link" @click="$store['subNav'].toggle('collections')" aria-controls="collections-submenu"
+            aria-expanded="false">
+        collections
+    </button>
     <a href="/about/" class="Nav-link">about</a>
     <a href="/manifesto/" class="Nav-link">manifesto</a>
     <a href="/diary/" class="Nav-link">diary</a>
@@ -32,8 +35,12 @@
     <a href="https://saudade.punkfairie.net" target="_blank" class="Nav-link">petz archive</a>
 </nav>
 
-<nav class="Site-subNav Nav" x-data x-show="$store['subNav'].open">
+<nav class="Site-subNav Nav" x-data x-show="$store['subNav'].current === 'collections'" id="collections-submenu">
+    <p class="Nav-caption"><i>Warning: flashing gifs; very image heavy.</i></p>
 
+    <a href="/collections/buttons/" class="Nav-link">buttons</a>
+    <a href="/collections/blinkies/" class="Nav-link">blinkies</a>
+    <a href="/collections/stamps/" class="Nav-link">stamps</a>
 </nav>
 
 <main class="Site-content">

dist/style/style.css

@@ -1 +1 @@
-*,:after,:before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{line-height:1.5;min-height:100vh;min-height:100vb;text-rendering:optimizeSpeed}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{display:block;max-width:100%}button,input,select,textarea{font:inherit}html{background-image:linear-gradient(90deg,#f87171,#fb923c 17%,#facc15 33%,#a3e635 50%,#39d0dd 67%,#c084fc 83%,#f472b6);min-height:100vh;min-height:100vb;min-width:100vw;min-width:100vi;overflow:hidden}body{color:#18181b;font-family:Imprima,handwriting;font-size:clamp(.75rem,.71rem + .22vw,.88rem);letter-spacing:.6px}:nth-child(7n+1 of i){color:#dc2626}:nth-child(7n+2 of i){color:#ea580c}:nth-child(7n+3 of i){color:#ca8a04}:nth-child(7n+4 of i){color:#65a30d}:nth-child(7n+5 of i){color:#0892a2}:nth-child(7n+6 of i){color:#9333ea}:nth-child(7n+7 of i){color:#db2777}:nth-child(7n+1 of b){color:#dc2626}:nth-child(7n+2 of b){color:#ea580c}:nth-child(7n+3 of b){color:#ca8a04}:nth-child(7n+4 of b){color:#65a30d}:nth-child(7n+5 of b){color:#0892a2}:nth-child(7n+6 of b){color:#9333ea}:nth-child(7n+7 of b){color:#db2777}.Site-content,.Site-info,.Site-nav,.Site-social,.Site-subNav{background-color:hsla(0,0%,98%,.5);margin:clamp(.19rem,.17rem + .11vw,.25rem);padding:clamp(.75rem,.71rem + .22vw,.88rem)}.Site{display:grid;grid-template:"Site-info   Site-content Site-nav" 2fr "Site-social Site-content Site-nav" 2fr "Site-social Site-content Site-subNav" 2fr "Site-title  Site-title   Site-title" 2fr/1fr 3fr 1fr;height:100%;padding:clamp(9rem,8.48rem + 2.61vw,10.5rem);width:100%}.Site-title{font-family:Bungee Shade,display;font-size:clamp(2.24rem,1.86rem + 1.91vw,3.34rem);font-weight:400;grid-area:Site-title;justify-self:end;padding-right:clamp(.75rem,.71rem + .22vw,.88rem)}.Site-nav{--Site-nav-gridArea:Site-nav/Site-nav/Site-subNav/Site-nav;grid-area:Site-nav/Site-nav/Site-subNav/Site-nav;grid-area:var(--Site-nav-gridArea)}.Site-subNav{grid-area:Site-subNav}.Site-content{grid-area:Site-content;padding:clamp(1.13rem,1.06rem + .33vw,1.31rem)}.Site-content>*+*{margin-top:1em}.Site-info{grid-area:Site-info}.Site-social{grid-area:Site-social}.Nav-link{background-color:transparent;border:none;color:inherit;cursor:pointer;display:block;letter-spacing:inherit;margin:0;padding:0;-webkit-text-decoration:underline;text-decoration:underline}.Nav-link:focus,.Nav-link:hover{text-decoration:underline;-webkit-text-decoration:wavy underline;text-decoration:wavy underline}.Nav-separator{background-image:linear-gradient(90deg,#f87171,#fb923c 17%,#facc15 33%,#a3e635 50%,#39d0dd 67%,#c084fc 83%,#f472b6);border:none;height:clamp(.13rem,.13rem + 0vw,.13rem)}:nth-child(7n+1 of .Nav-link){color:#dc2626}:nth-child(7n+2 of .Nav-link){color:#ea580c}:nth-child(7n+3 of .Nav-link){color:#ca8a04}:nth-child(7n+4 of .Nav-link){color:#65a30d}:nth-child(7n+5 of .Nav-link){color:#0892a2}:nth-child(7n+6 of .Nav-link){color:#9333ea}:nth-child(7n+7 of .Nav-link){color:#db2777}
+*,:after,:before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{line-height:1.5;min-height:100vh;min-height:100vb;text-rendering:optimizeSpeed}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{display:block;max-width:100%}button,input,select,textarea{font:inherit}html{background-image:linear-gradient(90deg,#f87171,#fb923c 17%,#facc15 33%,#a3e635 50%,#39d0dd 67%,#c084fc 83%,#f472b6);min-height:100vh;min-height:100vb;min-width:100vw;min-width:100vi;overflow:hidden}body{color:#18181b;font-family:Imprima,handwriting;font-size:clamp(.75rem,.71rem + .22vw,.88rem);letter-spacing:.6px}:nth-child(7n+1 of i){color:#dc2626}:nth-child(7n+2 of i){color:#ea580c}:nth-child(7n+3 of i){color:#ca8a04}:nth-child(7n+4 of i){color:#65a30d}:nth-child(7n+5 of i){color:#0892a2}:nth-child(7n+6 of i){color:#9333ea}:nth-child(7n+7 of i){color:#db2777}:nth-child(7n+1 of b){color:#dc2626}:nth-child(7n+2 of b){color:#ea580c}:nth-child(7n+3 of b){color:#ca8a04}:nth-child(7n+4 of b){color:#65a30d}:nth-child(7n+5 of b){color:#0892a2}:nth-child(7n+6 of b){color:#9333ea}:nth-child(7n+7 of b){color:#db2777}.Site-content,.Site-info,.Site-nav,.Site-social,.Site-subNav{background-color:hsla(0,0%,98%,.5);margin:clamp(.19rem,.17rem + .11vw,.25rem);padding:clamp(.75rem,.71rem + .22vw,.88rem)}.Site{display:grid;grid-template:"Site-info   Site-content Site-nav" 2fr "Site-social Site-content Site-nav" 2fr "Site-social Site-content Site-subNav" 3fr "Site-title  Site-title   Site-title" 2fr/1fr 3fr 1fr;height:100%;padding:clamp(9rem,8.48rem + 2.61vw,10.5rem);width:100%}.Site-title{font-family:Bungee Shade,display;font-size:clamp(2.24rem,1.86rem + 1.91vw,3.34rem);font-weight:400;grid-area:Site-title;justify-self:end;padding-right:clamp(.75rem,.71rem + .22vw,.88rem)}.Site-nav{--Site-nav-gridArea:Site-nav/Site-nav/Site-subNav/Site-nav;grid-area:Site-nav/Site-nav/Site-subNav/Site-nav;grid-area:var(--Site-nav-gridArea)}.Site-subNav{grid-area:Site-subNav}.Site-content{grid-area:Site-content;padding:clamp(1.13rem,1.06rem + .33vw,1.31rem)}.Site-content>*+*{margin-top:1em}.Site-info{grid-area:Site-info}.Site-social{grid-area:Site-social}.Nav-caption{margin-bottom:clamp(.56rem,.52rem + .22vw,.69rem)}.Nav-link{background-color:transparent;border:none;color:inherit;cursor:pointer;display:block;letter-spacing:inherit;margin:0;padding:0;-webkit-text-decoration:underline;text-decoration:underline}.Nav-link:focus,.Nav-link:hover{text-decoration:underline;-webkit-text-decoration:wavy underline;text-decoration:wavy underline}.Nav-separator{background-image:linear-gradient(90deg,#f87171,#fb923c 17%,#facc15 33%,#a3e635 50%,#39d0dd 67%,#c084fc 83%,#f472b6);border:none;height:clamp(.13rem,.13rem + 0vw,.13rem)}:nth-child(7n+1 of .Nav-link){color:#dc2626}:nth-child(7n+2 of .Nav-link){color:#ea580c}:nth-child(7n+3 of .Nav-link){color:#ca8a04}:nth-child(7n+4 of .Nav-link){color:#65a30d}:nth-child(7n+5 of .Nav-link){color:#0892a2}:nth-child(7n+6 of .Nav-link){color:#9333ea}:nth-child(7n+7 of .Nav-link){color:#db2777}

src/_includes/layout.liquid

@@ -20,7 +20,10 @@
 
 <nav class="Site-nav Nav" x-data :style="$store['subNav'].open ? '--Site-nav-gridArea: Site-nav;' : ''">
     <a href="/" class="Nav-link">index</a>
-    <button class="Nav-link" @click="$store['subNav'].toggle('collections')">collections</button>
+    <button class="Nav-link" @click="$store['subNav'].toggle('collections')" aria-controls="collections-submenu"
+            aria-expanded="false">
+        collections
+    </button>
     <a href="/about/" class="Nav-link">about</a>
     <a href="/manifesto/" class="Nav-link">manifesto</a>
     <a href="/diary/" class="Nav-link">diary</a>
@@ -32,8 +35,12 @@
     <a href="https://saudade.punkfairie.net" target="_blank" class="Nav-link">petz archive</a>
 </nav>
 
-<nav class="Site-subNav Nav" x-data x-show="$store['subNav'].open">
+<nav class="Site-subNav Nav" x-data x-show="$store['subNav'].current === 'collections'" id="collections-submenu">
+    <p class="Nav-caption"><i>Warning: flashing gifs; very image heavy.</i></p>
 
+    <a href="/collections/buttons/" class="Nav-link">buttons</a>
+    <a href="/collections/blinkies/" class="Nav-link">blinkies</a>
+    <a href="/collections/stamps/" class="Nav-link">stamps</a>
 </nav>
 
 <main class="Site-content">

src/js/main.js

@@ -5,8 +5,9 @@ Alpine.store('subNav', {
     current: null,
 
     toggle(menu) {
-        this.open = !this.open
+        this.current = !this.current ? menu : null
-        this.current = this.open ? menu : null
+        this.open = !!this.current
+        console.log(this.current, this.open)
     },
 })
 

src/style/components/_Nav.scss

@@ -2,6 +2,10 @@
 @use '../mixins';
 
 .Nav {
+  &-caption {
+    margin-block-end: theme.$spacer-xs;
+  }
+
   &-link {
     display: block;
     padding: 0;

src/style/components/_Site.scss

@@ -15,7 +15,7 @@
   grid-template:
     'Site-info   Site-content Site-nav'    2fr
     'Site-social Site-content Site-nav'    2fr
-    'Site-social Site-content Site-subNav' 2fr
+    'Site-social Site-content Site-subNav' 3fr
     'Site-title  Site-title   Site-title'  2fr
     / 1fr        3fr          1fr;
   inline-size: 100%;