diff options
Diffstat (limited to 'apps/projects/src/app/pages/_layout.svelte')
| -rw-r--r-- | apps/projects/src/app/pages/_layout.svelte | 228 |
1 files changed, 56 insertions, 172 deletions
diff --git a/apps/projects/src/app/pages/_layout.svelte b/apps/projects/src/app/pages/_layout.svelte index 594fe9e..07a4a25 100644 --- a/apps/projects/src/app/pages/_layout.svelte +++ b/apps/projects/src/app/pages/_layout.svelte @@ -1,182 +1,66 @@ <script> - import { onMount } from "svelte"; - import { location, link } from "svelte-spa-router"; - import { logout_user } from "$app/lib/services/user-service"; - import { random_string } from "$shared/lib/helpers"; - import { get_session_data } from "$shared/lib/session"; - import ProfileModal from "$app/pages/views/profile-modal.svelte"; - import { Menu, MenuItem, MenuItemSeparator } from "$shared/components/menu"; - import Button from "$shared/components/button.svelte"; - import { IconNames } from "$shared/lib/configuration"; - import LL from "$app/lib/i18n/i18n-svelte"; - import BlowoutToolbelt from "$shared/components/blowout-toolbelt.svelte"; + import {onMount} from "svelte"; + import {location, link} from "svelte-spa-router"; + import {logout_user} from "$app/lib/services/user-service"; + import {random_string} from "$shared/lib/helpers"; + import {get_session_data} from "$shared/lib/session"; + import ProfileModal from "$app/pages/views/profile-modal.svelte"; + import {Menu, MenuItem, MenuItemSeparator} from "$shared/components/menu"; + import Button from "$shared/components/button.svelte"; + import {IconNames} from "$shared/lib/configuration"; + import LL from "$app/lib/i18n/i18n-svelte"; + import BlowoutToolbelt from "$shared/components/blowout-toolbelt.svelte"; + import {NavWrapper, NavItem} from "./nav"; - let ProfileModalFunctions = {}; - let showUserMenu = false; - let userMenuTriggerNode; - const userMenuId = "__menu_" + random_string(3); - const username = get_session_data()?.profile.username; + let ProfileModalFunctions = {}; + let showUserMenu = false; + let userMenuTriggerNode; + const userMenuId = "__menu_" + random_string(3); + const username = get_session_data()?.profile.username; - onMount(() => { - userMenuTriggerNode = document.getElementById("open-user-menu"); - }); + onMount(() => { + userMenuTriggerNode = document.getElementById("open-user-menu"); + }); </script> <ProfileModal bind:functions={ProfileModalFunctions}/> <BlowoutToolbelt/> -<header class="position-sticky top-0 z-index-header bg shadow-xs padding-x-component padding-y-sm flex items-center justify-between hide@md"> - <a class="block size-32 hover:reduce-opacity" - href="#"> - <svg class="block" - viewBox="0 0 40 40"> - <circle fill="var(--color-contrast-higher)" - cx="20" - cy="20" - r="20"/> - <path d="M12.64,20.564a6.437,6.437,0,0,0-4.4,1.388S10,24.2,12.133,24.475a6.486,6.486,0,0,0,3.625-.846S14.455,20.8,12.64,20.564Z" - fill="var(--color-bg)"/> - <path d="M22.036,13.407a7.041,7.041,0,0,0-1.111-3.88s-3,1.562-3.152,3.54a6.978,6.978,0,0,0,1.739,4.688S21.851,15.73,22.036,13.407Z" - fill="var(--color-bg)"/> - <path d="M29.048,26.433a7.624,7.624,0,0,0-.321-4.122c-1.052-2.448-4.326-3.784-4.326-3.784a7.973,7.973,0,0,0-.164,5.713A3.294,3.294,0,0,0,25.451,25.6,16.016,16.016,0,0,1,14.758,10.527v-1h-2v1A17.988,17.988,0,0,0,21.19,25.746a5.859,5.859,0,0,0-2.433-.151,8.093,8.093,0,0,0-4,2.352s2.6,2.883,4.846,2.49a7.889,7.889,0,0,0,4.627-3.153,17.885,17.885,0,0,0,6.527,1.243h1v-2h-1A16.094,16.094,0,0,1,29.048,26.433Z" - fill="var(--color-bg)"/> - </svg> - </a> - - <button class="btn btn--subtle">Menu</button> -</header> - -<div class="flex@md"> - <aside class="sidebar sidebar--static@md sidebar--is-visible" - data-static-class="position-relative z-index-2 bg-dark flex flex-column"> - <div class="sidebar__panel flex-grow flex flex-column"> - <header class="sidebar__header bg padding-y-sm padding-left-md padding-right-sm border-bottom z-index-2"> - <h1 class="text-md text-truncate">Menu</h1> - - <button class="reset sidebar__close-btn"> - <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> - - <header class="display@md padding-x-xs margin-bottom-lg"> - <div class="flex items-center justify-between padding-right-xs padding-left-xxxs"> - <a class="block hover:reduce-opacity width-xl" - href="#"> - <img src="/_assets/projects.png" - alt="Projects from Greatoffice"> - </a> +<NavWrapper> + <ul slot="navigation-items"> + <NavItem to="/home" text="{$LL.nav.home()}"/> + <NavItem to="/data" text="{$LL.nav.data()}"/> + <NavItem to="/settings" text="{$LL.nav.settings()}"/> + </ul> + <div slot="navigation-footer" class="tabs-nav-v2 justify-between"> + <div class="tab-v2 padding-x-sm"> + <Button class="user-menu-control" + variant="reset" + id="open-user-menu" + on:click={() => showUserMenu = !showUserMenu} + text={username} + icon={IconNames.chevronDown} + icon_width="2rem" + icon_height="2rem" + icon_right_aligned="true" + title="{$LL.nav.usermenu.toggleTitle()}" + aria-controls="{userMenuId}" + /> + <Menu bind:show="{showUserMenu}" + trigger={userMenuTriggerNode} + id="{userMenuId}"> + <div slot="options"> + <MenuItem on:click={() => ProfileModalFunctions.open()}> + <span title="{$LL.nav.usermenu.profileTitle()}">{$LL.nav.usermenu.profile()}</span> + </MenuItem> + <MenuItemSeparator/> + <MenuItem danger="true" + on:click={() => logout_user()}> + <span title="{$LL.nav.usermenu.logoutTitle()}">{$LL.nav.usermenu.logout()}</span> + </MenuItem> </div> - </header> - - <div class="position-relative z-index-1"> - <nav class="sidenav-v4 padding-x-xs padding-bottom-xs"> - <ul> - <li class="sidenav-v4__item"> - <a href="/home" - use:link - class="sidenav-v4__link {($location === '/' || $location.startsWith('/home')) ? 'tabs-nav-v2__item--selected' : ''}">{$LL.nav.home()}</a> - </li> - <li class="sidenav-v4__item"> - <a href="/data" - use:link - class="sidenav-v4__link {$location.startsWith('/data') ? 'tabs-nav-v2__item--selected' : ''}">{$LL.nav.data()}</a> - </li> - <li class="sidenav-v4__item"> - <a href="/settings" - use:link - class="sidenav-v4__link {$location.startsWith('/settings') ? 'tabs-nav-v2__item--selected' : ''}">{$LL.nav.settings()}</a> - </li> - </ul> - </nav> - - <div class="padding-x-xs padding-bottom-sm hide@md"> - <div class="padding-x-sm"> - <div class="search-input search-input--icon-left text-md"> - <input class="search-input__input form-control" - type="search" - name="search-input" - id="search-input" - placeholder="Search..." - aria-label="Search"> - <button class="search-input__btn"> - <svg class="icon" - viewBox="0 0 20 20"><title>Submit</title> - <g fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2"> - <circle cx="8" - cy="8" - r="6"/> - <line x1="12.242" - y1="12.242" - x2="18" - y2="18"/> - </g> - </svg> - </button> - </div> - </div> - </div> - </div> - - <footer class="sidebar__footer border-top border-alpha padding-xs margin-top-auto position-sticky bottom-0 z-index-1"> - </footer> + </Menu> </div> - </aside> - - <nav class="container max-width-xl@md width-fit-content@md width-100% max-width-none margin-y-xs@md margin-bottom-xs block@md position-relative@md position-fixed z-index-fixed-element bottom-unset@md bottom-0 is-hidden"> - <div class="tabs-nav-v2 justify-between"> - <div class="tab-v2 padding-x-sm"> - <Button class="user-menu-control" - variant="reset" - id="open-user-menu" - on:click={() => showUserMenu = !showUserMenu} - text={username} - icon={IconNames.chevronDown} - icon_width="2rem" - icon_height="2rem" - icon_right_aligned="true" - title="{$LL.nav.usermenu.toggleTitle()}" - aria-controls="{userMenuId}" - /> - <Menu bind:show="{showUserMenu}" - trigger={userMenuTriggerNode} - id="{userMenuId}"> - <div slot="options"> - <MenuItem on:click={() => ProfileModalFunctions.open()}> - <span title="{$LL.nav.usermenu.profileTitle()}">{$LL.nav.usermenu.profile()}</span> - </MenuItem> - <MenuItemSeparator/> - <MenuItem danger="true" - on:click={() => logout_user()}> - <span title="{$LL.nav.usermenu.logoutTitle()}">{$LL.nav.usermenu.logout()}</span> - </MenuItem> - </div> - </Menu> - </div> - </div> - </nav> - - <main class="container max-width-xl position-relative z-index-1 flex-grow min-height-100vh position-sticky@md top-0@md height-100vh@md overflow-auto@md"> - <slot/> - </main> -</div> + </div> + <slot slot="main-content"/> +</NavWrapper>
\ No newline at end of file |