From 4263241bccd16feac7b727825b2cdad907567633 Mon Sep 17 00:00:00 2001 From: Driss Chelouati Date: Wed, 28 Dec 2022 15:47:42 +0100 Subject: [PATCH] feat: search filters, scrollspy --- src/components/content/Pricing.astro | 2 +- .../content/features/SideStatsRight.astro | 50 ++--- src/components/navigation/Navbar.astro | 53 +++-- .../navigation/NavbarSearchFilters.astro | 202 ++++++++++++++++++ .../navigation/NavbarSearchFiltersFive.astro | 121 +++++++++++ .../navigation/NavbarSearchFiltersFour.astro | 94 ++++++++ .../navigation/NavbarSearchFiltersOne.astro | 196 +++++++++++++++++ .../navigation/NavbarSearchFiltersThree.astro | 121 +++++++++++ .../navigation/NavbarSearchFiltersTwo.astro | 119 +++++++++++ src/js/components/navbar.js | 8 + src/js/main.js | 2 +- src/js/pages/index.js | 3 + src/js/pages/scrollspy.js | 5 + src/layouts/Default.astro | 4 +- src/pages/index.astro | 4 +- 15 files changed, 918 insertions(+), 66 deletions(-) create mode 100644 src/components/navigation/NavbarSearchFilters.astro create mode 100644 src/components/navigation/NavbarSearchFiltersFive.astro create mode 100644 src/components/navigation/NavbarSearchFiltersFour.astro create mode 100644 src/components/navigation/NavbarSearchFiltersOne.astro create mode 100644 src/components/navigation/NavbarSearchFiltersThree.astro create mode 100644 src/components/navigation/NavbarSearchFiltersTwo.astro create mode 100644 src/js/pages/scrollspy.js diff --git a/src/components/content/Pricing.astro b/src/components/content/Pricing.astro index 87f41b7..5fc82be 100644 --- a/src/components/content/Pricing.astro +++ b/src/components/content/Pricing.astro @@ -1,4 +1,4 @@ -
+
diff --git a/src/components/content/features/SideStatsRight.astro b/src/components/content/features/SideStatsRight.astro index 59adec2..37045d5 100644 --- a/src/components/content/features/SideStatsRight.astro +++ b/src/components/content/features/SideStatsRight.astro @@ -1,58 +1,44 @@ --- -import MockupOne from '@components/mockup/MockupOne.astro'; +import MockupOne from "@components/mockup/MockupOne.astro"; --- -
+
-

Health Monitoring Tools

+

+ Health Monitoring Tools +

Keep a close eye on your health monitoring

- 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.

Learn more about our suite + class="iconify w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" + data-icon="lucide:arrow-right">
@@ -62,4 +48,4 @@ import MockupOne from '@components/mockup/MockupOne.astro';
-
\ No newline at end of file +
diff --git a/src/components/navigation/Navbar.astro b/src/components/navigation/Navbar.astro index 5f035d4..74a1b03 100644 --- a/src/components/navigation/Navbar.astro +++ b/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"; ---
Dokto - -
-
+
Doctors
-
+
Product
-
+
Pricing
-
+
Sign In
@@ -86,7 +81,9 @@ import Hamburger from "@components/base/Hamburger.astro";
- Signup + Signup
diff --git a/src/components/navigation/NavbarSearchFilters.astro b/src/components/navigation/NavbarSearchFilters.astro new file mode 100644 index 0000000..d35d2ba --- /dev/null +++ b/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"; +--- + + +
+ +
+ + + + + + + + + + +
+ + +
+ +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+
\ No newline at end of file diff --git a/src/components/navigation/NavbarSearchFiltersFive.astro b/src/components/navigation/NavbarSearchFiltersFive.astro new file mode 100644 index 0000000..945781c --- /dev/null +++ b/src/components/navigation/NavbarSearchFiltersFive.astro @@ -0,0 +1,121 @@ +
+
+
+

Select desired experience

+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+
+
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+
+
+
+
diff --git a/src/components/navigation/NavbarSearchFiltersFour.astro b/src/components/navigation/NavbarSearchFiltersFour.astro new file mode 100644 index 0000000..ae0df45 --- /dev/null +++ b/src/components/navigation/NavbarSearchFiltersFour.astro @@ -0,0 +1,94 @@ +
+
+
+

Select a media type

+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+
+
+
+
diff --git a/src/components/navigation/NavbarSearchFiltersOne.astro b/src/components/navigation/NavbarSearchFiltersOne.astro new file mode 100644 index 0000000..e38d2bc --- /dev/null +++ b/src/components/navigation/NavbarSearchFiltersOne.astro @@ -0,0 +1,196 @@ +
+
+
+

Select specialities you need

+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+
+
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+
+
+
+
diff --git a/src/components/navigation/NavbarSearchFiltersThree.astro b/src/components/navigation/NavbarSearchFiltersThree.astro new file mode 100644 index 0000000..ed99bcd --- /dev/null +++ b/src/components/navigation/NavbarSearchFiltersThree.astro @@ -0,0 +1,121 @@ +
+
+
+

Select desired locations

+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+
+
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+
+
+
+
diff --git a/src/components/navigation/NavbarSearchFiltersTwo.astro b/src/components/navigation/NavbarSearchFiltersTwo.astro new file mode 100644 index 0000000..dcd5129 --- /dev/null +++ b/src/components/navigation/NavbarSearchFiltersTwo.astro @@ -0,0 +1,119 @@ +
+
+
+

When should they be available?

+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+
+
+
+
diff --git a/src/js/components/navbar.js b/src/js/components/navbar.js index 748bfe9..d61790a 100644 --- a/src/js/components/navbar.js +++ b/src/js/components/navbar.js @@ -11,5 +11,13 @@ export function navbar() { this.scrolled = false; } }, + isFiltersOpen: false, + activeFilterTab: 'tab-1', + openFilters() { + this.isFiltersOpen = true + }, + closeFilters() { + this.isFiltersOpen = false + }, }; } diff --git a/src/js/main.js b/src/js/main.js index cf67118..40a749b 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -34,7 +34,7 @@ document.onreadystatechange = function () { e.preventDefault(); let hash = this.getAttribute("href"); let target = document.querySelector(hash); - let headerOffset = 300; + let headerOffset = 100; let elementPosition = target.offsetTop; let offsetPosition = elementPosition - headerOffset; diff --git a/src/js/pages/index.js b/src/js/pages/index.js index 93cefd3..c8eb973 100644 --- a/src/js/pages/index.js +++ b/src/js/pages/index.js @@ -1,3 +1,6 @@ +import { homeSpy } from "./scrollspy"; import { doctors } from "./doctors"; +window.homeSpy = homeSpy window.doctors = doctors; + diff --git a/src/js/pages/scrollspy.js b/src/js/pages/scrollspy.js new file mode 100644 index 0000000..02442be --- /dev/null +++ b/src/js/pages/scrollspy.js @@ -0,0 +1,5 @@ +export function homeSpy() { + return { + activeStep: '' + } +} \ No newline at end of file diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro index 76a4961..7a0b2a2 100644 --- a/src/layouts/Default.astro +++ b/src/layouts/Default.astro @@ -12,11 +12,11 @@ const { title } = Astro.props; - + Dokto {"- " + title} - + diff --git a/src/pages/index.astro b/src/pages/index.astro index 0ca600f..19da7ac 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -27,7 +27,7 @@ import Testimonials from "@components/content/Testimonials.astro"; minititle="On-Demand Healthcare" /> -
+
-
+