From 3818cb49c759c1fe82c002a527d0f41e64baba14 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Thu, 29 Sep 2022 18:09:02 +0800
Subject: feat: Make buildable

---
 apps/kit/src/routes/(main)/(app)/+layout.svelte | 234 +++++++++++++++---------
 1 file changed, 151 insertions(+), 83 deletions(-)

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

diff --git a/apps/kit/src/routes/(main)/(app)/+layout.svelte b/apps/kit/src/routes/(main)/(app)/+layout.svelte
index 3f60af3..b69341c 100644
--- a/apps/kit/src/routes/(main)/(app)/+layout.svelte
+++ b/apps/kit/src/routes/(main)/(app)/+layout.svelte
@@ -1,45 +1,60 @@
-<svelte:options immutable={true}/>
-<svelte:window bind:online={online}/>
 <script lang="ts">
-    import LL, {setLocale} from "$lib/i18n/i18n-svelte";
-    import {Dialog, TransitionChild, TransitionRoot} from '@rgossiaux/svelte-headlessui';
-    import {XIcon, MenuIcon, HomeIcon, DatabaseIcon, AdjustmentsIcon} from "$lib/components/icons";
+    import LL from "$lib/i18n/i18n-svelte";
+    import {
+        Dialog,
+        TransitionChild,
+        TransitionRoot,
+    } from "@rgossiaux/svelte-headlessui";
+    import {
+        MenuIcon,
+        HomeIcon,
+        DatabaseIcon,
+        AdjustmentsIcon,
+    } from "$lib/components/icons";
 
     let online = true;
     let sidebarIsOpen = false;
     const username = "dumb";
-    
-    setLocale("nb");
-    
+
     const navigations = [
         {
             name: "Home",
-            icon: HomeIcon
+            icon: HomeIcon,
         },
         {
             name: "Data",
-            icon: DatabaseIcon
+            icon: DatabaseIcon,
         },
         {
             name: "Settings",
-            icon: AdjustmentsIcon
-        }
-    ]
+            icon: AdjustmentsIcon,
+        },
+    ];
 </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
+                    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.
+                    You seem to be offline, please check your internet
+                    connection.
                 </p>
             </div>
         </div>
@@ -47,84 +62,113 @@
 {/if}
 <div class="h-full flex">
     <TransitionRoot show={sidebarIsOpen}>
-        <Dialog class="relative z-40 lg:hidden" on:close={() => sidebarIsOpen = !sidebarIsOpen}>
+        <Dialog
+            class="relative z-40 lg:hidden"
+            on:close={() => (sidebarIsOpen = !sidebarIsOpen)}
+        >
             <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">
-                <div class="fixed inset-0 bg-gray-600 bg-opacity-75"></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 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">
-                    <DialogPanel class="relative flex-1 flex flex-col max-w-xs w-full bg-white focus:outline-none">
+                    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-1 flex flex-col max-w-xs w-full bg-white focus:outline-none"
+                    >
                         <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">
+                            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}>
+                                <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"/>
+                                    <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"
+                                <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"></svelte:component>
+                                        <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">
+                        <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=""
+                                        <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">
+                                        <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">
+                                        <p
+                                            class="text-sm font-medium text-gray-500 group-hover:text-gray-700"
+                                        >
                                             {$LL.nav.usermenu.profileTitle()}
                                         </p>
                                     </div>
                                 </div>
                             </a>
                         </div>
-                    </DialogPanel>
+                    </DialogPanel> -->
                 </TransitionChild>
                 <div class="flex-shrink-0 w-14" aria-hidden="true">
                     <!--{/* Force sidebar to shrink to fit close icon */}-->
@@ -137,23 +181,34 @@
     <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 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"
+                        <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"></svelte:component>
+                                <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}
@@ -164,16 +219,21 @@
                     <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=""
+                                <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">
+                                <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">
+                                <p
+                                    class="text-sm font-medium text-gray-500 group-hover:text-gray-700"
+                                >
                                     {$LL.nav.usermenu.profileTitle()}
                                 </p>
                             </div>
@@ -185,25 +245,33 @@
     </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
+                class="flex items-center justify-between bg-gray-50 border-b border-gray-200 px-4 py-1.5"
+            >
                 <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}>
+                    <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"/>
+                        <MenuIcon aria-hidden="true" />
                     </button>
                 </div>
             </div>
         </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
+                class="flex-1 relative z-0 overflow-y-auto focus:outline-none"
+            >
                 <!--
                     MAIN CONTENT
                 -->
-                <slot/>
+                <slot />
             </main>
-            <aside class="hidden relative xl:flex xl:flex-col flex-shrink-0 w-96 border-l border-gray-200 overflow-y-auto">
+            <aside
+                class="hidden relative xl:flex xl:flex-col flex-shrink-0 w-96 border-l border-gray-200 overflow-y-auto"
+            >
                 <!--{/* 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" />
@@ -212,4 +280,4 @@
             </aside>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
-- 
cgit v1.3