menu switchin

.eleventy.js

@@ -1,16 +1,16 @@
-const fs = require('fs')
-const postcss = require('postcss')
-const postcssImportExtGlob = require('postcss-import-ext-glob')
-const postcssImport = require('postcss-import')
-const postcssPresetEnv = require('postcss-preset-env')
-const cssnano = require('cssnano')
-// const esbuild = require('esbuild')
-const automaticNoopener = require('eleventy-plugin-automatic-noopener')
+const fs = require("fs");
+const postcss = require("postcss");
+const postcssImportExtGlob = require("postcss-import-ext-glob");
+const postcssImport = require("postcss-import");
+const postcssPresetEnv = require("postcss-preset-env");
+const cssnano = require("cssnano");
+const esbuild = require("esbuild");
+const automaticNoopener = require("eleventy-plugin-automatic-noopener");
 
-module.exports = function (eleventyConfig) {
-    eleventyConfig.on('eleventy.before', async () => {
-        const cssSrc = './src/style/style.css'
-        const cssDest = './dist/style.css'
+module.exports = function(eleventyConfig) {
+  eleventyConfig.on("eleventy.before", async () => {
+    const cssSrc = "./src/style/style.css";
+    const cssDest = "./dist/style.css";
 
     fs.readFile(cssSrc, (err, css) => {
       // noinspection JSCheckFunctionSignatures
@@ -20,31 +20,31 @@ module.exports = function (eleventyConfig) {
         postcssPresetEnv,
         cssnano
       ])
-                .process(css, {from: cssSrc, to: cssDest})
+        .process(css, { from: cssSrc, to: cssDest })
         .then(res => {
-                    fs.writeFile(cssDest, res.css, () => true)
-                })
-        })
+          fs.writeFile(cssDest, res.css, () => true);
+        });
+    });
 
-        // await esbuild.build({
-        //     entryPoints: ['src/js/main.js'],
-        //     bundle: true,
-        //     minify: true,
-        //     target: 'es2020',
-        //     outfile: 'dist/main.js',
-        // })
-        //     .then(() => console.log('🧳 esbuild done'))
-        //     .catch(() => process.exit(1))
+    await esbuild.build({
+      entryPoints: ["src/js/main.js"],
+      bundle: true,
+      minify: true,
+      target: "es2020",
+      outfile: "dist/main.js"
     })
+      .then(() => console.log("🧳 esbuild done"))
+      .catch(() => process.exit(1));
+  });
 
-    eleventyConfig.addWatchTarget('./src/style/')
-    eleventyConfig.addWatchTarget('./src/js/')
+  eleventyConfig.addWatchTarget("./src/style/");
+  eleventyConfig.addWatchTarget("./src/js/");
 
   eleventyConfig.addPlugin(automaticNoopener, {
-        noreferrer: true,
-    })
+    noreferrer: true
+  });
 
-    eleventyConfig.addPassthroughCopy('./src/img/')
+  eleventyConfig.addPassthroughCopy("./src/img/");
 
-    return {dir: {input: 'src', output: 'dist'}}
-}
+  return { dir: { input: "src", output: "dist" } };
+};

node_modules/.package-lock.json

@@ -1392,6 +1392,19 @@
       "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
       "dev": true
     },
+    "node_modules/@vue/reactivity": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
+      "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
+      "dependencies": {
+        "@vue/shared": "3.1.5"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
+      "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
+    },
     "node_modules/a-sync-waterfall": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
@@ -1426,6 +1439,14 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/alpinejs": {
+      "version": "3.13.3",
+      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.13.3.tgz",
+      "integrity": "sha512-WZ6WQjkAOl+WdW/jukzNHq9zHFDNKmkk/x6WF7WdyNDD6woinrfXCVsZXm0galjbco+pEpYmJLtwlZwcOfIVdg==",
+      "dependencies": {
+        "@vue/reactivity": "~3.1.1"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",

package-lock.json

@@ -9,7 +9,8 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "@punkfairie/modern-css-reset": "^1.0.1"
+        "@punkfairie/modern-css-reset": "^1.0.1",
+        "alpinejs": "^3.13.3"
       },
       "devDependencies": {
         "@11ty/eleventy": "^2.0.1",
@@ -1749,6 +1750,19 @@
       "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
       "dev": true
     },
