From 69ad29a1db1c510de16e2afae871520f38156c39 Mon Sep 17 00:00:00 2001
From: mikesealey <mikesealey@hotmail.com>
Date: Wed, 20 Nov 2024 15:41:07 +0000
Subject: [PATCH 1/8] adds settings to allow users to change logo size

---
 .../_components/Navigation/index.svelte       | 13 +++++++++++
 .../builder/src/stores/builder/navigation.js  |  1 +
 .../client/src/components/app/Layout.svelte   | 22 +++++++++++++++----
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
index 7c8b03caca4..21424d6331b 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
@@ -34,6 +34,7 @@
     { value: "Right", barIcon: "TextAlignRight" },
   ]
   const widthOptions = ["Max", "Large", "Medium", "Small"]
+  const logoSizeOptions = ["18px", "24px", "36px", "48px", "72px", "96px"]
 
   $: bindings = getBindableProperties(
     $selectedScreen,
@@ -171,6 +172,18 @@
               updateOnChange: false,
             }}
           />
+          <PropertyControl
+            label="Logo size"
+            control={DrawerBindableCombobox}
+            value={nav.logoSize}
+            onChange={logoSize => update("logoSize", logoSize)}
+            {bindings}
+            props={{
+              updateOnChange: true,
+              options: logoSizeOptions,
+              appendBindingsAsOptions: false,
+            }}
+          />
           <PropertyControl
             label="Logo link URL"
             control={DrawerBindableCombobox}
