From 1a53a3cb45e050dc5ea36299dbc8f08812eb28db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 16 Apr 2021 12:40:34 +0200
Subject: [PATCH] Convert main nav to use an ActionGroup

---
 .../bbui/src/ActionButton/ActionButton.svelte    |  8 +++++---
 .../pages/builder/[application]/_reset.svelte    | 16 +++++++---------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index df087dd62..73eb5e4a7 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -59,7 +59,9 @@
     {/if}
 </button>
   
-  <style>
-  
-  </style>
+<style>
+    span {
+        text-transform: capitalize;
+    }
+</style>
   
\ No newline at end of file
diff --git a/packages/builder/src/pages/builder/[application]/_reset.svelte b/packages/builder/src/pages/builder/[application]/_reset.svelte
index 6d3313717..7d617dfc1 100644
--- a/packages/builder/src/pages/builder/[application]/_reset.svelte
+++ b/packages/builder/src/pages/builder/[application]/_reset.svelte
@@ -1,7 +1,7 @@
 <script>
   import { store, automationStore } from "builderStore"
   import { roles } from "stores/backend"
-  import { Button } from "@budibase/bbui"
+  import { Button, ActionGroup, ActionButton, Icon } from "@budibase/bbui"
   import SettingsLink from "components/settings/Link.svelte"
   import ThemeEditorDropdown from "components/settings/ThemeEditorDropdown.svelte"
   import FeedbackNavLink from "components/feedback/FeedbackNavLink.svelte"
@@ -60,14 +60,11 @@
         </button>
 
         <!-- This gets all indexable subroutes and sticks them in the top nav. -->
-        {#each $layout.children as { path, title }}
-          <span
-            class:active={$isActive(path)}
-            class="topnavitem"
-            on:click={topItemNavigate(path)}>
-            {title}
-          </span>
-        {/each}
+        <ActionGroup>
+          {#each $layout.children as { path, title }}
+            <ActionButton quiet selected={$isActive(path)} on:click={topItemNavigate(path)}>{title}</ActionButton>
+          {/each}
+        </ActionGroup>
       </div>
       <div class="toprightnav">
         <ThemeEditorDropdown />
@@ -76,6 +73,7 @@
           <a
             target="_blank"
             href="https://github.com/Budibase/budibase/discussions">
+            <Icon />
             <i class="ri-github-fill" />
           </a>
         </div>