feat: search filters, scrollspy

src/components/content/Pricing.astro

@@ -1,4 +1,4 @@
-<div id="pricing" class="w-full max-w-6xl mx-auto">
+<div id="pricing" class="w-full max-w-6xl mx-auto"  x-intersect="activeStep = 'spy-3'">
   <div class="p-6 md:p-10 rounded-2xl bg-muted-200 dark:bg-muted-900">
     <div class="grid md:grid-cols-2 ltablet:grid-cols-3 lg:grid-cols-3 gap-6">
       <div class="ptablet:hidden">

src/components/content/features/SideStatsRight.astro

@@ -1,58 +1,44 @@
 ---
-import MockupOne from '@components/mockup/MockupOne.astro';
+import MockupOne from "@components/mockup/MockupOne.astro";
 ---
 
-<div id="product" class="flex flex-col md:flex-row items-center py-6">
+<div
+  id="product"
+  class="flex flex-col md:flex-row items-center py-6"
+  x-intersect="activeStep = 'spy-2'"
+>
   <!--Column-->
   <div class="w-full md:w-1/2 relative p-6">
     <!--Section content-->
     <div class="w-full max-w-lg space-y-4 lg:pl-10">
       <!--Badge-->
-      <h4 class="font-sans font-semibold text-xs tracking-widest uppercase mb-3 text-primary-500">Health Monitoring Tools</h4>
+      <h4
+        class="font-sans font-semibold text-xs tracking-widest uppercase mb-3 text-primary-500"
+      >
+        Health Monitoring Tools
+      </h4>
       <!--Title-->
       <h2
-        class="
-          font-heading font-medium
-          text-4xl text-muted-800
-          dark:text-white
-        "
+        class="font-heading font-medium text-4xl text-muted-800 dark:text-white"
       >
         Keep a close eye on your health monitoring
       </h2>
       <!--Subtitle-->
       <p class="font-sans text-lg text-muted-500 dark:text-muted-400">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tum
-        Torquatus: Prorsus, inquit, assentior; Videmus igitur ut
-        conquiescere.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tum Torquatus:
+        Prorsus, inquit, assentior; Videmus igitur ut conquiescere.
       </p>
       <!--Link-->
       <a
         href="#"
-        class="
-          group
-          inline-flex
-          items-center
-          gap-4
-          text-primary-500
-          hover:text-primary-400
-          transition-colors
-          duration-300
-        "
+        class="group inline-flex items-center gap-4 text-primary-500 hover:text-primary-400 transition-colors duration-300"
       >
         <span class="font-sans font-medium text-sm">
           Learn more about our suite
         </span>
         <i
-          class="
-            iconify
-            w-4
-            h-4
-            group-hover:translate-x-1
-            transition-transform
-            duration-300
-          "
-          data-icon="lucide:arrow-right"
-        ></i>
+          class="iconify w-4 h-4 group-hover:translate-x-1 transition-transform duration-300"
+          data-icon="lucide:arrow-right"></i>
       </a>
     </div>
   </div>
@@ -62,4 +48,4 @@ import MockupOne from '@components/mockup/MockupOne.astro';
     <!--Feature-->
     <MockupOne />
   </div>
-</div>
+</div>

src/components/navigation/Navbar.astro

@@ -3,6 +3,7 @@ import Logo from "@components/base/Logo.astro";
 import ButtonMain from "@components/base/ButtonMain.astro";
 import ThemeToggler from "@components/base/ThemeToggler.astro";
 import Hamburger from "@components/base/Hamburger.astro";
+import NavbarSearchFilters from "@components/navigation/NavbarSearchFilters.astro";
 ---
 
 <div
@@ -29,64 +30,60 @@ import Hamburger from "@components/base/Hamburger.astro";
           >Dokto</span
         >
       </a>
