andrea/probo-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add AppBar

Browse source
This commit is contained in:
andrea 2023-06-29 11:07:55 +02:00
parent 2871746dcd
commit 24550ad436
1 changed files with 69 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
frontend/src/routes/+layout.svelte
View file

@ -1,49 +1,75 @@
<script lang='ts'> <script lang='ts'>
// The ordering of these imports is critical to your app working properly // The ordering of these imports is critical to your app working properly
import '@skeletonlabs/skeleton/themes/theme-skeleton.css'; import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering // If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
import '@skeletonlabs/skeleton/styles/skeleton.css'; import '@skeletonlabs/skeleton/styles/skeleton.css';
// Most of your app wide CSS should be put in this file // Most of your app wide CSS should be put in this file
import '../app.postcss'; import '../app.postcss';
import { AppShell, AppBar } from '@skeletonlabs/skeleton'; import { AppShell, AppBar, AppRail, AppRailTile, AppRailAnchor } from '@skeletonlabs/skeleton';
let currentTile;
</script> </script>
<!-- App Shell --> <!-- App Shell -->
<AppShell> <AppShell>
<svelte:fragment slot="header"> <svelte:fragment slot="header">
<!-- App Bar --> <!-- App Bar -->
<AppBar> <AppBar>
<svelte:fragment slot="lead"> <svelte:fragment slot="lead">
<strong class="text-xl uppercase">Skeleton</strong> <strong class="text-xl uppercase">Skeleton</strong>
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="trail"> <svelte:fragment slot="trail">
<a <a
class="btn btn-sm variant-ghost-surface" class="btn btn-sm variant-ghost-surface"
href="https://discord.gg/EXqV7W8MtY" href="https://discord.gg/EXqV7W8MtY"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
Discord Discord
</a> </a>
<a <a
class="btn btn-sm variant-ghost-surface" class="btn btn-sm variant-ghost-surface"
href="https://twitter.com/SkeletonUI" href="https://twitter.com/SkeletonUI"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
Twitter Twitter
</a> </a>
<a <a
class="btn btn-sm variant-ghost-surface" class="btn btn-sm variant-ghost-surface"
href="https://github.com/skeletonlabs/skeleton" href="https://github.com/skeletonlabs/skeleton"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
GitHub GitHub
</a> </a>
</svelte:fragment> </svelte:fragment>
</AppBar> </AppBar>
</svelte:fragment> </svelte:fragment>
<!-- Page Route Content --> <svelte:fragment slot="sidebarLeft">
<slot /> <AppRail>
<svelte:fragment slot="lead">
<AppRailAnchor href="/" >(icon)</AppRailAnchor>
</svelte:fragment>
<!-- --- -->
<AppRailTile bind:group={currentTile} name="tile-1" value={0} title="tile-1">
<svelte:fragment slot="lead">(icon)</svelte:fragment>
<span>Tile 1</span>
</AppRailTile>
<AppRailTile bind:group={currentTile} name="tile-2" value={1} title="tile-2">
<svelte:fragment slot="lead">(icon)</svelte:fragment>
<span>Tile 2</span>
</AppRailTile>
<AppRailTile bind:group={currentTile} name="tile-3" value={2} title="tile-3">
<svelte:fragment slot="lead">(icon)</svelte:fragment>
<span>Tile 3</span>
</AppRailTile>
<!-- --- -->
<svelte:fragment slot="trail">
<AppRailAnchor href="/" target="_blank" title="Account">(icon)</AppRailAnchor>
</svelte:fragment>
</AppRail>
</svelte:fragment>
<!-- Page Route Content -->
<slot />
</AppShell> </AppShell>