Allow logo in top navigation to be a link (#12868)

* Add support for logo link

* Add link to logo

---------

Co-authored-by: Andrew Kingston <andrew@kingston.dev>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte

@@ -15,10 +15,15 @@
     Checkbox,
     notifications,
     Select,
+    Combobox,
   } from "@budibase/bbui"
   import { selectedScreen, store } from "builderStore"
   import { DefaultAppTheme } from "constants"
 
+  $: screenRouteOptions = $store.screens
+    .map(screen => screen.routing?.route)
+    .filter(x => x != null)
+
   const updateShowNavigation = async e => {
     await store.actions.screens.updateSetting(
       get(selectedScreen),
@@ -107,23 +112,6 @@
             on:change={e => update("navWidth", e.detail)}
           />
         {/if}
-        <div class="label">
-          <Label size="M">Show logo</Label>
-        </div>
-        <Checkbox
-          value={!$store.navigation.hideLogo}
-          on:change={e => update("hideLogo", !e.detail)}
-        />
-        {#if !$store.navigation.hideLogo}
-          <div class="label">
-            <Label size="M">Logo URL</Label>
-          </div>
-          <Input
-            value={$store.navigation.logoUrl}
-            on:change={e => update("logoUrl", e.detail)}
-            updateOnChange={false}
-          />
-        {/if}
         <div class="label">
           <Label size="M">Show title</Label>
         </div>
@@ -160,6 +148,47 @@
         />
       </div>
     </div>
+
+    <div class="divider" />
+    <div class="customizeSection">
+      <div class="subheading">
+        <Detail>Logo</Detail>
+      </div>
+      <div class="controls">
+        <div class="label">
+          <Label size="M">Show logo</Label>
+        </div>
+        <Checkbox
+          value={!$store.navigation.hideLogo}
+          on:change={e => update("hideLogo", !e.detail)}
+        />
+        {#if !$store.navigation.hideLogo}
+          <div class="label">
+            <Label size="M">Logo image URL</Label>
+          </div>
+          <Input
+            value={$store.navigation.logoUrl}
+            on:change={e => update("logoUrl", e.detail)}
+            updateOnChange={false}
+          />
+          <div class="label">
+            <Label size="M">Logo link URL</Label>
+          </div>
+          <Combobox
+            value={$store.navigation.logoLinkUrl}
+            on:change={e => update("logoLinkUrl", e.detail)}
+            options={screenRouteOptions}
+          />
+          <div class="label">
+            <Label size="M">New tab</Label>
+          </div>
+          <Checkbox
+            value={!!$store.navigation.openLogoLinkInNewTab}
+            on:change={e => update("openLogoLinkInNewTab", !!e.detail)}
+          />
+        {/if}
+      </div>
+    </div>
   {/if}
 </Panel>
 

packages/client/src/components/app/Layout.svelte

@@ -33,6 +33,8 @@
   export let navTextColor
   export let navWidth
   export let pageWidth
+  export let logoLinkUrl
+  export let openLogoLinkInNewTab
 
   export let embedded = false
 
@@ -150,6 +152,16 @@
     }
     return style
   }
+
+  const getSanitizedUrl = (url, openInNewTab) => {
+    if (!isInternal(url)) {
+      return ensureExternal(url)
+    }
+    if (openInNewTab) {
+      return `#${url}`
+    }
+    return url
+  }
 </script>
 
 <div
@@ -192,7 +204,23 @@
               {/if}
               <div class="logo">
                 {#if !hideLogo}
+                  {#if logoLinkUrl && isInternal(logoLinkUrl) && !openLogoLinkInNewTab}
+                    <a
+                      href={getSanitizedUrl(logoLinkUrl, openLogoLinkInNewTab)}
+                      use:linkable
+                    >
                       <img src={logoUrl || "/builder/bblogo.png"} alt={title} />
+                    </a>
+                  {:else if logoLinkUrl}
+                    <a
+                      target={openLogoLinkInNewTab ? "_blank" : "_self"}
+                      href={getSanitizedUrl(logoLinkUrl, openLogoLinkInNewTab)}
+                    >
+                      <img src={logoUrl || "/builder/bblogo.png"} alt={title} />
+                    </a>
+                  {:else}
+                    <img src={logoUrl || "/builder/bblogo.png"} alt={title} />
+                  {/if}
                 {/if}
                 {#if !hideTitle && title}
                   <Heading size="S">{title}</Heading>