Update pages

index.html

@@ -57,12 +57,32 @@
             </a>
           </li>
           <li>
-            <a
-              class="inline-block py-2 hover:text-gray-500 transition"
-              href="#/collections"
-            >
-              Pages
-            </a>
+            <div class="relative" x-data="{ open: false }">
+              <button
+                class="inline-flex py-2 items-center hover:text-gray-500 transition"
+                @click="open = !open"
+                @click.outside="open = false"
+                @mouseenter="open = true"
+              >
+                Pages<span x-html="svg('arrow-down')"></span>
+              </button>
+              <div
+                x-show="open"
+                x-transition
+                @mouseleave="open = false"
+                class="absolute p-2 w-48 rounded-lg bg-gray-100 border border-gray-200 shadow-md"
+                role="menu"
+              >
+                <template x-for="route in router.routes">
+                  <a
+                    :href="`#${route.path}`"
+                    x-text="route.path === '/' ? 'Home' : route.path.split('/')[1].split('-').map(str => str[0].toUpperCase() + str.slice(1)).join(' ')"
+                    class="block px-4 py-2 text-sm rounded-lg hover:bg-gray-200"
+                    role="menuitem"
+                  ></a>
+                </template>
+              </div>
+            </div>
           </li>
           <li>
             <a
@@ -81,16 +101,16 @@
             </a>
           </li>
         </ul>
-        <div class="ml-auto relative" x-data="{ menuOpen: false }">
+        <div class="hidden md:flex ml-auto relative" x-data="{ open: false }">
           <label for="Search" class="sr-only">Search</label>
           <input
             type="text"
             id="Search"
             placeholder="Search"
             x-bind="shop.searchText"
             class="w-full pl-2.5 py-2.5 pe-10 sm:text-sm rounded-md bg-inherit border-gray-300 shadow"
-            @focus="!shop.products.length && await shop.loadProducts(); menuOpen = true"
-            @blur="menuOpen = false"
+            @focus="!shop.products.length && await shop.loadProducts(); open = true"
+            @blur="open = false"
           />
           <span class="absolute inset-y-0 end-0 grid w-10 place-content-center">
             <button type="button" class="text-gray-600 hover:text-gray-700">
@@ -100,7 +120,7 @@
           </span>
           <div
             x-data="shop.filterProducts"
-            x-show="menuOpen && shop.filterProducts.length"
+            x-show="open && shop.filterProducts.length"
             class="absolute right-0 top-14 z-50 w-72 rounded-md border border-gray-100 bg-white shadow-lg"
           >
             <ul class="max-h-64 space-y-1 overflow-auto p-2">
@@ -124,7 +144,11 @@
             </ul>
           </div>
         </div>
-        <a class="p-2" href="#/account" x-html="svg('account')"></a>
+        <a
+          class="ml-auto md:ml-0 p-2"
+          href="#/account"
+          x-html="svg('account')"
+        ></a>
         <a class="p-2" href="#/cart" x-html="svg('cart')"></a>
       </div>
     </nav>
@@ -156,8 +180,15 @@
       @hashchange.window="loader.start(); await scrollToTop(); router.renderPage(); loader.end()"
     >
       <div class="max-w-screen-xl mx-auto px-4 py-12">
-        <h1 x-text="router.currentRoute.title" class="mb-2 text-4xl font-bold"></h1>
-        <p x-show="router.currentRoute.title" x-text="router.currentRoute.description" class="mb-12 text-lg"></p>
+        <h1
+          x-text="router.currentRoute.title"
+          class="mb-2 text-4xl font-bold"
+        ></h1>
+        <p
+          x-show="router.currentRoute.title"
+          x-text="router.currentRoute.description"
+          class="mb-12 text-lg"
+        ></p>
         <div id="router-view"></div>
       </div>
     </main>
@@ -193,26 +224,17 @@ <h1 x-text="router.currentRoute.title" class="mb-2 text-4xl font-bold"></h1>
         <div class="lg:flex lg:items-end lg:justify-between tracking-wider">
           <ul class="hidden lg:flex gap-4">
             <li>
-              <a
-                class="text-sm text-gray-900 hover:underline"
-                href="#/about"
-              >
+              <a class="text-sm text-gray-900 hover:underline" href="#/about">
                 About
               </a>
             </li>
             <li>
-              <a
-                class="text-sm text-gray-900 hover:underline"
-                href="#/contact"
-              >
+              <a class="text-sm text-gray-900 hover:underline" href="#/contact">
                 Contact Us
               </a>
             </li>
             <li>
-              <a
-                class="text-sm text-gray-900 hover:underline"
-                href="#/faq"
-              >
+              <a class="text-sm text-gray-900 hover:underline" href="#/faq">
                 FAQ
               </a>
             </li>

src/app.js

@@ -124,10 +124,10 @@ const loader = {
 const router = {
   routes: [
     { path: '/', component: '/home.html' },
-    { path: '/blog', component: '/blog/index.html', title: 'Blog' },
+    { path: '/blog', component: '/blog/index.html', title: 'Recent from blog' },
     { path: '/about', component: '/about/index.html', title: 'About Us' },
-    { path: '/contact-us', component: '/about/contact-us.html', title: 'Contact Us' },
-    { path: '/faq', component: '/about/faq.html', title: 'Faq' },
+    { path: '/contact', component: '/about/contact.html', title: 'Contact Us' },
+    { path: '/faq', component: '/about/faq.html', title: 'Frequently asked questions' },
     { path: '/shop', component: '/shop/index.html', title: 'Shop' },
     { path: '/cart', component: '/shop/cart.html', title: 'Cart' },
     { path: '/order-tracking', component: '/shop/order-tracking.html', title: 'Order Tracking' },

src/components/svg/arrow-down.html

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>