Switches out SideNav to SideNavigation component

packages/bbui/src/SideNavigation/Item.svelte

@@ -2,6 +2,7 @@
     import { getContext } from 'svelte'
     const multilevel = getContext('sidenav-type');
     export let href = "";
+    export let external = false;
     export let heading = ""
     export let icon = "";
     export let selected = false;
@@ -13,7 +14,7 @@
     {#if heading}
         <h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}">{heading}</h2>
     {/if}
-    <a {href} class="spectrum-SideNav-itemLink" aria-current="page">
+    <a target={external ? '_blank' : '_self'} {href} class="spectrum-SideNav-itemLink" aria-current="page">
         {#if icon}
             <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-SideNav-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-icon-18-{icon}" />

packages/builder/src/pages/builder/_layout.svelte

@@ -1,16 +1,8 @@
 <script>
-  import { Home as Link } from "@budibase/bbui"
+  import { goto } from "@roxi/routify"
-  import {
+  import { Home as Link, SideNavigation as Navigation, SideNavigationItem as Item} from "@budibase/bbui"
-    AppsIcon,
-    HostingIcon,
-    DocumentationIcon,
-    CommunityIcon,
-    BugIcon,
-  } from "components/common/Icons"
   import BuilderSettingsButton from "components/start/BuilderSettingsButton.svelte"
   import Logo from "/assets/budibase-logo.svg"
-
-  let modal
 </script>
 
 <div class="root">
@@ -18,23 +10,23 @@
     <div class="home-logo"><img src={Logo} alt="Budibase icon" /></div>
     <div class="nav-section">
       <div class="nav-top">
-        <Link icon={AppsIcon} title="Apps" href="/" active />
+        <Navigation>
-        <Link
+          <Item href="/builder/" icon="Apps" selected>
-          icon={HostingIcon}
+            Apps
-          title="Hosting"
+          </Item>
-          href="https://portal.budi.live/" />
+          <Item external href="https://portal.budi.live/" icon="Servers">
-        <Link
+            Hosting
-          icon={DocumentationIcon}
+          </Item>
-          title="Documentation"
+          <Item external href="https://docs.budibase.com/" icon="Book">
-          href="https://docs.budibase.com/" />
+            Documentation
-        <Link
+          </Item>
-          icon={CommunityIcon}
+          <Item external href="https://github.com/Budibase/budibase/discussions" icon="PeopleGroup">
-          title="Community"
+            Community
-          href="https://github.com/Budibase/budibase/discussions" />
+          </Item>
-        <Link
+          <Item external href="https://github.com/Budibase/budibase/issues/new/choose" icon="Bug">
-          icon={BugIcon}
+            Raise an issue
-          title="Raise an issue"
+          </Item>
-          href="https://github.com/Budibase/budibase/issues/new/choose" />
+        </Navigation>
       </div>
       <div class="nav-bottom">
         <BuilderSettingsButton />