atscan/frontend/src/routes/+layout.svelte

71 řádky
2.0 KiB
Svelte

<script>
// 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, LightSwitch } from '@skeletonlabs/skeleton';
import hljs from 'highlight.js';
import 'highlight.js/styles/github-dark.css';
import { storeHighlightJs } from '@skeletonlabs/skeleton';
storeHighlightJs.set(hljs);
</script>
<!-- App Shell -->
<AppShell>
<svelte:fragment slot="header">
<!-- App Bar -->
<AppBar>
<svelte:fragment slot="lead">
<a href="/"><strong class="text-xl uppercase">ATScan</strong></a>
<div class="lg:ml-8 flex">
<div class="relative hidden lg:block">
<a href="/did" class="btn hover:variant-soft-primary"><span>DIDs</span></a>
</div>
<div class="relative hidden lg:block">
<a href="/pds" class="btn hover:variant-soft-primary"><span>PDS Instances</span></a>
</div>
<div class="relative hidden lg:block">
<a href="/plc" class="btn hover:variant-soft-primary"><span>PLC Directories</span></a>
</div>
</div>
</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 hover:variant-soft-primary"
href="https://github.com/burningtree/atscan"
target="_blank"
rel="noreferrer"
>
GitHub
</a>
<LightSwitch />
</svelte:fragment>
</AppBar>
</svelte:fragment>
<!-- Page Route Content -->
<slot />
</AppShell>