feat: New frontpage

1 files changed, 80 insertions, 0 deletions

diff --git a/apps/frontpage/src/routes/__layout.svelte b/apps/frontpage/src/routes/__layout.svelte
new file mode 100644
index 0000000..f1a7eaa
--- /dev/null
+++ b/apps/frontpage/src/routes/__layout.svelte
@@ -0,0 +1,80 @@
+<script>
+  import {portal_base} from "$shared/lib/configuration";
+  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>
+
+<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>