From 8ba86adbc9a96c64be0ecd9fa30d1731059c03fd Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Thu, 2 Apr 2020 18:23:05 +0200
Subject: [PATCH] update backendNav to use routify

---
 packages/builder/src/components/nav/BackendNav.svelte | 5 ++++-
 packages/builder/src/components/nav/NavItem.svelte    | 9 +++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/nav/BackendNav.svelte b/packages/builder/src/components/nav/BackendNav.svelte
index 6454d48fac..813ac7f29c 100644
--- a/packages/builder/src/components/nav/BackendNav.svelte
+++ b/packages/builder/src/components/nav/BackendNav.svelte
@@ -41,7 +41,10 @@
 
     </div>
   {/if}
-  <NavItem name="ACCESS_LEVELS" label="User Access Levels" />
+  <NavItem
+    name="ACCESS_LEVELS"
+    label="User Access Levels"
+    href="./accesslevels" />
 </div>
 
 <style>
diff --git a/packages/builder/src/components/nav/NavItem.svelte b/packages/builder/src/components/nav/NavItem.svelte
index 4ae739094d..5930e813ea 100644
--- a/packages/builder/src/components/nav/NavItem.svelte
+++ b/packages/builder/src/components/nav/NavItem.svelte
@@ -1,9 +1,13 @@
 <script>
+  import { isActive, url, goto } from "@sveltech/routify"
   import getIcon from "../common/icon"
   import { backendUiStore } from "builderStore"
 
   export let name = ""
   export let label = ""
+  export let href
+
+  $: console.log("Active: ", $isActive(href))
 
   $: navActive = $backendUiStore.leftNavItem === name
 
@@ -11,14 +15,15 @@
 </script>
 
 <div
+  on:click={() => $goto($url(href))}
   class="budibase__nav-item backend-nav-item"
-  class:selected={navActive}
-  on:click={setActive}>
+  class:selected={$isActive(href)}>
   {label}
 </div>
 
 <style>
   .backend-nav-item {
     padding-left: 25px;
+    cursor: pointer;
   }
 </style>