Whenever I resize the window, the navigation bar disappears. Here is the image of the page before resizing the window https://i.sstatic.net/UiRB9.png
Below is the image after resizing the window
https://i.sstatic.net/X00d2.png
Displayed below is the code in default.vue
<template>
<v-app>
<Header />
<div class="d-flex flex-0-1-100">
<SideMenu />
<v-main class="pl-0">
<v-container>
<slot />
<NavigationLink />
</v-container>
</v-main>
<TableofContents />
</div>
<Footer />
</v-app>
</template>
Shown below is the code for SideMenu.vue
<script setup lang="ts">
import { computed } from 'vue';
import { useLayout } from 'vuetify';
const { mainStyles } = useLayout();
const marginTop = mainStyles.value['--v-layout-top'];
const maxHeight = computed(
() => `calc(100vh - ${mainStyles.value['--v-layout-top']})`
);
// more code here ...
</script>
<template>
<!-- Code for Client Only -->
</template>
<style scoped lang="scss">
a {
color: $color-gray-100;
}
.active {
background-color: $color-blue;
color: $color-white;
font-weight: bold;
border-radius: 4px;
padding: 4px 8px;
}
</style>
Is there a way to prevent the navigation content from disappearing when I resize the window? Any advice on this issue would be greatly appreciated
I have attempted the following solutions
By removing certain elements within the code of default.vue, I managed to stop the navigation from disappearing, although it did become highlighted
<v-main class="pl-0">
<slot />
<NavigationLink />
</v-main>