From 3c792b57d34454ead87863d01ca791fec46d8f7b Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Wed, 3 Apr 2024 16:45:53 -0400
Subject: [PATCH] Update MainLayout

---
 src/lib/components/MainLayout.svelte        | 215 ++++++++++----------
 src/lib/components/accounts/OrgMenu.svelte  |  11 +-
 src/lib/components/accounts/UserMenu.svelte |   8 +-
 3 files changed, 116 insertions(+), 118 deletions(-)

diff --git a/src/lib/components/MainLayout.svelte b/src/lib/components/MainLayout.svelte
index 3e8f1324e..dcb70898c 100644
--- a/src/lib/components/MainLayout.svelte
+++ b/src/lib/components/MainLayout.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
   import { getContext } from "svelte";
-  import OrgMenu from "./OrgMenu.svelte";
   import Button from "./common/Button.svelte";
   import Logo from "./common/Logo.svelte";
   import SignedIn from "./common/SignedIn.svelte";
   import { SidebarCollapse16, SidebarExpand16 } from "svelte-octicons";
   import type { Writable } from "svelte/store";
-  import type { User } from "@/api/types";
+  import { type Org, type User } from "@/api/types";
   import { SIGN_IN_URL } from "@/config/config";
+  import Flex from "./common/Flex.svelte";
+  import UserMenu from "./accounts/UserMenu.svelte";
+  import OrgMenu from "./accounts/OrgMenu.svelte";
 
   export let modal: boolean = false;
   export let basement: "left" | "right" | null = null;
@@ -35,57 +37,72 @@
   }
 
   const me = getContext<Writable<User>>("me");
+  const org = getContext<Writable<Org>>("org");
+
+  console.log(me, org);
 </script>
 
 <div class="container">
