colin
/
sticky-notes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Header bar

This commit is contained in:
Dallas Hoffman 2023-09-25 00:59:55 -04:00
parent a56e08e59a
commit 94d5a97da3
4 changed files with 46 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/lib/components/app-header.svelte Normal file
View File

@ -0,0 +1,35 @@
<script lang="ts">
import SettingsButton from '$lib/components/settings/settings-button.svelte';
import ThemeToggle from '$lib/components/theme-toggle.svelte';
</script>
<header class="app-header">
<ThemeToggle />
<h1 class="app-header__title">Notes</h1>
<SettingsButton />
</header>
<style lang="scss">
.app-header {
z-index: 1;
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
padding: 0.5rem 1rem;
margin: 0;
background-color: var(--card-sectionning-background-color);
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
box-shadow: var(--card-box-shadow);
&__title {
flex: 1 0 auto;
font-size: 1.5rem;
text-align: center;
margin: 0;
}
}
</style>

9
src/lib/components/settings/settings-button.svelte
View File

@ -4,6 +4,13 @@
import { settings } from '$lib/stores'; import { settings } from '$lib/stores';
</script> </script>
<Button plain icon size="lg" label="Settings" on:click={() => settings.open.set(true)}> <Button
plain
icon
size="lg"
label="Settings"
tooltipPlacement="left"
on:click={() => settings.open.set(true)}
>
<FaGear /> <FaGear />
</Button> </Button>

1
src/lib/components/theme-toggle.svelte
View File

@ -10,6 +10,7 @@
icon icon
size="lg" size="lg"
label={`Switch to ${$theme === 'dark' ? 'light' : 'dark'} theme`} label={`Switch to ${$theme === 'dark' ? 'light' : 'dark'} theme`}
tooltipPlacement="right"
on:click={theme.toggle} on:click={theme.toggle}
> >
{#if $theme === 'dark'} {#if $theme === 'dark'}

21
src/routes/+page.svelte
View File

@ -1,21 +1,16 @@
<script lang="ts"> <script lang="ts">
import AppHeader from '$lib/components/app-header.svelte';
import FilterTags from '$lib/components/filter-tags.svelte'; import FilterTags from '$lib/components/filter-tags.svelte';
import NoteAddButton from '$lib/components/notes/note-add-button.svelte'; import NoteAddButton from '$lib/components/notes/note-add-button.svelte';
import NoteListPlaceholder from '$lib/components/notes/note-list-placeholder.svelte'; import NoteListPlaceholder from '$lib/components/notes/note-list-placeholder.svelte';
import NoteList from '$lib/components/notes/note-list.svelte'; import NoteList from '$lib/components/notes/note-list.svelte';
import SettingsButton from '$lib/components/settings/settings-button.svelte';
import SettingsModal from '$lib/components/settings/settings-modal.svelte'; import SettingsModal from '$lib/components/settings/settings-modal.svelte';
import ThemeToggle from '$lib/components/theme-toggle.svelte';
import { notes, tags } from '$lib/stores'; import { notes, tags } from '$lib/stores';
const notesCount = notes.count; const notesCount = notes.count;
</script> </script>
<header> <AppHeader />
<ThemeToggle />
<h1>Notes</h1>
<SettingsButton />
</header>
<main> <main>
<section hidden={$tags.length === 0}> <section hidden={$tags.length === 0}>
<FilterTags /> <FilterTags />
@ -32,18 +27,6 @@
<SettingsModal /> <SettingsModal />
<style lang="scss"> <style lang="scss">
header {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
margin: 1.5rem;
h1 {
margin: 0;
}
}
main { main {
margin: 1.5rem 1.5rem 7.5rem; margin: 1.5rem 1.5rem 7.5rem;
} }