From 70347722fa1f959a5b224ed43b6b64bf289f36cf Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Sun, 2 Oct 2022 17:35:06 +0800
Subject: feat/refactor: Initial surroundings for (app) and normalise icon
 names

---
 apps/kit/src/routes/(main)/(app)/+layout.svelte    | 534 +++++++++++----------
 apps/kit/src/routes/(main)/(app)/org/+page.svelte  |   4 +
 .../src/routes/(main)/(app)/profile/+page.svelte   |   4 +
 .../src/routes/(main)/(app)/projects/+page.svelte  |   4 +
 .../src/routes/(main)/(app)/settings/+page.svelte  |   4 +
 .../src/routes/(main)/(app)/tickets/+page.svelte   |   4 +
 apps/kit/src/routes/(main)/(app)/todo/+page.svelte |   4 +
 apps/kit/src/routes/(main)/(app)/wiki/+page.svelte |   4 +
 apps/kit/src/routes/(main)/+layout.svelte          |  26 +
 9 files changed, 328 insertions(+), 260 deletions(-)
 create mode 100644 apps/kit/src/routes/(main)/(app)/org/+page.svelte
 create mode 100644 apps/kit/src/routes/(main)/(app)/profile/+page.svelte
 create mode 100644 apps/kit/src/routes/(main)/(app)/projects/+page.svelte
 create mode 100644 apps/kit/src/routes/(main)/(app)/settings/+page.svelte
 create mode 100644 apps/kit/src/routes/(main)/(app)/tickets/+page.svelte
 create mode 100644 apps/kit/src/routes/(main)/(app)/todo/+page.svelte
 create mode 100644 apps/kit/src/routes/(main)/(app)/wiki/+page.svelte

(limited to 'apps/kit/src/routes')

diff --git a/apps/kit/src/routes/(main)/(app)/+layout.svelte b/apps/kit/src/routes/(main)/(app)/+layout.svelte
index b69341c..6660c53 100644
--- a/apps/kit/src/routes/(main)/(app)/+layout.svelte
+++ b/apps/kit/src/routes/(main)/(app)/+layout.svelte
@@ -1,283 +1,297 @@
 <script lang="ts">
-    import LL from "$lib/i18n/i18n-svelte";
-    import {
-        Dialog,
-        TransitionChild,
-        TransitionRoot,
-    } from "@rgossiaux/svelte-headlessui";
-    import {
-        MenuIcon,
-        HomeIcon,
-        DatabaseIcon,
-        AdjustmentsIcon,
-    } from "$lib/components/icons";
+  import {
+    ChevronUpDownIcon,
+    MagnifyingGlassIcon,
+    Bars3CenterLeftIcon,
+    XMarkIcon,
+    HomeIcon,
+    MegaphoneIcon,
+    FolderOpenIcon,
+    QueueListIcon,
+    CalendarIcon,
+  } from "$lib/components/icons";
+  import { Dialog, Menu, MenuButton, MenuItem, MenuItems, Transition, TransitionChild, TransitionRoot } from "@rgossiaux/svelte-headlessui";
+  import { DialogPanel } from "@developermuch/dev-svelte-headlessui";
+  import type { ISession } from "$lib/models/ISession";
+  import { Input } from "$lib/components";
+  import { end_session } from "$lib/session";
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
 
-    let online = true;
-    let sidebarIsOpen = false;
-    const username = "dumb";
+  const session = {
+    profile: {
+      username: "Brukernavn",
+      displayName: "epost@adresse.no",
+    },
+  } as ISession;
 
-    const navigations = [
-        {
-            name: "Home",
-            icon: HomeIcon,
-        },
-        {
-            name: "Data",
-            icon: DatabaseIcon,
-        },
-        {
-            name: "Settings",
-            icon: AdjustmentsIcon,
-        },
-    ];
+  let sidebarOpen = false;
+  let sidebarSearchValue: string | undefined;
+
+  function signOut() {
+    end_session(() => goto("/sign-in"));
+  }
+
+  const navigationItems = [
+    {
+      href: "/home",
+      name: "Home",
+      icon: HomeIcon,
+    },
+    {
+      href: "/projects",
+      name: "Projects",
+      icon: CalendarIcon,
+    },
+    {
+      href: "/tickets",
+      name: "Tickets",
+      icon: MegaphoneIcon,
+    },
+    {
+      href: "/todo",
+      name: "Todo",
+      icon: QueueListIcon,
+    },
+    {
+      href: "/wiki",
+      name: "Wiki",
+      icon: FolderOpenIcon,
+    },
+  ];
 </script>
 