-      <div class="hidden md:block relative">
+      <div
+        role="button"
+        class="hidden md:block relative"
+        @click.away="closeFilters()"
+      >
         <input
           type="text"
           class="peer pl-9 pr-4 py-2 h-10 text-sm leading-5 font-sans w-full rounded-xl bg-white text-slate-600 border border-slate-300 focus-visible:shadow-lg focus-visible:shadow-slate-300/50 dark:focus-visible:shadow-slate-800/50 placeholder:text-slate-300 dark:placeholder:text-slate-500 dark:bg-slate-800 dark:text-slate-200 dark:border-slate-700 outline-none focus-visible:outline-2 focus-visible:outline-dashed focus-visible:outline-slate-300 dark:focus-visible:outline-slate-600 focus-visible:outline-offset-2 disabled:opacity-60 disabled:cursor-not-allowed transition-all duration-300"
           placeholder="Search your doctor..."
+          @focus="openFilters()"
         />
         <div
           class="absolute top-0 left-0 h-10 w-10 flex justify-center items-center text-slate-400 peer-focus:text-primary-500 peer-disabled:opacity-20 transition-colors duration-300"
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            aria-hidden="true"
-            role="img"
-            class="h-4 w-4"
-            width="32"
-            height="32"
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 24 24"
-            ><g
-              fill="none"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              ><circle cx="11" cy="11" r="8"></circle><path
-                d="m21 21l-4.35-4.35"></path>
-            </g>
-          </svg>
+          <i class="iconify w-4 h-4" data-icon="lucide:search"></i>
         </div>
+        <NavbarSearchFilters />
       </div>
       <div class="flex items-center justify-center h-20 w-20 lg:hidden ml-auto">
         <Hamburger />
       </div>
     </div>
     <!-- Right -->
-    <div class=" flex-col items-center lg:justify-end gap-x-6"
-        :class="$store.app.mobileOpen ? 'absolute top-[80px] left-0 w-full flex text-center px-6 pt-2 pb-6 border-t border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 shadow-lg shadow-muted-300/40 dark:shadow-muted-900/50' : 'hidden lg:flex lg:flex-row'"
+    <div
+      class="flex-col items-center lg:justify-end gap-x-6"
+      :class="$store.app.mobileOpen ? 'absolute top-[80px] left-0 w-full flex text-center px-6 pt-2 pb-6 border-t border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 shadow-lg shadow-muted-300/40 dark:shadow-muted-900/50' : 'hidden lg:flex lg:flex-row'"
     >
       <div class="flex flex-col lg:flex-row items-center gap-x-6">
-        <div class="py-3 lg:py-5 text-slate-500 dark:text-slate-400">
+        <div class="relative py-3 lg:py-5 after:content-[''] after:absolute after:-bottom-1.5 after:left-0 after:h-[3px] after:rounded-t-full after:transition-all after:duration-300 transition-colors duration-300"
+          :class="activeStep === 'spy-1' ? 'text-primary-500 after:bg-primary-500 after:w-full' : 'text-slate-500 dark:text-slate-400 hover:text-muted-700 dark:hover:text-muted-100 after:w-0'"
+        >
           <a href="#doctors">Doctors</a>
         </div>
-        <div class="py-3 lg:py-5 text-slate-500 dark:text-slate-400">
+        <div class="relative py-3 lg:py-5 after:content-[''] after:absolute after:-bottom-1.5 after:left-0 after:h-[3px] after:rounded-t-full after:transition-all after:duration-300 transition-colors duration-300"
+          :class="activeStep === 'spy-2' ? 'text-primary-500 after:bg-primary-500 after:w-full' : 'text-slate-500 dark:text-slate-400 hover:text-muted-700 dark:hover:text-muted-100 after:w-0'"
+        >
           <a href="#product">Product</a>
         </div>
-        <div class="py-3 lg:py-5 text-slate-500 dark:text-slate-400">
+        <div class="relative py-3 lg:py-5 after:content-[''] after:absolute after:-bottom-1.5 after:left-0 after:h-[3px] after:rounded-t-full after:transition-all after:duration-300 transition-colors duration-300"
+          :class="activeStep === 'spy-3' ? 'text-primary-500 after:bg-primary-500 after:w-full' : 'text-slate-500 dark:text-slate-400 hover:text-muted-700 dark:hover:text-muted-100 after:w-0'"
+        >
           <a href="#pricing">Pricing</a>
         </div>
