diff options
Diffstat (limited to 'ping/frontend/src/lib/components/NavBar.svelte')
| -rw-r--r-- | ping/frontend/src/lib/components/NavBar.svelte | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/ping/frontend/src/lib/components/NavBar.svelte b/ping/frontend/src/lib/components/NavBar.svelte new file mode 100644 index 0000000..1a76876 --- /dev/null +++ b/ping/frontend/src/lib/components/NavBar.svelte @@ -0,0 +1,44 @@ +<script lang="ts"> + const { pageTitle, rightComponent } = $props(); +</script> + +<nav> + <a id="logo" href="/"> + <img src="/img/logo.svg" alt="" style="height:50px" /> + </a> + <div id="middletitle">{pageTitle}</div> + <div id="right">{@render rightComponent()}</div> +</nav> + +<style> + nav { + position: fixed; + width: 100%; + background-color: var(--bg-primary); + color: white; + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px; + height: 64px; + z-index: 2; + } + + #logo { + transition-duration: 0.2s; + } + + #logo:hover { + transform: scale(1.025); + filter: saturate(2); + } + + #middletitle { + font-weight: bold; + font-size: 24px; + } + + #right { + display: flex; + } +</style> |