Display drawer expand/collapse button at all times

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>

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,

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,

tests/unit/components/cylc/workspace/toolbar.vue.spec.js

@@ -39,8 +39,9 @@ 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?
+  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],
@@ -56,10 +57,10 @@ describe('Workspace toolbar component', () => {
     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
+    // 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(false)
+    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()