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

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

@ -5,7 +5,9 @@
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 -->
@ -44,6 +46,30 @@
</svelte:fragment> </svelte:fragment>
</AppBar> </AppBar>
</svelte:fragment> </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 --> <!-- Page Route Content -->
<slot /> <slot />
</AppShell> </AppShell>