-  <nav class="small">
-    <Button mode="ghost" on:click={openPanel("navigation")}>
-      <SidebarCollapse16 />
-    </Button>
+  <header>
+    {#if $$slots.navigation}
+      <div class="small openPane">
+        <Button mode="ghost" on:click={openPanel("navigation")}>
+          <SidebarCollapse16 />
+        </Button>
+      </div>
+    {/if}
     <a href="/" class="logo"><Logo /></a>
-    <Button mode="ghost" on:click={openPanel("action")}>
-      <SidebarExpand16 />
-    </Button>
-  </nav>
-  <nav
-    class="navigation left large"
-    class:active={panel === "navigation"}
-    id="navigation"
-  >
-    <header class="header">
-      <div class="small closePane">
-        <Button mode="ghost" on:click={closePanel}>
+    <div class="breadcrumbs"></div>
+    <SignedIn>
+      <Flex>
+        <OrgMenu org={$org} />
+        <UserMenu user={$me} />
+      </Flex>
+      <Button slot="signedOut" mode="primary" href={SIGN_IN_URL}>
+        Sign In
+      </Button>
+    </SignedIn>
+    {#if $$slots.action}
+      <div class="small openPane">
+        <Button mode="ghost" on:click={openPanel("action")}>
           <SidebarExpand16 />
         </Button>
       </div>
-      <a href="/" class="logo"><Logo /></a>
-    </header>
-    <main><slot name="navigation" /></main>
-  </nav>
-  <main class="content">
-    <slot name="content" />
+    {/if}
+  </header>
+
+  <main>
+    {#if $$slots.navigation}
+      <nav
+        class="navigation left"
+        class:active={panel === "navigation"}
+        id="navigation"
+      >
+        <div class="small closePane">
+          <Button mode="ghost" on:click={closePanel}>
+            <SidebarExpand16 />
+          </Button>
+        </div>
+        <slot name="navigation" />
+      </nav>
+    {/if}
+
+    <article class="content">
+      <slot name="content" />
+    </article>
+
+    {#if $$slots.action}
+      <nav class="action right" class:active={panel === "action"} id="action">
+        <div class="small closePane">
+          <Button mode="ghost" on:click={closePanel}>
+            <SidebarCollapse16 />
+          </Button>
+        </div>
+        <slot name="action" />
+      </nav>
+    {/if}
   </main>
-  <nav class="action right large" class:active={panel === "action"} id="action">
-    <header class="header">
-      <SignedIn>
-        <OrgMenu />
-        <Button slot="signedOut" mode="primary" href={SIGN_IN_URL}
-          >Sign In</Button
-        >
-      </SignedIn>
-      <div class="small closePane">
-        <Button mode="ghost" on:click={closePanel}>
-          <SidebarCollapse16 />
-        </Button>
-      </div>
-    </header>
-    <main><slot name="action" /></main>
-    <footer>
-      <SignedIn>{$me.name}</SignedIn>
-      <p>Language</p>
-      <p>Help</p>
-    </footer>
-  </nav>
+
   <div
     class="small overlay"
     class:active={panel !== null}
@@ -98,59 +115,74 @@
 <style>
   .container {
     display: flex;
+    flex-direction: column;
     width: 100vw;
     height: 100vh;
     gap: 0;
     flex-shrink: 0;
     background: var(--gray-1, #f5f6f7);
   }
+
   header {
     display: flex;
-    padding: 1rem;
-    gap: 0.5rem;
-    align-items: flex-start;
-    align-self: stretch;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--white, #ffffff);
+    border-bottom: 1px solid var(--gray-2, #d8dee2);
+    box-shadow: var(--shadow);
+    flex: 0 0 0;
+    padding: 0 1rem;
+    z-index: 1;
   }
+
   main {
-    display: flex;
-    flex-direction: column;
-    padding: 1rem;
-    gap: 2rem;
     flex: 1 0 0;
-    max-height: 100%;
-    overflow-y: auto;
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
   }
+
   nav {
     flex: 1 0 0;
     min-width: 16rem;
     max-width: 18rem;
+    max-height: 100%;
+    overflow-y: auto;
     display: flex;
     flex-direction: column;
     position: relative;
+    padding: 1rem;
+    gap: 1rem;
+  }
+
+  article {
+    flex: 1 0 0;
+    display: flex;
+    flex-direction: row;
+    max-height: 100%;
+    max-width: 100%;
+    overflow-y: auto;
   }
+
   .logo {
-    height: 2rem;
+    height: 1.5rem;
     width: auto;
+    padding: 0 0.5rem;
   }
+
+  .breadcrumbs {
+    flex: 1 0 0;
+  }
+
   .navigation {
     border-right: 1px solid var(--gray-2, #d8dee2);
   }
+
   .action {
     border-left: 1px solid var(--gray-2, #d8dee2);
   }
-  .action footer {
-    display: flex;
-    width: 100%;
-    position: sticky;
-    bottom: 0;
-    padding: 1rem;
-    z-index: 1;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.875rem;
 
-    background: var(--gray-1, #f5f6f7);
-  }
   .content {
     padding: 0;
   }
@@ -165,35 +197,14 @@
     display: none;
   }
 
-  nav.small {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.5rem;
-    flex: 0 0 0;
-    max-width: unset;
-
-    border-bottom: 1px solid var(--gray-2, #d8dee2);
-  }
-
-  nav.small .logo {
-    height: 1.5rem;
-    width: auto;
-  }
-
-  .small.overlay {
-    display: block;
-    visibility: hidden;
-  }
-
   @media (max-width: 64rem) {
-    .container {
-      flex-direction: column;
-    }
     .small {
       display: block;
     }
-    nav.large {
+    header {
+      gap: 1rem;
+    }
+    nav {
       min-width: 33vh;
       max-width: 100vh;
       display: flex;
@@ -205,35 +216,25 @@
       transition: transform 0.25s ease-in-out;
       overflow: hidden;
     }
-    nav.large.right {
+    nav.right {
       transform: translateX(100%);
       right: 0;
       border-top-left-radius: 1rem;
       border-bottom-left-radius: 1rem;
     }
-    nav.large.left {
+    nav.left {
       left: 0;
       transform: translateX(-100%);
       border-top-right-radius: 1rem;
       border-bottom-right-radius: 1rem;
     }
-    nav.large.active {
+    nav.active {
       display: flex;
       transform: translateX(0);
       transition: transform 0.25s ease-in-out;
     }
-    nav.large header {
-      align-items: center;
-      flex-direction: row-reverse;
-      padding: 0.5rem;
-    }
-    nav.large .logo {
-      display: none;
-    }
-    nav.small {
-      display: flex;
-    }
     .small.overlay {
+      visibility: hidden;
       position: fixed;
       z-index: 1;
       background: var(--gray-5, #233944);
diff --git a/src/lib/components/accounts/OrgMenu.svelte b/src/lib/components/accounts/OrgMenu.svelte
index 5509bef24..7d3b9909a 100644
--- a/src/lib/components/accounts/OrgMenu.svelte
+++ b/src/lib/components/accounts/OrgMenu.svelte
@@ -63,18 +63,9 @@
     width: 2rem;
   }
 
-  /* Small styles */
   @media (max-width: 64rem) {
-    .avatar {
-      height: 1.5rem;
-      width: 1.5rem;
-    }
     .name {
-      font-size: var(--font-l, 1.25rem);
-    }
-    .premium {
-      height: 1.5rem;
-      width: 1.5rem;
+      display: none;
     }
   }
 </style>
diff --git a/src/lib/components/accounts/UserMenu.svelte b/src/lib/components/accounts/UserMenu.svelte
index 95903e69b..32a977dff 100644
--- a/src/lib/components/accounts/UserMenu.svelte
+++ b/src/lib/components/accounts/UserMenu.svelte
@@ -38,7 +38,7 @@
 <Dropdown id={dropdownId} position="right">
   <SidebarItem slot="title">
     <img src={user.avatar_url} alt="Avatar" class="avatar" />
-    {user.name}
+    <span class="name">{user.name}</span>
     <div class="dropdownArrow"><ChevronDown16 /></div>
   </SidebarItem>
   <Menu>
@@ -69,4 +69,10 @@
     display: flex;
     align-items: center;
   }
+
+  @media (max-width: 64rem) {
+    .name {
+      display: none;
+    }
+  }
 </style>