blob: aa70e512634fd523cde0686de95cb2cef436eb96 (
plain) (
blame)
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<script>
import {portal_base} from "$shared/lib/configuration";
import BlowoutToolbelt from "$shared/components/blowout-toolbelt.svelte";
import "./app.scss";
import {afterNavigate} from "$app/navigation";
import {page} from "$app/stores";
let showSidebar = false;
afterNavigate(() => showSidebar = false);
</script>
<div class="padding-component flex justify-between hide@sm">
<span class="text-lg">Greatoffice</span>
<button class="btn btn--primary"
on:click={() => showSidebar = !showSidebar}>{showSidebar ? "Close" : "Show"} menu
</button>
</div>
<style>
.nav-active {
color: var(--color-primary);
background: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075)
}
</style>
<BlowoutToolbelt/>
<div class="flex@sm">
<aside class="sidebar {showSidebar ? 'sidebar--is-visible': ''}">
<div class="sidebar__panel">
<header class="sidebar__header bg padding-y-sm padding-x-md border-bottom z-index-2">
<span class="text-md text-truncate">Menu</span>
<button class="reset sidebar__close-btn"
on:click={() => showSidebar = !showSidebar}>
<svg class="icon icon--xs"
viewBox="0 0 16 16"><title>Close panel</title>
<g stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10">
<line x1="13.5"
y1="2.5"
x2="2.5"
y2="13.5"></line>
<line x1="2.5"
y1="2.5"
x2="13.5"
y2="13.5"></line>
</g>
</svg>
</button>
</header>
<div class="position-relative padding-sm z-index-1">
<nav class="flex flex-column gap-xs text-lg">
<span class="text-lg hide block@sm">Greatoffice</span>
<a href="/"
class="reset"
title="Learn about the Greatoffice platform"
class:nav-active={$page.url.pathname === "/"}>About</a>
<a href="/privacy"
title="Read our privacy policy"
class="reset"
class:nav-active={$page.url.pathname.startsWith("/privacy")}>Privacy Policy</a>
<a href="/terms"
title="Read our terms of service"
class="reset"
class:nav-active={$page.url.pathname.startsWith("/terms")}>Terms of service</a>
<a href="{portal_base()}"
title="Login to you Greatoffice account"
>Login</a>
<a href="/docs"
title="Learn how to use Greatoffice">Documentation</a>
</nav>
</div>
</div>
</aside>
<main class="position-relative padding-sm z-index-1 flex-grow">
<slot></slot>
</main>
</div>
|
