From c4a426346d7ec8c18ff404f345e185624f384f25 Mon Sep 17 00:00:00 2001 From: tarunsinghofficial Date: Tue, 22 Oct 2024 20:52:19 +0530 Subject: [PATCH 1/5] feat: added the responsiveness to the header --- src/components/navigation/Header.svelte | 135 +++++++++++++++++++++--- 1 file changed, 121 insertions(+), 14 deletions(-) diff --git a/src/components/navigation/Header.svelte b/src/components/navigation/Header.svelte index e65af22..9fc49ea 100644 --- a/src/components/navigation/Header.svelte +++ b/src/components/navigation/Header.svelte @@ -6,38 +6,145 @@ } from '$env/static/public'; import ThemeSwitcher from '$lib/ThemeSwitch/ThemeSwitcher.svelte'; + import { createEventDispatcher } from 'svelte'; + import { fly } from 'svelte/transition'; + + const dispatch = createEventDispatcher(); + + let searchInput = ''; + let isMobileMenuOpen = false; + + async function handleSearch() { + try { + const response = await fetch(`/api/oba/search?query=${encodeURIComponent(searchInput)}`); + const results = await response.json(); + dispatch('searchResults', results); + } catch (error) { + console.error('Error fetching search results:', error); + } + } + + const onHandleSearch = (event) => { + if (event.key === 'Enter') { + handleSearch(); + } + }; let headerLinks = null; if (PUBLIC_NAV_BAR_LINKS) { headerLinks = JSON.parse(PUBLIC_NAV_BAR_LINKS); } + + function toggleNavbar() { + isMobileMenuOpen = !isMobileMenuOpen; + }
-
- +
+ {PUBLIC_OBA_REGION_NAME} - - {PUBLIC_OBA_REGION_NAME} -
-
- {#each Object.entries(headerLinks) as [key, value]} -
- {key} + {#if PUBLIC_OBA_SEARCH_ENABLED === 'true'} +
+ +
+
+ +
+
- {/each} +
+ {/if} + +
+ {#each Object.entries(headerLinks) as [key, value]} +
+ {key} +
+ {/each} +
-
+ +
+ +{#if isMobileMenuOpen} +
+ + +
+ {#each Object.entries(headerLinks) as [key, value]} + {key} + {/each} +
+
+ +
+
+{/if} + + From 269baa6c3efdbb20fd4eed51efaeaae9a21c215c Mon Sep 17 00:00:00 2001 From: tarunsinghofficial Date: Tue, 22 Oct 2024 21:02:41 +0530 Subject: [PATCH 2/5] lint: fixed linting issues --- src/components/navigation/Header.svelte | 100 +++++++++++++++--------- 1 file changed, 61 insertions(+), 39 deletions(-) diff --git a/src/components/navigation/Header.svelte b/src/components/navigation/Header.svelte index 9fc49ea..43acfb8 100644 --- a/src/components/navigation/Header.svelte +++ b/src/components/navigation/Header.svelte @@ -44,49 +44,71 @@
-
-
- - {PUBLIC_OBA_REGION_NAME} - +
+
+
+ + {PUBLIC_OBA_REGION_NAME} + +
+ +
+ +
- {#if PUBLIC_OBA_SEARCH_ENABLED === 'true'} -
- -
-
- + - {/if} + {/if}
{#each Object.entries(headerLinks) as [key, value]} From 97c179348fbd3a33ad26181fda210849dd18495b Mon Sep 17 00:00:00 2001 From: tarunsinghofficial Date: Wed, 23 Oct 2024 11:59:17 +0530 Subject: [PATCH 3/5] refactor: fixes previous header commits with new --- src/components/navigation/Header.svelte | 66 +++---------------------- 1 file changed, 6 insertions(+), 60 deletions(-) diff --git a/src/components/navigation/Header.svelte b/src/components/navigation/Header.svelte index 43acfb8..bc4c401 100644 --- a/src/components/navigation/Header.svelte +++ b/src/components/navigation/Header.svelte @@ -6,30 +6,10 @@ } from '$env/static/public'; import ThemeSwitcher from '$lib/ThemeSwitch/ThemeSwitcher.svelte'; - import { createEventDispatcher } from 'svelte'; import { fly } from 'svelte/transition'; - const dispatch = createEventDispatcher(); - - let searchInput = ''; let isMobileMenuOpen = false; - async function handleSearch() { - try { - const response = await fetch(`/api/oba/search?query=${encodeURIComponent(searchInput)}`); - const results = await response.json(); - dispatch('searchResults', results); - } catch (error) { - console.error('Error fetching search results:', error); - } - } - - const onHandleSearch = (event) => { - if (event.key === 'Enter') { - handleSearch(); - } - }; - let headerLinks = null; if (PUBLIC_NAV_BAR_LINKS) { @@ -46,10 +26,13 @@ >
-
- +
+ {PUBLIC_OBA_REGION_NAME} + + {PUBLIC_OBA_REGION_NAME} +
@@ -73,43 +56,6 @@