/
sidebar-custom-style.svelte
55 lines (52 loc) · 1.01 KB
/
sidebar-custom-style.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script lang="ts">
import { Sidebar } from '$lib/index';
import { menuList, lorem } from './menus';
let siteName = 'Svelte-Sidebar';
let title = 'Custom Style';
let headerClass = 'bg-pink-300 pt-4 px-10 items-center text-white border-b-2';
let asideClass = 'absolute w-auto h-screen bg-red-50 pt-8 border-r-2 shadow-lg';
let navClass = 'p-5 text-lg';
</script>
<div class="fixed z-50 top-0 left-0 w-full">
<Sidebar
lists={menuList}
{siteName}
{headerClass}
{asideClass}
{navClass}
logo="/images/svelte-sidebar-logo.png"
alt="Svelte Sidebar"
/>
</div>
<main class="container mx-auto p-16">
<h1 class="text-4xl text-center py-8">
{title}
</h1>
<p class="pt-4">
{lorem}
</p>
<p class="pt-4">
{lorem}
</p>
<p class="pt-4">
{lorem}
</p>
<p class="pt-4">
{lorem}
</p>
<p class="pt-4">
{lorem}
</p>
<p class="pt-4">
{lorem}
</p>
<p class="pt-4">
{lorem}
</p>
<p class="pt-4">
{lorem}
</p>
</main>
<svelte:head>
<title>Svelte-Sidebar-Menu Custom Stype Example</title>
</svelte:head>