-        <div class="py-3 lg:py-5 text-slate-500 dark:text-slate-400">
+        <div class="relative py-3 lg:py-5 text-slate-500 dark:text-slate-400 hover:text-muted-700 dark:hover:text-muted-100 transition-colors duration-300">
           <a href="#">Sign In</a>
         </div>
         <div class="py-3 lg:py-5">
           <ThemeToggler />
         </div>
       </div>
       <div class="w-full md:w-auto">
-        <ButtonMain to={"#"} class="'w-full md:w-[240px] lg:w-[110px]'">Signup</ButtonMain>
+        <ButtonMain to={"#"} class="'w-full md:w-[240px] lg:w-[110px]'"
+          >Signup</ButtonMain
+        >
       </div>
     </div>
   </div>

src/components/navigation/NavbarSearchFilters.astro

@@ -0,0 +1,202 @@
+---
+import NavbarSearchFiltersOne from "@components/navigation/NavbarSearchFiltersOne.astro";
+import NavbarSearchFiltersTwo from "@components/navigation/NavbarSearchFiltersTwo.astro";
+import NavbarSearchFiltersThree from "@components/navigation/NavbarSearchFiltersThree.astro";
+import NavbarSearchFiltersFour from "@components/navigation/NavbarSearchFiltersFour.astro";
+import NavbarSearchFiltersFive from "@components/navigation/NavbarSearchFiltersFive.astro";
+---
+
+<!--Dropdown menu-->
+<div
+x-show="isFiltersOpen"
+x-transition
+class="
+  absolute
+  top-11
+  left-0
+  w-[660px]
+  ptablet:w-[580px]
+  grid grid-cols-12
+  bg-white
+  dark:bg-muted-1000
+  rounded-lg
+  overflow-hidden
+  border border-muted-200
+  dark:border-muted-800
+  shadow-xl shadow-muted-400/20
+  dark:shadow-muted-800/20
+  z-10
+"
+>
+<!--Menu-->
+<div class="col-span-4 p-6 space-y-2 bg-muted-50 dark:bg-muted-900">
+  <!--Menu item-->
+  <button
+    type="button"
+    data-tab="tab-1"
+    class="
+      w-full
+      flex
+      items-center
+      gap-2
+      py-2
+      px-3
+      rounded-lg
+      border-2
+      font-sans
+      text-sm
+      cursor-pointer
+      transition-all
+      duration-300
+      tw-accessibility
+      click-blur
+    "
+    :class="activeFilterTab === 'tab-1' ? 'text-primary-500 border-primary-500 bg-primary-500/10' : 'text-muted-500 hover:text-muted-600 dark:hover:text-muted-300 border-muted-50 dark:border-muted-900 hover:bg-muted-200 dark:hover:bg-muted-800'"
+    @click="activeFilterTab = 'tab-1'"
+  >
+    <i class="iconify w-4 h-4" data-icon="lucide:stethoscope"></i>
+    <span>Speciality</span>
+    <i class="iconify w-4 h-4 ml-auto" data-icon="lucide:chevron-right"></i>
+  </button>
+  <!--Menu item-->
+  <button
+    type="button"
+    data-tab="tab-2"
+    class="
+      w-full
+      flex
+      items-center
+      gap-2
+      py-2
+      px-3
+      rounded-lg
+      border-2
+      font-sans
+      text-sm
+      cursor-pointer
+      transition-all
+      duration-300
+      tw-accessibility
+      click-blur
+    "
+    :class="activeFilterTab === 'tab-2' ? 'text-primary-500 border-primary-500 bg-primary-500/10' : 'text-muted-500 hover:text-muted-600 dark:hover:text-muted-300 border-muted-50 dark:border-muted-900 hover:bg-muted-200 dark:hover:bg-muted-800'"
+    @click="activeFilterTab = 'tab-2'"
+  >
+    <i class="iconify w-4 h-4" data-icon="lucide:calendar-check-2"></i>
+    <span>Availability</span>
+    <i class="iconify w-4 h-4 ml-auto" data-icon="lucide:chevron-right"></i>
+  </button>
+  <!--Menu item-->
+  <button
+    type="button"
+    data-tab="tab-3"
+    class="
+      w-full
+      flex
+      items-center
+      gap-2
+      py-2
+      px-3
+      rounded-lg
+      border-2
+      font-sans
+      text-sm
+      cursor-pointer
+      transition-all
+      duration-300
+      tw-accessibility
+      click-blur
+    "
+    :class="activeFilterTab === 'tab-3' ? 'text-primary-500 border-primary-500 bg-primary-500/10' : 'text-muted-500 hover:text-muted-600 dark:hover:text-muted-300 border-muted-50 dark:border-muted-900 hover:bg-muted-200 dark:hover:bg-muted-800'"
+    @click="activeFilterTab = 'tab-3'"
+  >
+    <i class="iconify w-4 h-4" data-icon="lucide:map-pin"></i>
+    <span>Location</span>
+    <i class="iconify w-4 h-4 ml-auto" data-icon="lucide:chevron-right"></i>
+  </button>
+  <!--Menu item-->
+  <button
+    type="button"
+    data-tab="tab-4"
+    class="
+      w-full
+      flex
+      items-center
+      gap-2
+      py-2
+      px-3
+      rounded-lg
+      border-2
+      font-sans
+      text-sm
+      cursor-pointer
+      transition-all
+      duration-300
+      tw-accessibility
+      click-blur
+    "
+    :class="activeFilterTab === 'tab-4' ? 'text-primary-500 border-primary-500 bg-primary-500/10' : 'text-muted-500 hover:text-muted-600 dark:hover:text-muted-300 border-muted-50 dark:border-muted-900 hover:bg-muted-200 dark:hover:bg-muted-800'"
+    @click="activeFilterTab = 'tab-4'"
+  >
+    <i class="iconify w-4 h-4" data-icon="lucide:video"></i>
+    <span>Consultation</span>
+    <i class="iconify w-4 h-4 ml-auto" data-icon="lucide:chevron-right"></i>
+  </button>
+  <!--Menu item-->
+  <button
+    type="button"
+    data-tab="tab-5"
+    class="
+      w-full
+      flex
+      items-center
+      gap-2
+      py-2
+      px-3
+      rounded-lg
+      border-2
+      font-sans
+      text-sm
+      cursor-pointer
+      transition-all
+      duration-300
+      tw-accessibility
+      click-blur
+    "
+    :class="activeFilterTab === 'tab-5' ? 'text-primary-500 border-primary-500 bg-primary-500/10' : 'text-muted-500 hover:text-muted-600 dark:hover:text-muted-300 border-muted-50 dark:border-muted-900 hover:bg-muted-200 dark:hover:bg-muted-800'"
+    @click="activeFilterTab = 'tab-5'"
+  >
+    <i class="iconify w-4 h-4" data-icon="lucide:award"></i>
+    <span>Experience</span>
+    <i class="iconify w-4 h-4 ml-auto" data-icon="lucide:chevron-right"></i>
+  </button>
+</div>
+
+<!--Filters-->
+<div class="col-span-8 min-h-[310px] p-6">
+  <!--Date filter-->
+  <div x-show="activeFilterTab === 'tab-1'">
+    <NavbarSearchFiltersOne />
+  </div>
+
+  <!--Keywords filter-->
+  <div x-show="activeFilterTab === 'tab-2'">
+    <NavbarSearchFiltersTwo />
+  </div>
+
+  <!--Status filter-->
+  <div x-show="activeFilterTab === 'tab-3'">
+    <NavbarSearchFiltersThree />
+  </div>
+
+  <!--Accounts filter-->
+  <div x-show="activeFilterTab === 'tab-4'">
+    <NavbarSearchFiltersFour />
+  </div>
+
+  <!--Payment filter-->
+  <div x-show="activeFilterTab === 'tab-5'">
+    <NavbarSearchFiltersFive />
+  </div>
+</div>
+</div>