refactor(gui-v2): show header again

packages/nc-gui-v2/app.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { breakpointsTailwind } from '@vueuse/core'
 import { navigateTo } from '#app'
-import { computed, ref, useBreakpoints, useGlobal, useSidebar } from '#imports'
+import { computed, provideSidebar, ref, useBreakpoints, useGlobal } from '#imports'
 
 /** get current breakpoints (for enabling sidebar) */
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
 const { signOut, signedIn, isLoading, user } = $(useGlobal())
 
-const { isOpen, toggle, hasSidebar } = useSidebar({ isOpen: signedIn && breakpoints.greater('md').value })
+const { isOpen, toggle, hasSidebar } = provideSidebar({ isOpen: signedIn && breakpoints.greater('md').value })
 
 const sidebar = ref<HTMLDivElement>()
 
@@ -21,8 +21,8 @@ const logout = () => {
 </script>
 
 <template>
-  <a-layout class="min-h-[100vh]">
-    <a-layout-header class="hidden flex !bg-primary items-center text-white px-4 shadow-md">
+  <a-layout>
+    <a-layout-header class="flex !bg-primary items-center text-white px-4 shadow-md">
       <material-symbols-menu v-if="signedIn && hasSidebar" class="text-xl cursor-pointer" @click="toggle" />
 
       <div class="flex-1" />
@@ -75,6 +75,7 @@ const logout = () => {
       </div>
     </a-layout-header>
 
+    <a-layout>
       <a-layout-sider
         :collapsed="!isOpen"
         width="300"
@@ -88,4 +89,5 @@ const logout = () => {
 
       <NuxtPage />
     </a-layout>
+  </a-layout>
 </template>

packages/nc-gui-v2/assets/style-v2.scss

@@ -2,7 +2,7 @@
 @import 'ant-design-vue/dist/antd.min.css';
 
 :root {
-  --header-height: 0px;
+  --header-height: 56px;
 }
 
 .ant-layout-header {