7 files changed, 95 insertions, 1 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>
diff --git a/apps/frontpage/src/routes/app.scss b/apps/frontpage/src/routes/app.scss
new file mode 100644
index 0000000..73a46ba
--- /dev/null
+++ b/apps/frontpage/src/routes/app.scss
@@ -0,0 +1,7 @@
+@use '../../web-shared/src/styles/base' as *;
+@use '../../web-shared/src/styles/custom-style/colors';
+@use '../../web-shared/src/styles/custom-style/spacing';
+@use '../../web-shared/src/styles/custom-style/shared-styles';
+@use '../../web-shared/src/styles/custom-style/typography';
+@use '../../web-shared/src/styles/custom-style/util';
+@use '../../web-shared/src/styles/components/responsive-sidebar';
diff --git a/apps/frontpage/src/routes/docs/__layout.svelte b/apps/frontpage/src/routes/docs/__layout.svelte
new file mode 100644
index 0000000..34c3139
--- /dev/null
+++ b/apps/frontpage/src/routes/docs/__layout.svelte
@@ -0,0 +1,4 @@
+<nav>
+  <a href="/">Home</a>
+</nav>
+<slot></slot>
+\ No newline at end of file
diff --git a/apps/frontpage/src/routes/docs/index.svelte b/apps/frontpage/src/routes/docs/index.svelte
new file mode 100644
index 0000000..da83065
--- /dev/null
+++ b/apps/frontpage/src/routes/docs/index.svelte
@@ -0,0 +1 @@
+<h1>Documentation</h1>
+\ No newline at end of file
diff --git a/apps/frontpage/src/routes/index.svelte b/apps/frontpage/src/routes/index.svelte
index 8038f19..ae068f6 100644
--- a/apps/frontpage/src/routes/index.svelte
+++ b/apps/frontpage/src/routes/index.svelte
@@ -1 +1 @@
-<h1>Welcome to Greatoffice</h1>
+<h1>About</h1>
diff --git a/apps/frontpage/src/routes/privacy.svelte b/apps/frontpage/src/routes/privacy.svelte
new file mode 100644
index 0000000..aaff3a9
--- /dev/null
+++ b/apps/frontpage/src/routes/privacy.svelte
@@ -0,0 +1 @@
+<h1>Privacy Policy</h1>
diff --git a/apps/frontpage/src/routes/terms.svelte b/apps/frontpage/src/routes/terms.svelte
new file mode 100644
index 0000000..d495e19
--- /dev/null
+++ b/apps/frontpage/src/routes/terms.svelte
@@ -0,0 +1 @@
+<h1>Terms of service</h1>