Changing layout of navbar and sidebar in vue

Question

I am new to vue and want to change the layout of my page to have my sidebar go all the way to thetop of the page (not under the navbar) and have the navbar right next to the sidebar. Recommendations on how to achieve this?

This is the code I currently have:

view that contains the navbar and sidebar:

<template lang="pug">
.Traces
  NavBar
  .Traces__layout
    SideBar(activeItem="Traces")
    .Traces__content
      <-- logic here for the rest of the page, not relevant -->
</template>

<style lang="scss">
@import "../../views.mixins";

.Traces {
  @include fullscreen_container_view;
  display: flex;
  flex-direction: column;

  &__layout {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
  }
}
</style>

Navbar view:

<template lang="pug">
.NavBar
  img.NavBar__logo(:src="'image" alt="altText")
  .NavBar__rightSide
    va-icon(name="account_circle" size="2.5em" color="primary")
    va-button(flat :rounded="false" :icon="showDropdown ? 'expand_less': 'expand_more'" @click="showDropdown = !showDropdown")
  .NavBar__dropdown(v-show="showDropdown")
    va-button.NavBar__dropdownButton(flat block :rounded="false" icon="tune" to="/preferences") Preferences
    va-button.NavBar__dropdownButton(flat block :rounded="false" icon="logout" @click="logout") Logout

</template>

<style lang="scss">
.NavBar {
  position: relative;
  width: 100%;
  height: 4em;
  display: flex;
  justify-content: space-between;
  color: white;
  background-color: var(--va-background);
  padding: 0.5em;

  &__logo {
    height: 100%;
    object-fit: contain;
  }

  &__rightSide {
    display: flex;
    padding: 0.5em;
    align-items: center;
  }

  &__dropdown {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 10;
    top: 4.5em;
    right: 0.5em;
    background-color: var(--va-background);
    border-radius: var(--va-square-border-radius);
    box-shadow: var(--va-box-shadow);
  }
}
</style>

sidebar view:

<!--
  Shared component that displays a SideBar
-->
<template lang="pug">
.SideBar
  va-sidebar.Sidebar__content(:minimized="minimized" minimized-width="4em")
    .SideBar__top-items
      va-sidebar-item(v-for="item in topItems" :key="item.title" :active="item.title ==  activeItem" :to="item.to")
        va-sidebar-item-content
          va-icon(:name="item.icon")
          va-sidebar-item-title(v-if="!minimized") {{ item.title }}
    .SideBar__bottom-items
      va-sidebar-item(v-for="item in bottomItems" :key="item.title" :active="item.title ==  activeItem" :to="item.to")
        va-sidebar-item-content
          va-icon(:name="item.icon")
          va-sidebar-item-title(v-if="!minimized") {{ item.title }}
      va-button.SideBar__minimize-button(:rounded="false" @click="minimized = !minimized" :icon="minimized ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left'")
</template>

<script setup lang="ts">
import { ref } from "vue";

const props = defineProps<{
  activeItem: string;
}>();

const activeItem = ref(props.activeItem);
const minimized = ref(true);

const topItems = ref([
  { title: "Dashboard", icon: "home", to: "/" },
  { title: "One", icon: "account_tree", to: "/pageone" },
  { title: "Two", icon: "insert_chart_outlined", to: "/pagetwo" },
  { title: "Three", icon: "insights", to: "/pagethree" },
  { title: "Four", icon: "assignment", to: "/pagefour" },
  { title: "Five", icon: "code", to: "/pagefive" },
]);

const bottomItems = ref([
  { title: "Settings", icon: "settings", to: "/settings" },
  { title: "Help", icon: "help", to: "/help" },
]);
</script>

<style lang="scss">
.SideBar {
  height: 100%;

  &__content {
    height: 100%;
    display: flex;
    align-content: space-between;
  }

  &__minimize-button {
    margin: 1em !important;
    position: relative;
    float: right;
  }
}

.va-sidebar__menu {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>