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