diff --git a/packages/builder/src/stores/builder/navigation.js b/packages/builder/src/stores/builder/navigation.js
index 86e484b0a6b..2f7c5f207a3 100644
--- a/packages/builder/src/stores/builder/navigation.js
+++ b/packages/builder/src/stores/builder/navigation.js
@@ -9,6 +9,7 @@ export const INITIAL_NAVIGATION_STATE = {
   title: null,
   sticky: null,
   hideLogo: null,
+  logoSize: "36px",
   logoUrl: null,
   hideTitle: null,
   textAlign: "Left",
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 04dbb9efda7..b247ecb871a 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -34,6 +34,7 @@
   export let navWidth
   export let pageWidth
   export let logoLinkUrl
+  export let logoSize
   export let openLogoLinkInNewTab
   export let textAlign
   export let embedded = false
@@ -249,17 +250,29 @@
                       href={getSanitizedUrl(logoLinkUrl, openLogoLinkInNewTab)}
                       use:linkable
                     >
-                      <img src={logoUrl || "/builder/bblogo.png"} alt={title} />
+                      <img
+                        src={logoUrl || "/builder/bblogo.png"}
+                        alt={title}
+                        style="--logo-size: {logoSize};"
+                      />
                     </a>
                   {:else if logoLinkUrl}
                     <a
                       target={openLogoLinkInNewTab ? "_blank" : "_self"}
                       href={getSanitizedUrl(logoLinkUrl, openLogoLinkInNewTab)}
                     >
-                      <img src={logoUrl || "/builder/bblogo.png"} alt={title} />
+                      <img
+                        src={logoUrl || "/builder/bblogo.png"}
+                        alt={title}
+                        style="--logo-size: {logoSize};"
+                      />
                     </a>
                   {:else}
-                    <img src={logoUrl || "/builder/bblogo.png"} alt={title} />
+                    <img
+                      src={logoUrl || "/builder/bblogo.png"}
+                      alt={title}
+                      style="--logo-size: {logoSize};"
+                    />
                   {/if}
                 {/if}
                 {#if !hideTitle && title}
@@ -522,7 +535,8 @@
     flex: 1 1 auto;
   }
   .logo img {
-    height: 36px;
+    width: var(--logo-size);
+    height: var(--logo-size);
   }
   .logo :global(h1) {
     font-weight: 600;

From ebdf45265cb1db10911abe44e038b665d6012b28 Mon Sep 17 00:00:00 2001
From: mikesealey <mikesealey@hotmail.com>
Date: Wed, 20 Nov 2024 15:49:59 +0000
Subject: [PATCH 2/8] makes the currently-set value display in the logoSize
 dropdown

---
 .../[componentId]/_components/Navigation/index.svelte           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
index 21424d6331b..558b5c3d50f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
@@ -175,7 +175,7 @@
           <PropertyControl
             label="Logo size"
             control={DrawerBindableCombobox}
-            value={nav.logoSize}
+            value={$nav.logoSize}
             onChange={logoSize => update("logoSize", logoSize)}
             {bindings}
             props={{

From 4baf3e07a25b4440a96b6d651d66b0ff77d65a6d Mon Sep 17 00:00:00 2001
From: mikesealey <mikesealey@hotmail.com>
Date: Wed, 20 Nov 2024 17:04:52 +0000
Subject: [PATCH 3/8] wip adding option to display text under logo for large
 logos

---
 .../_components/Navigation/index.svelte       |  6 ++
 .../builder/src/stores/builder/navigation.js  |  1 +
 .../client/src/components/app/Layout.svelte   | 64 +++++++++++--------
 3 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
index 558b5c3d50f..ed00b01a426 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
@@ -131,6 +131,12 @@
               options: alignmentOptions,
             }}
           />
+          <PropertyControl
+            label="Title below logo"
+            control={Checkbox}
+            onChange={textBelow => update("textBelow", textBelow)}
+            value={$nav.textBelow}
+          />
         {/if}
         <PropertyControl
           label="Background"
diff --git a/packages/builder/src/stores/builder/navigation.js b/packages/builder/src/stores/builder/navigation.js
index 2f7c5f207a3..0cbb2f9a6d0 100644
--- a/packages/builder/src/stores/builder/navigation.js
+++ b/packages/builder/src/stores/builder/navigation.js
@@ -13,6 +13,7 @@ export const INITIAL_NAVIGATION_STATE = {
   logoUrl: null,
   hideTitle: null,
   textAlign: "Left",
+  textBelow: false,
   navBackground: null,
   navWidth: null,
   navTextColor: null,
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index b247ecb871a..391e03b9c34 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -37,6 +37,7 @@
   export let logoSize
   export let openLogoLinkInNewTab
   export let textAlign
+  export let textBelow
   export let embedded = false
 
   const NavigationClasses = {
@@ -243,38 +244,49 @@
                   />
                 </div>
               {/if}
-              <div class="logo">
-                {#if !hideLogo}
-                  {#if logoLinkUrl && isInternal(logoLinkUrl) && !openLogoLinkInNewTab}
-                    <a
-                      href={getSanitizedUrl(logoLinkUrl, openLogoLinkInNewTab)}
-                      use:linkable
-                    >
+              <div
+                class="logo"
+                style="border: 12px solid blue; display: flex; flex-direction: column;"
+              >
+                <div style="border: 2px solid red;">
+                  {#if !hideLogo}
+                    {#if logoLinkUrl && isInternal(logoLinkUrl) && !openLogoLinkInNewTab}
+                      <a
+                        href={getSanitizedUrl(
+                          logoLinkUrl,
+                          openLogoLinkInNewTab
+                        )}
+                        use:linkable
+                      >
+                        <img
+                          src={logoUrl || "/builder/bblogo.png"}
+                          alt={title}
+                          style="--logo-size: {logoSize};"
+                        />
+                      </a>
+                    {:else if logoLinkUrl}
+                      <a
+                        target={openLogoLinkInNewTab ? "_blank" : "_self"}
+                        href={getSanitizedUrl(
+                          logoLinkUrl,
+                          openLogoLinkInNewTab
+                        )}
+                      >
+                        <img
+                          src={logoUrl || "/builder/bblogo.png"}
+                          alt={title}
+                          style="--logo-size: {logoSize};"
+                        />
+                      </a>
+                    {:else}
                       <img
                         src={logoUrl || "/builder/bblogo.png"}
                         alt={title}
                         style="--logo-size: {logoSize};"
                       />
-                    </a>
-                  {:else if logoLinkUrl}
-                    <a
-                      target={openLogoLinkInNewTab ? "_blank" : "_self"}
-                      href={getSanitizedUrl(logoLinkUrl, openLogoLinkInNewTab)}
-                    >
-                      <img
-                        src={logoUrl || "/builder/bblogo.png"}
-                        alt={title}
-                        style="--logo-size: {logoSize};"
-                      />
-                    </a>
-                  {:else}
-                    <img
-                      src={logoUrl || "/builder/bblogo.png"}
-                      alt={title}
-                      style="--logo-size: {logoSize};"
-                    />
+                    {/if}
                   {/if}
-                {/if}
+                </div>
                 {#if !hideTitle && title}
                   <Heading size="S" {textAlign}>{title}</Heading>
                 {/if}

From 8a9490f536dd2e9e14aca73ebe62832ec50a6c4d Mon Sep 17 00:00:00 2001
From: mikesealey <mikesealey@hotmail.com>
Date: Thu, 21 Nov 2024 18:07:24 +0000
Subject: [PATCH 4/8] wip - need to work on unhappy paths

---
 packages/client/src/components/app/Layout.svelte | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 391e03b9c34..1989a668e3b 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -246,9 +246,9 @@
               {/if}
               <div
                 class="logo"
-                style="border: 12px solid blue; display: flex; flex-direction: column;"
+                style="flex-direction: {textBelow ? 'column' : 'row'};"
               >
-                <div style="border: 2px solid red;">
+                <div>
                   {#if !hideLogo}
                     {#if logoLinkUrl && isInternal(logoLinkUrl) && !openLogoLinkInNewTab}
                       <a
@@ -288,7 +288,11 @@
                   {/if}
                 </div>
                 {#if !hideTitle && title}
-                  <Heading size="S" {textAlign}>{title}</Heading>
+                  <Heading
+                    size="S"
+                    {textAlign}
+                    style="width: {textBelow ? '100%' : ''};">{title}</Heading
+                  >
                 {/if}
               </div>
               {#if !embedded}
@@ -545,6 +549,8 @@
     align-items: center;
     gap: var(--spacing-m);
     flex: 1 1 auto;
+    max-width: 165px;
+    border: 1px solid red;
   }
   .logo img {
     width: var(--logo-size);
@@ -553,7 +559,6 @@
   .logo :global(h1) {
     font-weight: 600;
     flex: 1 1 auto;
-    width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

From 82e3cf1a9d0c2a0521c8df6765bf8c30b88f38a7 Mon Sep 17 00:00:00 2001
From: mikesealey <mikesealey@hotmail.com>
Date: Fri, 22 Nov 2024 09:57:40 +0000
Subject: [PATCH 5/8] fixes text overflow

---
 packages/client/src/components/app/Layout.svelte | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 1989a668e3b..b420ab22ccb 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -291,7 +291,7 @@
                   <Heading
                     size="S"
                     {textAlign}
-                    style="width: {textBelow ? '100%' : ''};">{title}</Heading
+                    style="width: {textBelow ? '100%' : ''}; ">{title}</Heading
                   >
                 {/if}
               </div>
@@ -559,9 +559,11 @@
   .logo :global(h1) {
     font-weight: 600;
     flex: 1 1 auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
     white-space: nowrap;
+    border: 2px solid blue;
+    max-width: 100%;
   }
   .portal {
     display: grid;

From 21eac2740308082b4f81c1c7d16dbc331af1b7ff Mon Sep 17 00:00:00 2001
From: mikesealey <mikesealey@hotmail.com>
Date: Fri, 22 Nov 2024 14:23:05 +0000
Subject: [PATCH 6/8] prevents overflow

---
 packages/client/src/components/app/Layout.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index b420ab22ccb..27013773c84 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -246,7 +246,11 @@
               {/if}
               <div
                 class="logo"
-                style="flex-direction: {textBelow ? 'column' : 'row'};"
+                style="flex-direction: {textBelow
+                  ? 'column'
+                  : 'row'}; max-width: {navigation === 'Left'
+                  ? '165px'
+                  : '95%'};"
               >
                 <div>
                   {#if !hideLogo}
@@ -546,7 +550,7 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    align-items: center;
+    align-items: left;
     gap: var(--spacing-m);
     flex: 1 1 auto;
     max-width: 165px;

From 88c5b3ba4b52dc80d348b5fb518e591234cdd646 Mon Sep 17 00:00:00 2001
From: mikesealey <mikesealey@hotmail.com>
Date: Fri, 22 Nov 2024 16:14:28 +0000
Subject: [PATCH 7/8] wip

---
 packages/client/src/components/app/Layout.svelte | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 27013773c84..b0212f04890 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -250,7 +250,8 @@
                   ? 'column'
                   : 'row'}; max-width: {navigation === 'Left'
                   ? '165px'
-                  : '95%'};"
+                  : '95%'};
+                  align-items: {navigation === 'Left' ? 'center' : 'left'};"
               >
                 <div>
                   {#if !hideLogo}
@@ -550,10 +551,8 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    align-items: left;
     gap: var(--spacing-m);
     flex: 1 1 auto;
-    max-width: 165px;
     border: 1px solid red;
   }
   .logo img {
@@ -563,8 +562,8 @@
   .logo :global(h1) {
     font-weight: 600;
     flex: 1 1 auto;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
+    overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
     border: 2px solid blue;
     max-width: 100%;

From ddae43caafa76d21310168e369d09aafec404963 Mon Sep 17 00:00:00 2001
From: mikesealey <mikesealey@hotmail.com>
Date: Tue, 26 Nov 2024 17:04:45 +0000
Subject: [PATCH 8/8] wip

---
 packages/bbui/src/Typography/Heading.svelte   |  1 +
 .../_components/Navigation/index.svelte       | 23 +++++++++++++++++++
 .../client/src/components/app/Layout.svelte   | 16 ++++++-------
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/packages/bbui/src/Typography/Heading.svelte b/packages/bbui/src/Typography/Heading.svelte
index 90d53fb2083..66c4b698362 100644
--- a/packages/bbui/src/Typography/Heading.svelte
+++ b/packages/bbui/src/Typography/Heading.svelte
@@ -20,6 +20,7 @@
 <style>
   h1 {
     font-family: var(--font-accent);
+    border: 1px solid blue;
   }
 
   h1 {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
index ed00b01a426..b82d60dc9f7 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
@@ -33,6 +33,11 @@
     { value: "Center", barIcon: "TextAlignCenter" },
     { value: "Right", barIcon: "TextAlignRight" },
   ]
+  const alignLogoOptions = [
+    { value: "Left", barIcon: "AlignLeft" },
+    { value: "Center", barIcon: "AlignCenter" },
+    { value: "Right", barIcon: "AlignRight" },
+  ]
   const widthOptions = ["Max", "Large", "Medium", "Small"]
   const logoSizeOptions = ["18px", "24px", "36px", "48px", "72px", "96px"]
 
@@ -190,6 +195,24 @@
               appendBindingsAsOptions: false,
             }}
           />
+          <PropertyControl
+            label="Logo alignment"
+            control={BarButtonList}
+            onChange={logoAlign => update("logoAlign", logoAlign)}
+            value={$nav.logoAlignment}
+            props={{
+              options: alignLogoOptions,
+            }}
+          />
+
+          <!-- label="Text align"
+           control={BarButtonList}
+           onChange={align => update("textAlign", align)}
+           value={$nav.textAlign}
+           props={{
+             options: alignmentOptions,
+           }} -->
+
           <PropertyControl
             label="Logo link URL"
             control={DrawerBindableCombobox}
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index b0212f04890..5338e214c27 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -38,6 +38,7 @@
   export let openLogoLinkInNewTab
   export let textAlign
   export let textBelow
+  export let logoAlign
   export let embedded = false
 
   const NavigationClasses = {
@@ -253,7 +254,8 @@
                   : '95%'};
                   align-items: {navigation === 'Left' ? 'center' : 'left'};"
               >
-                <div>
+                <div style="text-align: {logoAlign};">
+                  <p>{logoAlign}</p>
                   {#if !hideLogo}
                     {#if logoLinkUrl && isInternal(logoLinkUrl) && !openLogoLinkInNewTab}
                       <a
@@ -266,7 +268,8 @@
                         <img
                           src={logoUrl || "/builder/bblogo.png"}
                           alt={title}
-                          style="--logo-size: {logoSize};"
+                          style="--logo-size: {logoSize};
+                          align"
                         />
                       </a>
                     {:else if logoLinkUrl}
@@ -293,11 +296,7 @@
                   {/if}
                 </div>
                 {#if !hideTitle && title}
-                  <Heading
-                    size="S"
-                    {textAlign}
-                    style="width: {textBelow ? '100%' : ''}; ">{title}</Heading
-                  >
+                  <Heading size="S" {textAlign} style="">{title}</Heading>
                 {/if}
               </div>
               {#if !embedded}
@@ -565,8 +564,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    border: 2px solid blue;
-    max-width: 100%;
+    width: 100%;
   }
   .portal {
     display: grid;