From e4bc23702eb73c7f17ee794f1c3af0521d9a9f1d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 26 Feb 2025 15:35:52 +0000
Subject: [PATCH] Multiple style improvements to nav and links

---
 .../client/src/components/app/Layout.svelte   | 100 +++++++++++-------
 .../client/src/components/app/NavItem.svelte  |  38 +++++--
 2 files changed, 89 insertions(+), 49 deletions(-)

diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 04dbb9efda..41bcb447f6 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -4,6 +4,7 @@
   import { Heading, Icon, clickOutside } from "@budibase/bbui"
   import { Constants } from "@budibase/frontend-core"
   import NavItem from "./NavItem.svelte"
+  import { UserAvatar } from "@budibase/frontend-core"
 
   const sdk = getContext("sdk")
   const {
@@ -13,7 +14,7 @@
     builderStore,
     sidePanelStore,
     modalStore,
-    appStore,
+    authStore,
   } = sdk
   const context = getContext("context")
   const navStateStore = writable({})
@@ -266,14 +267,10 @@
                   <Heading size="S" {textAlign}>{title}</Heading>
                 {/if}
               </div>
-              {#if !embedded}
-                <div class="portal">
-                  <Icon
-                    hoverable
-                    name="Apps"
-                    on:click={navigateToPortal}
-                    disabled={$appStore.isDevApp}
-                  />
+              {#if !embedded && $authStore}
+                <div class="user top">
+                  <UserAvatar user={$authStore} size="M" />
+                  <Icon name="ChevronDown" />
                 </div>
               {/if}
             </div>
@@ -297,13 +294,18 @@
                     {navStateStore}
                   />
                 {/each}
-                <div class="close">
-                  <Icon
-                    hoverable
-                    name="Close"
-                    on:click={() => (mobileOpen = false)}
-                  />
+              </div>
+            {/if}
+            {#if !embedded && $authStore}
+              <div class="user left">
+                <UserAvatar user={$authStore} size="M" />
+                <div class="text">
+                  <div class="name">
+                    {$authStore.firstName}
+                    {$authStore.lastName}
+                  </div>
                 </div>
+                <Icon name="ChevronDown" />
               </div>
             {/if}
           </div>
@@ -522,7 +524,7 @@
     flex: 1 1 auto;
   }
   .logo img {
-    height: 36px;
+    height: 24px;
   }
   .logo :global(h1) {
     font-weight: 600;
@@ -532,11 +534,8 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .portal {
-    display: grid;
-    place-items: center;
-  }
   .links {
+    flex: 1 0 auto;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -544,16 +543,43 @@
     gap: var(--spacing-xl);
     margin-top: var(--spacing-xl);
   }
-  .close {
-    display: none;
-    position: absolute;
-    top: var(--spacing-xl);
-    right: var(--spacing-xl);
-  }
   .mobile-click-handler {
     display: none;
   }
 
+  /* User avatar */
+  .user {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+    transition: background 130ms ease-out;
+    border-radius: 4px;
+  }
+  .user .text {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    color: var(--navTextColor);
+    display: none;
+  }
+  .user .name {
+    font-weight: 600;
+    font-size: 14px;
+  }
+  .layout--left .user .text {
+    display: flex;
+  }
+  .user:hover {
+    cursor: pointer;
+  }
+
+  /* Left overrides for both desktop and mobile */
+  .nav--left {
+    overflow-y: auto;
+  }
+
   /* Desktop nav overrides */
   .desktop.layout--left .layout-body {
     flex-direction: row;
@@ -566,24 +592,24 @@
     height: 100%;
     overflow: auto;
   }
-  .desktop.layout--left .links {
-    overflow-y: auto;
-  }
-
   .desktop .nav--left {
     width: 250px;
     padding: var(--spacing-xl);
   }
-
   .desktop .nav--left .links {
     margin-top: var(--spacing-m);
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
+    gap: var(--spacing-xs);
   }
   .desktop .nav--left .link {
     font-size: var(--spectrum-global-dimension-font-size-150);
   }
+  .desktop .nav--left .user.top,
+  .desktop .nav--top .user.left {
+    display: none;
+  }
 
   /* Mobile nav overrides */
   .mobile .nav-wrapper {
@@ -594,10 +620,8 @@
     border-bottom: 1px solid var(--spectrum-global-color-gray-300);
     border-right: none;
   }
-
-  /* Show close button in drawer */
-  .mobile .close {
-    display: block;
+  .mobile .user.left {
+    display: none;
   }
 
   /* Force standard top bar */
@@ -635,6 +659,7 @@
     left: -250px;
     transform: translateX(0);
     width: 250px;
+    max-width: 75%;
     transition: transform 0.26s ease-in-out, opacity 0.26s ease-in-out;
     height: var(--height);
     opacity: 0;
@@ -646,9 +671,8 @@
     padding: var(--spacing-xl);
     overflow-y: auto;
   }
-  .mobile .link {
-    width: calc(100% - 30px);
-    font-size: 120%;
+  .mobile .links :global(a) {
+    flex: 0 0 auto;
   }
   .mobile .links.visible {
     opacity: 1;
diff --git a/packages/client/src/components/app/NavItem.svelte b/packages/client/src/components/app/NavItem.svelte
index a5ac61a39f..899980a8c5 100644
--- a/packages/client/src/components/app/NavItem.svelte
+++ b/packages/client/src/components/app/NavItem.svelte
@@ -2,6 +2,7 @@
   import { createEventDispatcher } from "svelte"
   import active from "svelte-spa-router/active"
   import { Icon } from "@budibase/bbui"
+  import { builderStore, screenStore } from "@/stores"
 
   export let type
   export let url
@@ -16,7 +17,16 @@
 
   let renderKey
 
-  $: expanded = !!$navStateStore[text]
+  $: isBuilderActive = testUrl => {
+    return (
+      $builderStore.inBuilder &&
+      testUrl &&
+      testUrl === $screenStore.activeScreen?.routing?.route
+    )
+  }
+  $: builderActive = isBuilderActive(url)
+  $: containsActiveLink = (subLinks || []).some(x => isBuilderActive(x.url))
+  $: expanded = !!$navStateStore[text] || containsActiveLink
   $: renderLeftNav = leftNav || mobile
   $: icon = !renderLeftNav || expanded ? "ChevronDown" : "ChevronRight"
 
@@ -47,7 +57,7 @@
       href="#{url}"
       on:click={onClickLink}
       use:active={url}
-      class:active={false}
+      class:builderActive
     >
       {text}
     </a>
@@ -73,6 +83,9 @@
                 href="#{subLink.url}"
                 on:click={onClickLink}
                 use:active={subLink.url}
+                class:active={false}
+                class:builderActive={isBuilderActive(subLink.url)}
+                class="sublink"
               >
                 {subLink.text}
               </a>
@@ -91,22 +104,29 @@
 <style>
   /* Generic styles */
   a,
+  .dropdown .text {
+    padding: 4px 8px;
+    border-radius: 4px;
+  }
+  a,
   .text span {
     opacity: 0.75;
     color: var(--navTextColor);
-    font-size: var(--spectrum-global-dimension-font-size-200);
+    font-size: var(--spectrum-global-dimension-font-size-150);
     transition: opacity 130ms ease-out;
-    font-weight: 600;
     user-select: none;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  a.active {
+  a.active:not(.sublink),
+  a.builderActive:not(.sublink),
+  .dropdown.left a.sublink.active,
+  .dropdown.left a.sublink.builderActive {
+    background: rgba(0, 0, 0, 0.15);
     opacity: 1;
   }
   a:hover,
-  .dropdown:not(.left.expanded):hover .text,
-  .text:hover {
+  .text:hover span {
     cursor: pointer;
     opacity: 1;
   }
@@ -167,8 +187,4 @@
   .dropdown.dropdown.left.expanded .sublinks {
     display: contents;
   }
-  .dropdown.left a {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
 </style>