From 740f43e2bac7b1eee919351694905fecf9291943 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Sun, 21 Aug 2022 16:56:11 +0200
Subject: feat: Before tailwind

---
 apps/projects/src/app/pages/_layout.svelte | 228 +++++++----------------------
 1 file changed, 56 insertions(+), 172 deletions(-)

(limited to 'apps/projects/src/app/pages/_layout.svelte')

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
-- 
cgit v1.3