Fix: Sidebar stays expanded on option selection

src/App.vue

@@ -4,7 +4,7 @@
     <LoadingIndicator />
     <main>
       <div class="mr-0 d-flex">
-        <SidebarMenu class="pr-2" />
+        <SidebarMenu class="mr-2" />
         <div class="container-fluid px-5">
           <Pilot />
           <Maintenance />
@@ -82,6 +82,11 @@ export default defineComponent({
   margin-bottom: 10px;
   height: 1px;
   width: 100%;
-  border-top: 1px solid #bebbbb;
+  border-top: 1px solid var(--light);
+}
+
+#card-deck {
+  /* Used to align the cards' and container's left edges */
+  margin: 0em -0.5em;
 }
 </style>

src/assets/css/_custom.css

+:root {
+  --navbar-height: 2.5rem;
+  --loading-indicator-height: 3px;
+  --loading-indicator-margin: 1rem;
+  --sidebar-offset-top: calc(var(--navbar-height) + var(--loading-indicator-height) + var(--loading-indicator-margin));
+  --sidebar-height: calc(100vh - var(--navbar-height) - calc(var(--loading-indicator-height) + var(--loading-indicator-margin)))
+}
\ No newline at end of file

src/components/elements/LoadingIndicator.vue

 <template>
-  <div id="loading-indicator">
+  <div>
     <div v-if="show" class="indicator indicator-active" />
     <div v-else class="indicator bg-light" />
   </div>
@@ -47,8 +47,9 @@ export default defineComponent({
 .indicator {
   position: relative;
   width: 100%;
-  height: 3px;
-  margin-bottom: 1rem;
+  /* Heights defined as variables in "@/assets/css/_custom.css" */
+  height: var(--loading-indicator-height);
+  margin-bottom: var(--loading-indicator-margin);
 }
 .indicator-active {
   background-color: #e9ecef;
@@ -57,7 +58,7 @@ export default defineComponent({
   width: 40%;
   content: "";
   position: absolute;
-  background-color: #00549f;
+  background-color: var(--primary);
   top: 0;
   left: 0;
   bottom: 0;

src/components/elements/SidebarMenu.vue

@@ -184,6 +184,7 @@ export default defineComponent({
                       class: "vsm--badge_default",
                     }
                   : undefined,
+                exactPath: true,
               };
             }) as Array<SidebarItem>,
           },
@@ -291,10 +292,18 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import "/src/assets/scss/_custom.scss";
 
+.v-sidebar-menu {
+  height: var(--sidebar-height);
+  border-radius: 0rem 0.25rem 0.25rem 0rem;
+  background: $light;
+}
+.v-sidebar-menu ::v-deep .vsm--toggle-btn {
+  border-radius: 0rem 0rem 0.25rem 0rem;
+  background-color: var(--secondary);
+}
 .v-sidebar-menu.vsm_expanded {
   overflow-y: auto;
   overflow-x: hidden;
-  max-height: calc(100vh - 50px - 30px);
 }
 .v-sidebar-menu ::v-deep .vsm--badge {
   background-color: #ffc107;
@@ -336,4 +345,9 @@ export default defineComponent({
   box-shadow: 3px 0px 0px 0px $primary inset;
   -webkit-box-shadow: 3px 0px 0px 0px $primary inset;
 }
+.v-sidebar-menu ::v-deep .vsm--link_level-2.vsm--link_active {
+  // Use this to edit the second level element when active
+  background-color: var(--primary);
+  color: $white;
+}
 </style>

src/main.ts

@@ -16,6 +16,7 @@ import "@/plugins/bootstrap-vue";
 
 /* Corporate Design */
 import "@/assets/scss/_custom.scss";
+import "@/assets/css/_custom.css";
 
 /* Other */
 import App from "@/App.vue";

src/modules/project/pages/ListProjects.vue

@@ -2,7 +2,7 @@
   <div id="project">
     <CoscineHeadline :headline="$tc('page.listProjects.title', 0)" />
     <div class="list">
-      <b-card-group deck>
+      <b-card-group id="card-deck" deck>
         <CoscineCard
           :title="$t('page.listProjects.addProject')"
           type="create"

src/modules/project/pages/ProjectPage.vue

@@ -6,7 +6,7 @@
         <CoscineHeadline :headline="$tc('page.project.resource', 2)" />
 
         <div class="list">
-          <b-card-group deck>
+          <b-card-group id="card-deck" deck>
             <CoscineCard
               :title="$t('page.project.addResource')"
               type="create"
@@ -49,7 +49,7 @@
       <CoscineHeadline :headline="$tc('page.project.subProject', 0)" />
 
       <div class="list">
-        <b-card-group deck>
+        <b-card-group id="card-deck" deck>
           <CoscineCard
             :title="$t('page.listProjects.addProject')"
             type="create"