From 9fb347653b9ae6ac8989149070d95ccd69b76aec Mon Sep 17 00:00:00 2001
From: "christopher.bennett" <christopher.bennett@metoffice.gov.uk>
Date: Wed, 29 Apr 2026 11:27:29 +0100
Subject: [PATCH 1/2] Changed nav button behaviour so that it is always
 displayed. Removed test that checks for this

---
 src/components/cylc/Toolbar.vue               | 11 ++++----
 src/components/cylc/workspace/Toolbar.vue     | 11 ++++----
 src/layouts/Default.vue                       |  7 +++--
 .../cylc/workspace/toolbar.vue.spec.js        | 26 -------------------
 4 files changed, 15 insertions(+), 40 deletions(-)

diff --git a/src/components/cylc/Toolbar.vue b/src/components/cylc/Toolbar.vue
index 92e79d127..5a13ffad7 100644
--- a/src/components/cylc/Toolbar.vue
+++ b/src/components/cylc/Toolbar.vue
@@ -23,7 +23,6 @@ component. Note: this is not used for the workflow view, see
 <template>
   <v-toolbar
     id="core-app-bar"
-    absolute
     :height="toolbarHeight"
     flat
     class="c-toolbar"
@@ -35,7 +34,7 @@ component. Note: this is not used for the workflow view, see
       @click.stop="toggleDrawer"
       id="toggle-drawer"
     >
-      <v-icon>{{ $options.icons.mdiViewList }}</v-icon>
+      <v-icon>{{ drawer ? $options.icons.mdiArrowLeft : $options.icons.mdiViewList }}</v-icon>
     </v-btn>
     <v-toolbar-title>
       {{ title }}