-<svelte:window bind:online />
-{#if !online}
-    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
-        <div class="flex">
-            <div class="flex-shrink-0">
-                <svg
-                    class="h-5 w-5 text-yellow-400"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                >
-                    <path
-                        fill-rule="evenodd"
-                        d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                        clip-rule="evenodd"
-                    />
-                </svg>
-            </div>
-            <div class="ml-3">
-                <p class="text-sm text-yellow-700">
-                    You seem to be offline, please check your internet
-                    connection.
-                </p>
-            </div>
-        </div>
-    </div>
-{/if}
-<div class="h-full flex">
-    <TransitionRoot show={sidebarIsOpen}>
-        <Dialog
-            class="relative z-40 lg:hidden"
-            on:close={() => (sidebarIsOpen = !sidebarIsOpen)}
+<div class="min-h-full">
+  <!-- Mobile sidebar -->
+  <TransitionRoot show={sidebarOpen}>
+    <Dialog as="div" class="relative z-40 lg:hidden" on:close={() => (sidebarOpen = false)}>
+      <TransitionChild
+        as="div"
+        enter="transition-opacity ease-linear duration-300"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition-opacity ease-linear duration-300"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <div class="fixed inset-0 bg-gray-600 bg-opacity-75" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 z-40 flex">
+        <TransitionChild
+          as="div"
+          enter="transition ease-in-out duration-300 transform"
+          enterFrom="-translate-x-full"
+          enterTo="translate-x-0"
+          leave="transition ease-in-out duration-300 transform"
+          leaveFrom="translate-x-0"
+          leaveTo="-translate-x-full"
         >
+          <DialogPanel class="relative flex w-full max-w-xs flex-1 flex-col bg-white pt-5 pb-4">
             <TransitionChild
-                enter="transition-opacity ease-linear duration-300"
-                enterFrom="opacity-0"
-                enterTo="opacity-100"
-                leave="transition-opacity ease-linear duration-300"
-                leaveFrom="opacity-100"
-                leaveTo="opacity-0"
+              as="div"
+              enter="ease-in-out duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in-out duration-300"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
             >
-                <div class="fixed inset-0 bg-gray-600 bg-opacity-75" />
-            </TransitionChild>
-
-            <div class="fixed inset-0 flex z-40">
-                <TransitionChild
-                    enter="transition ease-in-out duration-300 transform"
-                    enterFrom="-translate-x-full"
-                    enterTo="translate-x-0"
-                    leave="transition ease-in-out duration-300 transform"
-                    leaveFrom="translate-x-0"
-                    leaveTo="-translate-x-full"
+              <div class="absolute top-0 right-0 -mr-12 pt-2">
+                <button
+                  type="button"
+                  class="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+                  on:click={() => (sidebarOpen = false)}
                 >
-                    <!-- <DialogPanel
-                        class="relative flex-1 flex flex-col max-w-xs w-full bg-white focus:outline-none"
+                  <span class="sr-only">Close sidebar</span>
+                  <XMarkIcon class="text-white" aria-hidden="true" />
+                </button>
+              </div>
+            </TransitionChild>
+            <div class="mt-5 h-0 flex-1 overflow-y-auto">
+              <nav class="px-2">
+                <div class="space-y-1">
+                  {#each navigationItems as item}
+                    {@const current = $page.url.pathname.startsWith(item.href)}
+                    <a
+                      href={item.href}
+                      aria-current={current ? "page" : undefined}
+                      class="group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md
+                      {current ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'}"
                     >
-                        <TransitionChild
-                            enter="ease-in-out duration-300"
-                            enterFrom="opacity-0"
-                            enterTo="opacity-100"
-                            leave="ease-in-out duration-300"
-                            leaveFrom="opacity-100"
-                            leaveTo="opacity-0"
-                        >
-                            <div class="absolute top-0 right-0 -mr-12 pt-2">
-                                <button
-                                    type="button"
-                                    class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
-                                    on:click={() => (sidebarIsOpen = false)}
-                                >
-                                    <span class="sr-only">Close sidebar</span>
-                                    <XIcon
-                                        class="text-white"
-                                        aria-hidden="true"
-                                    />
-                                </button>
-                            </div>
-                        </TransitionChild>
-                        <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
-                            <div class="flex-shrink-0 flex items-center px-4">
-                                <img
-                                    class="h-8 w-auto"
-                                    src="https://tailwindui.com/img/logos/workflow-mark.svg?color=indigo&shade=600"
-                                    alt="Workflow"
-                                />
-                            </div>
-                            <nav aria-label="Sidebar" class="mt-5">
-                                <div class="px-2 space-y-1">
-                                    {#each navigations as item (item.name)}
-                                        <a
-                                            href={item.href}
-                                            class="{item.current
-                                                ? 'bg-gray-100 text-gray-900'
-                                                : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'} group flex items-center px-2 py-2 text-base font-medium rounded-md"
-                                        >
-                                            <svelte:component
-                                                this={item.icon}
-                                                class="{item.current
-                                                    ? 'text-gray-500'
-                                                    : 'text-gray-400 group-hover:text-gray-500'} mr-4 h-6 w-6"
-                                                aria-hidden="true"
-                                            />
-                                            {item.name}
-                                        </a>
-                                    {/each}
-                                </div>
-                            </nav>
-                        </div>
-                        <div
-                            class="flex-shrink-0 flex border-t border-gray-200 p-4"
-                        >
-                            <a href="#" class="flex-shrink-0 group block">
-                                <div class="flex items-center">
-                                    <div>
-                                        <img
-                                            class="inline-block h-10 w-10 rounded-full"
-                                            src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80"
-                                            alt=""
-                                        />
-                                    </div>
-                                    <div class="ml-3">
-                                        <p
-                                            class="text-base font-medium text-gray-700 group-hover:text-gray-900"
-                                        >
-                                            {username}
-                                        </p>
-                                        <p
-                                            class="text-sm font-medium text-gray-500 group-hover:text-gray-700"
-                                        >
-                                            {$LL.nav.usermenu.profileTitle()}
-                                        </p>
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-                    </DialogPanel> -->
-                </TransitionChild>
-                <div class="flex-shrink-0 w-14" aria-hidden="true">
-                    <!--{/* Force sidebar to shrink to fit close icon */}-->
+                      <svelte:component
+                        this={item.icon}
+                        class="mr-3 flex-shrink-0 h-6 w-6 {current ? 'text-gray-500' : 'text-gray-400 group-hover:text-gray-500'}"
+                        aria-hidden="true"
+                      />
+                      {item.name}
+                    </a>
+                  {/each}
                 </div>
+              </nav>
             </div>
-        </Dialog>
-    </TransitionRoot>
+          </DialogPanel>
+        </TransitionChild>
+        <div class="w-14 flex-shrink-0" aria-hidden="true">
+          <!-- Dummy element to force sidebar to shrink to fit close icon -->
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
 
-    <!--{/* Static sidebar for desktop */}-->
-    <div class="hidden lg:flex lg:flex-shrink-0">
-        <div class="flex flex-col w-64">
-            <!--{/* Sidebar component, swap this element with another sidebar if you like */}-->
-            <div
-                class="flex-1 flex flex-col min-h-0 border-r border-gray-200 bg-gray-100"
-            >
-                <div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
-                    <div class="flex items-center flex-shrink-0 px-4">
-                        <img
-                            class="h-8 w-auto"
-                            src="https://tailwindui.com/img/logos/workflow-mark.svg?color=indigo&shade=600"
-                            alt="Workflow"
-                        />
-                    </div>
-                    <nav class="mt-5 flex-1" aria-label="Sidebar">
-                        <div class="px-2 space-y-1">
-                            {#each navigations as item (item.name)}
-                                <a
-                                    key={item.name}
-                                    href={item.href}
-                                    class="{item.current
-                                        ? 'bg-gray-200 text-gray-900'
-                                        : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'} group flex items-center px-2 py-2 text-sm font-medium rounded-md"
-                                >
-                                    <svelte:component
-                                        this={item.icon}
-                                        class="{item.current
-                                            ? 'text-gray-500'
-                                            : 'text-gray-400 group-hover:text-gray-500'} mr-3 h-6 w-6"
-                                        aria-hidden="true"
-                                    />
-                                    {item.name}
-                                </a>
-                            {/each}
-                        </div>
-                    </nav>
-                </div>
-                <div class="flex-shrink-0 flex border-t border-gray-200 p-4">
-                    <a href="#" class="flex-shrink-0 w-full group block">
-                        <div class="flex items-center">
-                            <div>
-                                <img
-                                    class="inline-block h-9 w-9 rounded-full"
-                                    src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80"
-                                    alt=""
-                                />
-                            </div>
-                            <div class="ml-3">
-                                <p
-                                    class="text-base font-medium text-gray-700 group-hover:text-gray-900"
-                                >
-                                    {username}
-                                </p>
-                                <p
-                                    class="text-sm font-medium text-gray-500 group-hover:text-gray-700"
-                                >
-                                    {$LL.nav.usermenu.profileTitle()}
-                                </p>
-                            </div>
-                        </div>
-                    </a>
-                </div>
+  <!-- Static sidebar for desktop -->
+  <div class="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col lg:border-r lg:border-gray-200 lg:bg-gray-100 lg:pb-4">
+    <div class="flex h-0 flex-1 p-3 flex-col overflow-y-auto">
+      <!-- User account dropdown -->
+      <Menu class="relative inline-block text-left">
+        <MenuButton
+          class="group w-full rounded-md bg-gray-100 px-3.5 py-2 text-left text-sm font-medium text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+        >
+          <span class="flex w-full items-center justify-between">
+            <span class="flex min-w-0 items-center justify-between space-x-3">
+              <span class="flex min-w-0 flex-1 flex-col">
+                <span class="truncate text-sm font-medium text-gray-900">
+                  {session.profile.username}
+                </span>
+                <span class="truncate text-sm text-gray-500">{session.profile.displayName}</span>
+              </span>
+            </span>
+            <ChevronUpDownIcon class="flex-shrink-0 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />
+          </span>
+        </MenuButton>
+        <Transition
+          leave="transition ease-in duration-75"
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+          as="div"
+        >
+          <MenuItems
+            class="absolute right-0 left-0 z-10 mt-1 origin-top divide-y divide-gray-200 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+          >
+            <div class="py-1">
+              <MenuItem>
+                <a href="/profile" class="text-gray-700 block px-4 py-2 text-sm hover:text-gray-900 hover:bg-gray-100"> View profile </a>
+              </MenuItem>
+              <MenuItem>
+                <a href="/settings" class="text-gray-700 block px-4 py-2 text-sm hover:text-gray-900 hover:bg-gray-100"> Settings </a>
+              </MenuItem>
             </div>
+            <div class="py-1">
+              <MenuItem>
+                <span
+                  on:click={() => signOut()}
+                  class="text-gray-700 block px-4 py-2 text-sm hover:bg-red-200 hover:text-red-900 cursor-pointer"
+                >
+                  Sign out
+                </span>
+              </MenuItem>
+            </div>
+          </MenuItems>
+        </Transition>
+      </Menu>
+      <!-- Sidebar Search -->
+      <div class="mt-3">
+        <label for="search" class="sr-only">Search</label>
+        <div class="relative mt-1 rounded-md shadow-sm">
+          <Input type="search" name="search" icon={MagnifyingGlassIcon} placeholder="Search" bind:value={sidebarSearchValue} />
         </div>
-    </div>
-    <div class="flex flex-col min-w-0 flex-1 overflow-hidden">
-        <div class="lg:hidden">
-            <div
-                class="flex items-center justify-between bg-gray-50 border-b border-gray-200 px-4 py-1.5"
+      </div>
+      <!-- Navigation -->
+      <nav class="mt-5">
+        <div class="space-y-1">
+          {#each navigationItems as item}
+            {@const current = $page.url.pathname.startsWith(item.href)}
+            <a
+              href={item.href}
+              aria-current={current ? "page" : undefined}
+              class="group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md
+                      {current ? 'bg-gray-200 text-gray-900' : 'text-gray-700 hover:text-gray-900 hover:bg-gray-50'}"
             >
-                <div>
-                    <button
-                        type="button"
-                        class="-mr-3 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900"
-                        on:click={() => (sidebarIsOpen = true)}
-                    >
-                        <span class="sr-only">Open sidebar</span>
-                        <MenuIcon aria-hidden="true" />
-                    </button>
-                </div>
+              <svelte:component
+                this={item.icon}
+                class="mr-3 flex-shrink-0 h-6 w-6 {current ? 'text-gray-500' : 'text-gray-400 group-hover:text-gray-500'}"
+                aria-hidden="true"
+              />
+              {item.name}
+            </a>
+          {/each}
+        </div>
+      </nav>
+    </div>
+  </div>
+
+  <!-- Main column -->
+  <div class="flex flex-col lg:pl-64">
+    <!-- Search header -->
+    <div class="sticky top-0 z-10 flex h-16 flex-shrink-0 border-b border-gray-200 bg-white lg:hidden">
+      <button
+        type="button"
+        class="border-r border-gray-200 px-4 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 lg:hidden"
+        on:click={() => (sidebarOpen = true)}
+      >
+        <span class="sr-only">Open sidebar</span>
+        <Bars3CenterLeftIcon aria-hidden="true" />
+      </button>
+      <div class="flex flex-1 justify-between px-4 sm:px-6 lg:px-8">
+        <div class="flex flex-1">
+          <form class="flex w-full md:ml-0" action="#" method="GET">
+            <label for="search-field" class="sr-only">Search</label>
+            <div class="relative w-full text-gray-400 focus-within:text-gray-600">
+              <Input
+                bind:value={sidebarSearchValue}
+                icon={MagnifyingGlassIcon}
+                id="search-field"
+                name="search-field"
+                placeholder="Search"
+                type="search"
+              />
             </div>
+          </form>
         </div>
-        <div class="flex-1 relative z-0 flex overflow-hidden">
-            <main
-                class="flex-1 relative z-0 overflow-y-auto focus:outline-none"
-            >
-                <!--
-                    MAIN CONTENT
-                -->
-                <slot />
-            </main>
-            <aside
-                class="hidden relative xl:flex xl:flex-col flex-shrink-0 w-96 border-l border-gray-200 overflow-y-auto"
+        <div class="flex items-center">
+          <!-- Profile dropdown -->
+          <Menu as="div" class="relative ml-3">
+            <div>
+              <MenuButton
+                class="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2"
+              >
+                <span class="sr-only">Open user menu</span>
+              </MenuButton>
+            </div>
+            <Transition
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="transform opacity-100 scale-100"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+              as="div"
             >
-                <!--{/* Start secondary column (hidden on smaller screens) */}
-                <div class="absolute inset-0 py-6 px-4 sm:px-6 lg:px-8">
-                    <div class="h-full border-2 border-gray-200 border-dashed rounded-lg" />
+              <MenuItems
+                class="absolute right-0 z-10 mt-2 w-48 origin-top-right divide-y divide-gray-200 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+              >
+                <div class="py-1">
+                  <MenuItem>
+                    <a href="/profile" class="text-gray-700 block px-4 py-2 text-sm"> View profile </a>
+                  </MenuItem>
+                  <MenuItem>
+                    <a href="/settings" class="text-gray-700 block px-4 py-2 text-sm hover:text-gray-900 hover:bg-gray-100"> Settings </a>
+                  </MenuItem>
+                  <div class="py-1">
+                    <MenuItem>
+                      <span on:click={() => signOut()} class="text-gray-700 block px-4 py-2 text-sm"> Sign out </span>
+                    </MenuItem>
+                  </div>
                 </div>
-                {/* End secondary column */}-->
-            </aside>
+              </MenuItems>
+            </Transition>
+          </Menu>
         </div>
+      </div>
     </div>
+    <main class="flex-1">
+      <slot />
+    </main>
+  </div>
 </div>
diff --git a/apps/kit/src/routes/(main)/(app)/org/+page.svelte b/apps/kit/src/routes/(main)/(app)/org/+page.svelte
new file mode 100644
index 0000000..429ec25
--- /dev/null
+++ b/apps/kit/src/routes/(main)/(app)/org/+page.svelte
@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<h1>$ORGNAME</h1>
diff --git a/apps/kit/src/routes/(main)/(app)/profile/+page.svelte b/apps/kit/src/routes/(main)/(app)/profile/+page.svelte
new file mode 100644
index 0000000..7c6eb3e
--- /dev/null
+++ b/apps/kit/src/routes/(main)/(app)/profile/+page.svelte
@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<h1>Hi, Ivar</h1>
diff --git a/apps/kit/src/routes/(main)/(app)/projects/+page.svelte b/apps/kit/src/routes/(main)/(app)/projects/+page.svelte
new file mode 100644
index 0000000..6413e1d
--- /dev/null
+++ b/apps/kit/src/routes/(main)/(app)/projects/+page.svelte
@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<h1>Projects</h1>
diff --git a/apps/kit/src/routes/(main)/(app)/settings/+page.svelte b/apps/kit/src/routes/(main)/(app)/settings/+page.svelte
new file mode 100644
index 0000000..ae6d403
--- /dev/null
+++ b/apps/kit/src/routes/(main)/(app)/settings/+page.svelte
@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<h1>Settings</h1>
diff --git a/apps/kit/src/routes/(main)/(app)/tickets/+page.svelte b/apps/kit/src/routes/(main)/(app)/tickets/+page.svelte
new file mode 100644
index 0000000..2a4792b
--- /dev/null
+++ b/apps/kit/src/routes/(main)/(app)/tickets/+page.svelte
@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<h1>Tickets</h1>
diff --git a/apps/kit/src/routes/(main)/(app)/todo/+page.svelte b/apps/kit/src/routes/(main)/(app)/todo/+page.svelte
new file mode 100644
index 0000000..e29f263
--- /dev/null
+++ b/apps/kit/src/routes/(main)/(app)/todo/+page.svelte
@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<h1>Todo</h1>
diff --git a/apps/kit/src/routes/(main)/(app)/wiki/+page.svelte b/apps/kit/src/routes/(main)/(app)/wiki/+page.svelte
new file mode 100644
index 0000000..1762d43
--- /dev/null
+++ b/apps/kit/src/routes/(main)/(app)/wiki/+page.svelte
@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<h1>Wiki</h1>
diff --git a/apps/kit/src/routes/(main)/+layout.svelte b/apps/kit/src/routes/(main)/+layout.svelte
index 9787e17..5354f02 100644
--- a/apps/kit/src/routes/(main)/+layout.svelte
+++ b/apps/kit/src/routes/(main)/+layout.svelte
@@ -3,9 +3,35 @@
     import { setLocale } from "$lib/i18n/i18n-svelte";
     import type { LayoutData } from "./$types";
 
+    let online = true;
     export let data: LayoutData;
 
     setLocale(data.locale);
 </script>
 
+<svelte:window bind:online />
+{#if !online}
+    <div class="bg-yellow-50 relative z-50 border-yellow-400 p-4">
+        <div class="flex">
+            <div class="flex-shrink-0">
+                <svg
+                    class="h-5 w-5 text-yellow-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                >
+                    <path
+                        fill-rule="evenodd"
+                        d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                        clip-rule="evenodd"
+                    />
+                </svg>
+            </div>
+            <div class="ml-3">
+                <p class="text-sm text-yellow-700">You seem to be offline, please check your internet connection.</p>
+            </div>
+        </div>
+    </div>
+{/if}
 <slot />
-- 
cgit v1.3