fix: implemented changes to display Search bar only on the index page (…

…#923)

* fix: implemented changes using conditional class to Search bar to show only on index page

* display search bar on index page and change conditional class to use v-show instead

* fix: created const variable for isHomepage.

* fix: reverted changes on the child component SearchBar.vue instead implemented the changes to the parent component TopNav.vue

* test: update test for search bar visibility

components/TopNav.vue

@@ -51,6 +51,7 @@
             </NuxtLink>
         </div>
         <div
+            v-show="isHomepage"
             data-testid="landscape-searchbar"
             class="portrait:hidden flex align-middle"
         >
@@ -120,12 +121,16 @@
 </template>
 
 <script lang="ts" setup>
+import { useRoute } from 'vue-router'
+import { computed } from 'vue'
 import HamburgerMenu from './HamburgerMenu.vue'
 import SVGProfileIcon from '~/assets/icons/profile-icon.svg'
 import SVGSiteLogo from '~/assets/icons/site-logo.svg'
 import { useAuthStore } from '~/stores/authStore'
 
 const authStore = useAuthStore()
+const route = useRoute()
+const isHomepage = computed(() => route.path === '/')
 
 async function logout() {
     await authStore.logout()

test/cypress/e2e/about.cy.ts

@@ -13,7 +13,7 @@ describe('About page', () => {
         })
 
         it('shows the desktop top nav', () => {
-            cy.get('[data-testid="landscape-searchbar"]').should('exist').should('be.visible')
+            cy.get('[data-testid="landscape-searchbar"]').should('exist').should('not.be.visible')
         })
 
         it('does not show the hamburger component', () => {

test/cypress/e2e/privacy.cy.ts

@@ -6,7 +6,7 @@ describe('Privacy Policy page', () => {
         })
 
         it('shows the landscape top nav', () => {
-            cy.get('[data-testid="landscape-searchbar"]').should('exist').should('be.visible')
+            cy.get('[data-testid="landscape-searchbar"]').should('exist').should('not.be.visible')
         })
 
         it('does not show the hamburger component', () => {

test/cypress/e2e/submit.cy.ts

@@ -15,7 +15,7 @@ describe('Submit page', () => {
         })
 
         it('shows the desktop top nav', () => {
-            cy.get('[data-testid="landscape-searchbar"]').should('exist').should('be.visible')
+            cy.get('[data-testid="landscape-searchbar"]').should('exist').should('not.be.visible')
         })
 
         it('does not show the hamburger component', () => {