fix: various Nav Bar fixes (#19283)

Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>
Co-authored-by: Zachary Williams <ZachJW34@gmail.com>

Author: 3 people

packages/app/cypress/e2e/integration/settings.spec.ts

@@ -72,7 +72,7 @@ describe('Settings', { viewportWidth: 600 }, () => {
 
     // navigate away and come back
     // preferred editor selected from dropdown should have been persisted
-    cy.get('[href="#/"]').click()
+    cy.visitApp()
     cy.get('[href="#/settings"]').click()
     cy.wait(100)
     cy.get('[data-cy="Device Settings"]').click()

packages/app/src/layouts/default.vue

@@ -1,15 +1,16 @@
 <template>
-  <div class="h-screen min-w-728px layout-grid">
+  <div class="h-screen min-w-728px grid grid-rows-[64px,1fr] grid-cols-[auto,1fr]">
     <SidebarNavigation class="row-span-full" />
 
     <HeaderBar
       v-if="showHeader"
       :show-browsers="true"
-      :page-name="pageName"
+      :page-name="currentRoute.name?.toString()"
     />
 
     <main
       aria-labelledby="primary-heading"
+      class="overflow-auto"
     >
       <router-view v-slot="{ Component, route }">
         <h1
@@ -41,16 +42,4 @@ const currentRoute = useRoute()
 const showHeader = computed(() => {
   return currentRoute.meta.header !== false
 })
-
-const pageName = computed((): string | undefined => {
-  return currentRoute.meta?.title as string
-})
 </script>
-
-<style lang="scss" scoped>
-.layout-grid {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-rows: 64px 1fr;
-}
-</style>

packages/app/src/navigation/SidebarNavigation.spec.tsx

@@ -4,7 +4,7 @@ import SidebarNavigation from './SidebarNavigation.vue'
 function mountComponent (initialNavExpandedVal = true) {
   const mainStore = useMainStore()
 
-  mainStore.navBarExpanded = initialNavExpandedVal
+  mainStore.setNavBarExpandedByUser(initialNavExpandedVal)
 
   cy.mount(() => {
     return (

packages/app/src/navigation/SidebarNavigation.vue

@@ -5,7 +5,8 @@
     :class="mainStore.navBarExpanded ? 'w-248px' : 'w-64px'"
   >
     <button
-      class="cursor-pointer left-full top-0 bottom-0 w-16px absolute group hocus:outline-transparent"
+      v-if="navIsAlwaysCollapsed"
+      class="cursor-pointer left-full top-0 bottom-0 w-16px z-1 absolute group hocus:outline-transparent"
       role="button"
       aria-label="toggle navigation"
       @click="mainStore.toggleNavBar"
@@ -117,11 +118,12 @@ import { useMainStore } from '../store'
 import { SideBarNavigationDocument } from '../generated/graphql'
 import CypressLogo from '@packages/frontend-shared/src/assets/logos/cypress_s.png'
 import { useI18n } from '@cy/i18n'
+import { useRoute } from 'vue-router'
 
 const { t } = useI18n()
 
 const navigation = [
-  { name: 'Specs', icon: CodeIcon, href: '/' },
+  { name: 'Specs', icon: CodeIcon, href: '/specs' },
   { name: 'Runs', icon: RunsIcon, href: '/runs' },
   { name: 'Settings', icon: SettingsIcon, href: '/settings' },
 ]
@@ -145,4 +147,8 @@ const bindingsOpen = ref(false)
 
 const mainStore = useMainStore()
 
+const route = useRoute()
+
+const navIsAlwaysCollapsed = computed(() => route.meta?.navBarExpandedAllowed !== false)
+
 </script>

packages/app/src/pages/Runs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative p-24px h-full">
+  <div class="h-full p-24px relative">
     <TransitionQuickFade>
       <RunsSkeleton v-if="query.fetching.value || !query.data.value" />
       <RunsPage
@@ -24,12 +24,3 @@ query Runs {
 
 const query = useQuery({ query: RunsDocument })
 </script>
-
-<route>
-{
-  name: "Runs",
-  meta: {
-    title: "Runs"
-  }
-}
-</route>

packages/app/src/pages/Settings.vue

@@ -29,12 +29,3 @@ function reconfigure () {
   openElectron.executeMutation({})
 }
 </script>
-
-<route>
-{
-  name: "Settings Page",
-  meta: {
-    title: "Settings"
-  }
-}
-</route>

packages/app/src/pages/Specs.vue

@@ -0,0 +1,11 @@
+<template>
+  <router-view />
+</template>
+
+<route>
+{
+  meta: {
+    default: true,
+  }
+}
+</route>

packages/app/src/pages/Index.vue renamed to packages/app/src/pages/Specs/Index.vue

@@ -18,12 +18,12 @@
 </template>
 
 <script lang="ts" setup>
-import { gql, useQuery } from '@urql/vue'
-import SpecsList from '../specs/SpecsList.vue'
-import { SpecsPageContainerDocument } from '../generated/graphql'
-import NoSpecsPage from '../specs/NoSpecsPage.vue'
 import { computed, ref } from 'vue'
+import { gql, useQuery } from '@urql/vue'
 import { useI18n } from '@cy/i18n'
+import SpecsList from '../../specs/SpecsList.vue'
+import NoSpecsPage from '../../specs/NoSpecsPage.vue'
+import { SpecsPageContainerDocument } from '../../generated/graphql'
 const { t } = useI18n()
 
 gql`
@@ -45,12 +45,3 @@ const title = computed(() => {
 })
 
 </script>
-
-<route>
-{
-  name: "Specs Page",
-  meta: {
-    title: "Specs"
-  }
-}
-</route>

packages/app/src/pages/Runner.vue renamed to packages/app/src/pages/Specs/Runner.vue

@@ -7,8 +7,8 @@
 
 <script lang="ts" setup>
 import { gql, useQuery } from '@urql/vue'
-import { SpecPageContainerDocument } from '../generated/graphql'
-import SpecRunnerContainer from '../runner/SpecRunnerContainer.vue'
+import { SpecPageContainerDocument } from '../../generated/graphql'
+import SpecRunnerContainer from '../../runner/SpecRunnerContainer.vue'
 
 gql`
 query SpecPageContainer {
@@ -22,7 +22,8 @@ const query = useQuery({ query: SpecPageContainerDocument })
 <route>
   {
     meta: {
-      header: false
+      header: false,
+      navBarExpandedAllowed: false
     }
   }
 </route>

packages/app/src/pages/[...all].vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-center mt-20 w-400px mx-auto p-20px border-1 rounded-md">
+  <div class="rounded-md mx-auto border-1 mt-20 text-center p-20px w-400px">
     <h1 class="text-2xl">
       You seem to have gotten lost...
     </h1>
@@ -10,7 +10,7 @@
       <li
         v-for="route in routes"
         :key="route.path"
-        class="text-left underline underline-2 underline-offset-1 underline-indigo-700 text-indigo-700 hover:text-indigo-500 hover:underline-indigo-500"
+        class="text-left text-indigo-700 underline underline-2 underline-offset-1 underline-indigo-700 hover:text-indigo-500 hover:underline-indigo-500"
       >
         <RouterLink :to="route.path">
           {{ route.name }}
@@ -36,7 +36,6 @@ const routes = computed(() => {
     layout: "default",
     error: true
   },
-  name: "404 Page",
   meta: {
     title: "404"
   }