Skip to content

Commit

Permalink
feat: added the responsiveness to the header
Browse files Browse the repository at this point in the history
  • Loading branch information
@tarunsinghofficial
tarunsinghofficial committed Oct 22, 2024
1 parent 29495a9 commit 6a2ff95
Showing 1 changed file with 123 additions and 49 deletions.
172 changes: 123 additions & 49 deletions src/components/navigation/Header.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@
} 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 {
Expand All @@ -33,66 +35,138 @@
if (PUBLIC_NAV_BAR_LINKS) {
headerLinks = JSON.parse(PUBLIC_NAV_BAR_LINKS);
}
function toggleNavbar() {
isMobileMenuOpen = !isMobileMenuOpen;
}
</script>

<div
class="bg-blur-md flex items-center justify-between border-b border-gray-500 bg-white/80 px-4 dark:bg-black dark:text-white"
class="bg-blur-md bg-white/80 dark:bg-black dark:text-white md:flex-row md:px-8 flex items-center justify-between px-4 border-b border-gray-500"
>
<div class="flex items-center justify-center gap-4 px-2 py-2">
<div>
<a href="/">
<img src={PUBLIC_OBA_LOGO_URL} alt={PUBLIC_OBA_REGION_NAME} class="h-10 rounded-sm" />
</a>
</div>
<div class="md:flex-none flex items-center justify-between flex-1">
<div class="md:w-auto flex justify-between w-full gap-4 px-2 py-2">
<div>
<a href="/">
<img src={PUBLIC_OBA_LOGO_URL} alt={PUBLIC_OBA_REGION_NAME} class="h-10 rounded-sm" />
</a>
</div>

{#if PUBLIC_OBA_SEARCH_ENABLED === 'true'}
<div class="mx-auto max-w-md">
<label
for="default-search"
class="sr-only mb-2 text-sm font-medium text-gray-900 dark:text-white">Search</label
>
<div class="relative">
<div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3">
<svg
class="h-4 w-4 text-gray-500 dark:text-gray-400"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 20 20"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
/>
</svg>
</div>
<input
type="search"
id="search"
class="block w-full rounded-full border border-gray-300 bg-gray-50 p-2 ps-10 text-sm text-gray-900 dark:border-gray-600 dark:placeholder-gray-400"
placeholder="Search a stop or route"
required
bind:value={searchInput}
on:keydown={onHandleSearch}
/>
</div>
<div class="md:hidden flex items-center justify-end">
<button on:click={toggleNavbar}>
<svg
class="burger-icon dark:text-white w-6 h-6 text-gray-900"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16m-7 6h7"
></path>
</svg>
</button>
</div>
{/if}
</div>

<div class="flex gap-x-4">
{#each Object.entries(headerLinks) as [key, value]}
<div class="rounded-md border bg-white/80 dark:bg-gray-800">
<a href={value} class="block px-2 py-1 font-semibold text-gray-900 dark:text-white"
>{key}</a
<div class="md:flex items-center hidden gap-4 px-2 py-2">
{#if PUBLIC_OBA_SEARCH_ENABLED === 'true'}
<div class="max-w-md mx-auto">
<label
for="default-search"
class="dark:text-white mb-2 text-sm font-medium text-gray-900 sr-only">Search</label
>
<div class="relative">
<div class="start-0 ps-3 absolute inset-y-0 flex items-center pointer-events-none">
<svg
class="dark:text-gray-400 w-4 h-4 text-gray-500"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 20 20"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
/>
</svg>
</div>
<input
type="search"
id="search"
class="bg-gray-50 ps-10 dark:border-gray-600 dark:placeholder-gray-400 block w-full p-2 text-sm text-gray-900 border border-gray-300 rounded-full"
placeholder="Search a stop or route"
required
bind:value={searchInput}
on:keydown={onHandleSearch}
/>
</div>
</div>
{/each}
{/if}

<div class="gap-x-4 flex">
{#each Object.entries(headerLinks) as [key, value]}
<div class="bg-white/80 dark:bg-gray-800 border rounded-md">
<a href={value} class="dark:text-white block px-2 py-1 font-semibold text-gray-900"
>{key}</a
>
</div>
{/each}
</div>
</div>
</div>
<div>

<div class="md:flex hidden">
<ThemeSwitcher />
</div>
</div>

{#if isMobileMenuOpen}
<div
class="dark:bg-black md:hidden fixed inset-0 z-50 flex flex-col items-center justify-center p-4 space-y-6 bg-white"
transition:fly={{ x: 1000, duration: 300 }}
>
<button on:click={toggleNavbar}>
<svg
class="close-icon dark:text-white w-6 h-6 text-gray-900"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</button>

<div class="flex flex-col items-center gap-4">
{#each Object.entries(headerLinks) as [key, value]}
<a
href={value}
class="dark:text-white block text-xl font-semibold text-gray-900"
on:click={toggleNavbar}>{key}</a
>
{/each}
</div>
<div>
<ThemeSwitcher />
</div>
</div>
{/if}

<style>
.burger-icon,
.close-icon {
cursor: pointer;
}
</style>

0 comments on commit 6a2ff95

Please sign in to comment.