+    "node_modules/@vue/reactivity": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
+      "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
+      "dependencies": {
+        "@vue/shared": "3.1.5"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
+      "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
+    },
     "node_modules/a-sync-waterfall": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
@@ -1783,6 +1797,14 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/alpinejs": {
+      "version": "3.13.3",
+      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.13.3.tgz",
+      "integrity": "sha512-WZ6WQjkAOl+WdW/jukzNHq9zHFDNKmkk/x6WF7WdyNDD6woinrfXCVsZXm0galjbco+pEpYmJLtwlZwcOfIVdg==",
+      "dependencies": {
+        "@vue/reactivity": "~3.1.1"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",

package.json

@@ -24,6 +24,7 @@
     "stylelint": "^15.11.0"
   },
   "dependencies": {
-    "@punkfairie/modern-css-reset": "^1.0.1"
+    "@punkfairie/modern-css-reset": "^1.0.1",
+    "alpinejs": "^3.13.3"
   }
 }

src/_includes/layout.liquid

@@ -8,16 +8,18 @@
   <title>... Epiphany ... baby, it's cold outsite ...</title>
   <!--suppress HtmlUnknownTarget -->
   <link rel="stylesheet" href="/style.css">
+  <!--suppress HtmlUnknownTarget -->
+  <script src="/main.js" type="module"></script>
 </head>
 <body>
-<div class="site">
+<div class="site" x-data="{menu: 'index'}">
   <header>
     <h1>Epiphany</h1>
 
     <nav class="main-nav">
       <a href="/">index</a>
-      <a href="#">adoptions</a>
-      <a href="#">about</a>
+      <a href="#" x-on:click="menu = 'adoptions'">adoptions</a>
+      <a href="#" x-on:click="menu = 'about'">about</a>
     </nav>
   </header>
 
@@ -25,7 +27,17 @@
     {{ content }}
   </main>
 
-  <nav class="secondary-nav"></nav>
+  <nav class="secondary-nav" id="index" x-show="menu === 'index'">
+    <img src="/img/petz/siren-2.png" alt="Siren">
+  </nav>
+
+  <nav class="secondary-nav" id="adoptions" x-show="menu === 'adoptions'">
+    adoptions menu
+  </nav>
+
+  <nav class="secondary-nav" id="about" x-show="menu === 'about'">
+    about menu
+  </nav>
 </div>
 </body>
 </html>

src/js/main.js

@@ -0,0 +1,5 @@
+import Alpine from "alpinejs";
+
+window.Alpine = Alpine;
+
+Alpine.start();

src/style/layout.css

@@ -11,6 +11,8 @@
             '.      .'      1.5fr
             'header header' 0.5fr
             's-nav  main'   2.5fr / 1fr 5fr;
+        grid-column-gap: var(--space-s);
+
         width: 1024px;
         height: 768px;
         padding: var(--space-xs);
@@ -31,15 +33,15 @@
         column-gap: var(--space-m);
     }
 
-    h1 {
-
-    }
-
     .main-nav {
         display: flex;
         column-gap: var(--space-xs);
     }
 
+    main, .secondary-nav {
+        background-color: rgba(255, 255, 255, 0.49);
+    }
+
     main {
         --flow-space: var(--space-xs);
 
@@ -47,7 +49,6 @@
         padding: var(--space-s);
         overflow: auto;
         text-align: center;
-        background-color: rgba(255, 255, 255, 0.49);
     }
 
     .secondary-nav {