UI refactor on demo layout

src/AppMenu.vue

@@ -1,5 +1,8 @@
 <template>
     <div :class="['layout-sidebar', {'active': active}]">
+         <router-link to="/" class="logo">
+            <img alt="logo" src="./assets/images/primevue-logo.png">
+        </router-link>
         <div class="layout-sidebar-filter p-fluid p-input-filled">
             <AutoComplete v-model="selectedRoute" :suggestions="filteredRoutes" @complete="searchRoute($event)" @item-select="onItemSelect($event)" scrollHeight="300px" placeholder="Search" 
                 field="name" optionGroupLabel="name" optionGroupChildren="children">

src/AppTopBar.vue

@@ -3,9 +3,6 @@
         <a class="menu-button" @click="$emit('menubutton-click')">
             <i class="pi pi-bars"></i>
         </a>
-        <router-link to="/" class="logo">
-            <img alt="logo" src="./assets/images/primevue-logo.png">
-        </router-link>
         <div class="app-theme" v-tooltip.bottom="theme">
             <img :src="'demo/images/themes/' + logoMap[theme]" />
         </div>

src/assets/styles/app/_content.scss

@@ -1,6 +1,5 @@
 .layout-content {
     margin-left: 250px;
-    padding-top: 70px;
 
     .content-section {
         padding: 2rem;

src/assets/styles/app/_menu.scss

@@ -1,20 +1,40 @@
 .layout-sidebar {
     position: fixed;
     left: 0;
-    top: 70px;
+    top: 0;
-    height: calc(100% - 70px);
+    height: 100%;
     background-color: var(--surface-a);
     width: 250px;
-    border-right: 1px solid var(--surface-d);
     user-select: none;
     transition: transform .4s cubic-bezier(.05,.74,.2,.99);
     display: flex;
     flex-direction: column;
 
+    .logo {
+        min-height: 70px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-bottom: 1px solid var(--surface-d);
+        z-index: 1;
+        border-right: 1px solid var(--surface-d);
+
+        img {
+            width: 180px;
+        }
+
+        &:focus {
+            outline: 0 none;
+            transition: box-shadow .2s;
+            box-shadow: 0 0 0 0.2rem $focusBorderColor;
+        }
+    }
+
     .layout-menu {
         padding: 0 1rem;
         overflow-y: auto;
         flex-grow: 1;
+        border-right: 1px solid var(--surface-d);
 
         .menu-category {
             display: block;
@@ -96,5 +116,6 @@
         padding: 1.25rem 1rem;
         border-bottom: 1px solid var(--surface-d);
         background-color: var(--surface-a);
+        border-right: 1px solid var(--surface-d);
     }
 }

src/assets/styles/app/_topbar.scss

@@ -2,16 +2,13 @@
     background-color: var(--surface-a);
     padding: 0;
     height: 70px;
-    position: fixed;
-    top: 0;
-    left: 0;
     width: 100%;
-    z-index: 997;
     box-shadow: 0 0 4px rgba(0,0,0,0.25);
     border-bottom: 1px solid var(--surface-d);
     display: flex;
     align-items: center;
     padding: 0 35px;
+    padding-left: 285px;
 
     .menu-button {
         display: none;
@@ -33,18 +30,6 @@
         }
     }
 
-    .logo {
-        img {
-            width: 180px;
-        }
-
-        &:focus {
-            outline: 0 none;
-            transition: box-shadow .2s;
-            box-shadow: 0 0 0 0.2rem $focusBorderColor;
-        }
-    }
-
     .app-theme {
         background-color: var(--primary-color);
         color: var(--primary-color-text);
@@ -53,7 +38,6 @@
         box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
         width: 39px;
         height: 39px;
-        margin-left: 70px;
     
         img {
             width: 25px;