diff options
Diffstat (limited to 'apps/kit')
| -rw-r--r-- | apps/kit/src/routes/(main)/(app)/+layout.svelte | 234 |
1 files changed, 151 insertions, 83 deletions
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> |