Skip to content

Commit b939ee9

Browse files
navneetsharmauinavneetsharmaui
committed
Updated the header navigation bar
1 parent 192f935 commit b939ee9

File tree

3 files changed

+56
-53
lines changed

3 files changed

+56
-53
lines changed

‎src/lib/shared/ui/components/header/Header.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
// End: Local Imports
1111
1212
// Start: Exported Properties
13-
export let logoImage = '';
13+
export let logoImage!: string;
1414
export let title = '';
1515
export let useTitleAndLogo!: boolean;
1616
export let useThemeModeButton!: boolean;

‎src/lib/shared/ui/components/navigation-bar/NavigationBar.svelte‎

Lines changed: 54 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,19 @@
22
// Svelte Imports
33
import { createEventDispatcher } from 'svelte';
44
5+
import Icon from 'svelte-awesome';
6+
import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
7+
58
// Models
69
import type { IHeaderNavLink } from '$models/interfaces/iheader-nav-link.interface';
10+
import { page } from '$app/stores';
711
812
// Exports
913
/**
1014
* @type {IHeaderNavLink}
1115
*/
1216
export let navLinks!: IHeaderNavLink[];
13-
export let logoImage = '';
17+
export let logoImage!: string;
1418
export let title = '';
1519
export let useTitleAndLogo = false;
1620
export let useThemeModeButton = true;
@@ -29,56 +33,57 @@
2933
};
3034
</script>
3135

32-
{#if useThemeModeButton}
33-
<button
34-
on:click="{() => toggleTheme()}"
35-
aria-label="Toggle Dark Mode"
36-
type="button"
37-
class="{useTitleAndLogo
38-
? 'sticky-theme-mode-button w-10 h-10 p-3 bg-gray-200 rounded-full dark:bg-gray-800 filter shadow hover:shadow-md dark:shadow-dark dark:hover:shadow-dark-lg'
39-
: 'w-10 h-10 p-3 bg-gray-200 rounded-full dark:bg-gray-800 filter shadow hover:shadow-md dark:shadow-dark dark:hover:shadow-dark-lg'}"
40-
>
41-
<svg
42-
xmlns="http://www.w3.org/2000/svg"
43-
viewBox="0 0 24 24"
44-
fill="currentColor"
45-
stroke="currentColor"
46-
class="w-4 h-4 text-gray-800 dark:text-gray-200"
36+
<header class="relative flex text-gray-900 bg-yellow-50 dark:bg-black bg-opacity-60 dark:text-gray-100 w-full">
37+
<nav class="flex flex-wrap items-center justify-between w-full max-w-4xl p-6 mx-auto">
38+
{#if useTitleAndLogo}
39+
<div class="w-auto p-1 text-gray-900 dark:text-gray-100 font-bold">
40+
<a
41+
sveltekit:prefetch
42+
href="/"
43+
class="flex flex-row h-12 justify-center items-center drop-shadow-xl"
44+
aria-label="{title}"
45+
>
46+
<img
47+
class="h-10 md:h-14 w-auto"
48+
alt="Sveltekit Blogger"
49+
loading="eager"
50+
decoding="async"
51+
width="3.5rem"
52+
height="3.5rem"
53+
src="{logoImage}"
54+
/>
55+
<span class="ml-3 text-lg"> Sveltekit Blogger </span>
56+
</a>
57+
</div>
58+
{/if}
59+
<div class="flex flex-row items-center">
60+
{#each navLinks as navLink, index (navLink.path)}
61+
<a
62+
sveltekit:prefetch
63+
href="{navLink.path}"
64+
class="p-1.5 text-gray-900 sm:p-3.5 dark:text-gray-100 hover:border-b-2 hover:border-gray-800 dark:hover:border-gray-100"
65+
class:nav-active-route="{$page.path === navLink.path || $page.path === `${navLink.path}/`}"
66+
class:nav-inactive-route="{$page.path !== navLink.path && $page.path !== `${navLink.path}/`}"
67+
>
68+
{navLink.label}
69+
</a>
70+
{/each}
71+
</div>
72+
</nav>
73+
{#if useThemeModeButton}
74+
<button
75+
on:click="{() => toggleTheme()}"
76+
aria-label="Toggle Dark Mode"
77+
type="button"
78+
class="{useTitleAndLogo
79+
? 'sticky-theme-mode-button w-8 h-8 bg-yellow-50 rounded-full dark:bg-gray-800 filter shadow hover:shadow-md dark:shadow-dark dark:hover:shadow-dark-lg hover:border-2 hover:border-gray-500 dark:hover:border-gray-300 z-10'
80+
: 'w-8 h-8 bg-yellow-50 rounded-full dark:bg-gray-800 filter shadow hover:shadow-md dark:shadow-dark dark:hover:shadow-dark-lg hover:border-2 hover:border-gray-500 dark:hover:border-gray-300 z-10'}"
4781
>
4882
{#if dark}
49-
<path
50-
stroke-linecap="round"
51-
stroke-linejoin="round"
52-
stroke-width="{2}"
53-
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
54-
></path>
83+
<Icon data="{faSun}" class="{'h-3 w-3 text-xs text-gray-700 dark:text-gray-100'}" scale="{1.5}" />
5584
{:else}
56-
<path
57-
stroke-linecap="round"
58-
stroke-linejoin="round"
59-
stroke-width="{2}"
60-
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
85+
<Icon data="{faMoon}" class="{'h-3 w-3 text-xs text-gray-700 dark:text-gray-100'}" scale="{1.5}" />
6186
{/if}
62-
</svg>
63-
</button>
64-
{/if}
65-
<nav
66-
class="flex flex-wrap items-center justify-between w-full max-w-4xl p-8 mx-auto my-0 text-gray-900 bg-white sticky-nav md:my-8 dark:bg-black bg-opacity-60 dark:text-gray-100"
67-
>
68-
<!-- <a href="#skip" class="skip-nav"> Skip to content </a> -->
69-
{#if useTitleAndLogo}
70-
<div class="w-auto p-1 text-gray-900 dark:text-gray-100 font-bold">
71-
<a sveltekit:prefetch href="/" class="flex flex-row h-12 justify-center items-center" aria-label="{title}">
72-
<img src="{logoImage}" alt="{title}" width="3rem" height="3rem" class="w-12 h-12 mr-2 rounded-full" />
73-
{title}
74-
</a>
75-
</div>
87+
</button>
7688
{/if}
77-
<div class="flex flex-row items-center">
78-
{#each navLinks as navLink, index (navLink.path)}
79-
<a sveltekit:prefetch href="{navLink.path}" class="p-1 text-gray-900 sm:p-4 dark:text-gray-100">
80-
{navLink.label}
81-
</a>
82-
{/each}
83-
</div>
84-
</nav>
89+
</header>

‎src/routes/__layout.svelte‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -86,9 +86,7 @@
8686
</RouteTransition>
8787
<!-- End: Defaull layout slot -->
8888
<!-- Start: Footer -->
89-
<Footer>
90-
<NowPlaying />
91-
</Footer>
89+
<Footer />
9290
<!-- End: Footer -->
9391
</main>
9492
</div>

0 commit comments

Comments
 (0)