@@ -47,13 +46,14 @@ component. Note: this is not used for the workflow view, see
 import { mapState } from 'vuex'
 import { useDrawer, toolbarHeight } from '@/utils/toolbar'
 import {
-  mdiViewList
+  mdiViewList,
+  mdiArrowLeft,
 } from '@mdi/js'
 
 export default {
   setup () {
-    const { toggleDrawer } = useDrawer()
-    return { toggleDrawer, toolbarHeight }
+    const { drawer, toggleDrawer } = useDrawer()
+    return { drawer, toggleDrawer, toolbarHeight }
   },
 
   computed: {
@@ -62,6 +62,7 @@ export default {
 
   icons: {
     mdiViewList,
+    mdiArrowLeft,
   },
 }
 </script>
diff --git a/src/components/cylc/workspace/Toolbar.vue b/src/components/cylc/workspace/Toolbar.vue
index d40437314..91ce36700 100644
--- a/src/components/cylc/workspace/Toolbar.vue
+++ b/src/components/cylc/workspace/Toolbar.vue
@@ -28,17 +28,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- TODO: duplicated in workflow/Toolbar.vue and cylc/Toolbar.vue -->
     <!-- burger button for mobile -->
     <v-btn
-      v-if="showNavBtn"
       icon
       @click.stop="toggleDrawer"
       id="toggle-drawer"
     >
-      <v-icon>{{ icons.list }}</v-icon>
+      <v-icon>{{ drawer ? icons.arrowLeft : icons.list }}</v-icon>
     </v-btn>
     <!-- title -->
     <v-toolbar-title
-      class="c-toolbar-title text-md-h6 text-subtitle-1 font-weight-medium text-primary"
-      :class="showNavBtn ? 'ml-0' : null"
+      class="c-toolbar-title text-md-h6 text-subtitle-1 font-weight-medium text-primary ml-0"
     >
       {{ title }}
     </v-toolbar-title>
@@ -265,6 +263,7 @@ import {
   mdiAccount,
   mdiChevronDown,
   mdiArrowULeftTop,
+  mdiArrowLeft,
   mdiInformationOutline,
 } from '@mdi/js'
 import { startCase } from 'lodash'
@@ -330,13 +329,14 @@ export default {
 
   setup () {
     const { showNavBtn } = useNavBtn()
-    const { toggleDrawer } = useDrawer()
+    const { drawer, toggleDrawer } = useDrawer()
 
     const uisVersionInfo = inject('versionInfo')
     const uisFlowVersion = uisVersionInfo?.value?.['cylc-flow'] ?? ''
 
     return {
       eventBus,
+      drawer,
       showNavBtn,
       toggleDrawer,
       toolbarHeight,
@@ -346,6 +346,7 @@ export default {
         hold: mdiPause,
         info: mdiInformationOutline,
         list: mdiViewList,
+        arrowLeft: mdiArrowLeft,
         menu: mdiMicrosoftXboxControllerMenu,
         run: mdiPlay,
         stop: mdiStop,
diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index 533be965e..80c68d661 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -18,11 +18,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div>
     <ConnectionStatus :is-offline="offline" />
-    <Toolbar v-if="showToolbar" />
     <Drawer v-if="showSidebar" />
     <CommandMenu/>
 
     <v-main>
+      <Toolbar v-if="showToolbar" />
       <alert />
       <div
         id="core-view"
@@ -45,7 +45,7 @@ import { Alert as AlertModel } from '@/model/Alert.model'
 import Alert from '@/components/core/Alert.vue'
 import Drawer from '@/components/cylc/Drawer.vue'
 import Toolbar from '@/components/cylc/Toolbar.vue'
-import { useNavBtn, toolbarHeight } from '@/utils/toolbar'
+import { toolbarHeight } from '@/utils/toolbar'
 import ConnectionStatus from '@/components/cylc/ConnectionStatus.vue'
 import CommandMenu from '@/components/cylc/commandMenu/Menu.vue'
 
@@ -66,11 +66,10 @@ export default {
       ...allViews.keys(),
       'Workspace',
     ]
-    const { showNavBtn } = useNavBtn()
 
     /** Whether to show app toolbar (not the workspace view toolbar). */
     const showToolbar = computed(
-      () => showNavBtn.value && !workflowViews.includes(route.name)
+      () => !workflowViews.includes(route.name)
     )
     const coreViewStyle = computed(() => ({
       marginTop: showToolbar.value ? `${toolbarHeight}px` : 0,
diff --git a/tests/unit/components/cylc/workspace/toolbar.vue.spec.js b/tests/unit/components/cylc/workspace/toolbar.vue.spec.js
index d5f4ed590..ccf759218 100644
--- a/tests/unit/components/cylc/workspace/toolbar.vue.spec.js
+++ b/tests/unit/components/cylc/workspace/toolbar.vue.spec.js
@@ -39,30 +39,4 @@ describe('Workspace toolbar component', () => {
     drawerState.value = false
   })
 
-  it('hides/shows nav button according to viewport size & whether drawer is collapsed', async () => {
-    // TODO: actually just show nav btn at all times?
-    const wrapper = mount(Toolbar, {
-      global: {
-        plugins: [store, vuetify, CommandMenuPlugin],
-        mocks: { $workflowService },
-        provide: { versionInfo: null },
-      },
-      props: {
-        views: new Map(),
-        workflowName: 'strewth',
-      },
-    })
-    // Btn should show when drawer is collapsed
-    wrapper.vm.$vuetify.display.mobile = false
-    await wrapper.vm.$nextTick()
-    expect(wrapper.find('#toggle-drawer').exists()).to.equal(true)
-    // Btn should not show when drawer is visible on large viewport
-    drawerState.value = true
-    await wrapper.vm.$nextTick()
-    expect(wrapper.find('#toggle-drawer').exists()).to.equal(false)
-    // Btn should show when drawer is visible on small viewport
-    wrapper.vm.$vuetify.display.mobile = true
-    await wrapper.vm.$nextTick()
-    expect(wrapper.find('#toggle-drawer').exists()).to.equal(true)
-  })
 })

From bd3a6aafc982be8770a252f66df2453d7488921d Mon Sep 17 00:00:00 2001
From: "christopher.bennett" <christopher.bennett@metoffice.gov.uk>
Date: Wed, 29 Apr 2026 11:43:53 +0100
Subject: [PATCH 2/2] Updating tests

---
 .../cylc/workspace/toolbar.vue.spec.js        | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/tests/unit/components/cylc/workspace/toolbar.vue.spec.js b/tests/unit/components/cylc/workspace/toolbar.vue.spec.js
index ccf759218..e2ee4cb2b 100644
--- a/tests/unit/components/cylc/workspace/toolbar.vue.spec.js
+++ b/tests/unit/components/cylc/workspace/toolbar.vue.spec.js
@@ -39,4 +39,31 @@ describe('Workspace toolbar component', () => {
     drawerState.value = false
   })
 
+  it('shows nav button', async () => {
+    // TODO Add test for when workflow toolbar is shown
+    // and when navbar should be hidden
+    const wrapper = mount(Toolbar, {
+      global: {
+        plugins: [store, vuetify, CommandMenuPlugin],
+        mocks: { $workflowService },
+        provide: { versionInfo: null },
+      },
+      props: {
+        views: new Map(),
+        workflowName: 'strewth',
+      },
+    })
+    // Btn should show when drawer is collapsed
+    wrapper.vm.$vuetify.display.mobile = false
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#toggle-drawer').exists()).to.equal(true)
+    // Btn should show when drawer is visible on large viewport
+    drawerState.value = true
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#toggle-drawer').exists()).to.equal(true)
+    // Btn should show when drawer is visible on small viewport
+    wrapper.vm.$vuetify.display.mobile = true
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#toggle-drawer').exists()).to.equal(true)
+  })
 })