latest from desktop

3 files changed, 152 insertions, 49 deletions

diff --git a/apps/projects/src/_assets/projects.png b/apps/projects/src/_assets/projects.png
new file mode 100644
index 0000000..e49191f
--- /dev/null
+++ b/apps/projects/src/_assets/projects.png
diff --git a/apps/projects/src/app/index.scss b/apps/projects/src/app/index.scss
index 0892d63..b47151f 100644
--- a/apps/projects/src/app/index.scss
+++ b/apps/projects/src/app/index.scss
@@ -37,3 +37,4 @@
 @use '../../web-shared/src/styles/components/menu';
 @use '../../web-shared/src/styles/components/user-menu';
 @use '../../web-shared/src/styles/components/light-dark-switch';
+@use '../../web-shared/src/styles/components/side-navigation';
diff --git a/apps/projects/src/app/pages/_layout.svelte b/apps/projects/src/app/pages/_layout.svelte
index f725397..594fe9e 100644
--- a/apps/projects/src/app/pages/_layout.svelte
+++ b/apps/projects/src/app/pages/_layout.svelte
@@ -25,56 +25,158 @@
 <ProfileModal bind:functions={ProfileModalFunctions}/>
 <BlowoutToolbelt/>
 
-<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">
-    <div class="tabs-nav-v2 justify-between">
-        <div class="tab-v2">
-            <div class="tab-v2">
-                <a href="/home"
-                   use:link
-                   class="tabs-nav-v2__item {($location === '/' || $location.startsWith('/home')) ? 'tabs-nav-v2__item--selected' : ''}">{$LL.nav.home()}</a>
-            </div>
-            <div class="tab-v2">
-                <a href="/data"
-                   use:link
-                   class="tabs-nav-v2__item {$location.startsWith('/data') ? 'tabs-nav-v2__item--selected' : ''}">{$LL.nav.data()}</a>
-            </div>
-            <div class="tab-v2">
-                <a href="/settings"
-                   use:link
-                   class="tabs-nav-v2__item {$location.startsWith('/settings') ? 'tabs-nav-v2__item--selected' : ''}">{$LL.nav.settings()}</a>
+<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>
+                </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>
         </div>
-        <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>
+    </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>
-    </div>
-</nav>
+    </nav>
 
-<main class="container max-width-xl">
-    <slot/>
-</main>
+    <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>