feat(gui-v2): add sidebar switcher to header

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/nc-gui-v2/app.vue

@@ -2,6 +2,7 @@
 import MdiAt from '~icons/mdi/at'
 import MdiLogout from '~icons/mdi/logout'
 import MdiDotsVertical from '~icons/mdi/dots-vertical'
+import MaterialSymbolsMenu from '~icons/material-symbols/menu'
 import { navigateTo } from '#app'
 
 const { $state } = useNuxtApp()
@@ -15,8 +16,8 @@ const signOut = () => {
 
 <template>
   <v-app>
-    <v-app-bar class="elevation-1" color="primary" app clipped-left dense dark height="48">
-      <div class="d-flex align-center" style="flex: 1">
+    <v-app-bar class="shadow-md bg-primary" height="48">
+      <div class="flex items-center flex-1">
         <v-toolbar-title>
           <v-tooltip bottom>
             {{ $t('general.home') }}
@@ -47,6 +48,12 @@ const signOut = () => {
 
           <general-language class="mr-3" />
 
+          <MaterialSymbolsMenu
+            v-if="$state.signedIn.value"
+            class="block text-xl cursor-pointer xl:(hidden)"
+            @click="$state.sidebarOpen.value = !$state.sidebarOpen.value"
+          />
+
           <template v-if="$state.signedIn.value">
             <v-menu class="leading-8">
               <template #activator="{ props }">

packages/nc-gui-v2/composables/useGlobalState.ts

@@ -1,8 +1,8 @@
-import { usePreferredDark, usePreferredLanguages, useStorage } from '@vueuse/core'
+import { breakpointsTailwind, usePreferredDark, usePreferredLanguages, useStorage } from '@vueuse/core'
 import { useJwt } from '@vueuse/integrations/useJwt'
 import type { JwtPayload } from 'jwt-decode'
-import { computed, toRefs, useNuxtApp, useTimestamp, watch } from '#imports'
-import type { Actions, Getters, GlobalState, State, User } from '~/lib/types'
+import { computed, ref, toRefs, useBreakpoints, useNuxtApp, useTimestamp, watch } from '#imports'
+import type { Actions, Getters, GlobalState, StoredState, User } from '~/lib/types'
 
 const storageKey = 'nocodb-gui-v2'
 
@@ -27,6 +27,8 @@ export const useGlobalState = (): GlobalState => {
   const preferredLanguages = $(usePreferredLanguages())
   /** get the preferred dark mode setting, according to browser settings */
   const prefersDarkMode = $(usePreferredDark())
+  /** get current breakpoints (for enabling sidebar) */
+  const breakpoints = useBreakpoints(breakpointsTailwind)
 
   /** reactive timestamp to check token expiry against */
   const timestamp = $(useTimestamp({ immediate: true, interval: 100 }))
@@ -63,10 +65,13 @@ export const useGlobalState = (): GlobalState => {
   }, 'en' /** fallback locale */)
 
   /** State */
-  const initialState: State = { token: null, user: null, lang: preferredLanguage, darkMode: prefersDarkMode }
+  const initialState: StoredState = { token: null, user: null, lang: preferredLanguage, darkMode: prefersDarkMode }
+
+  /** is sidebar open */
+  const sidebarOpen = ref(breakpoints.greater('md').value)
 
   /** saves a reactive state, any change to these values will write/delete to localStorage */
-  const storage = $(useStorage<State>(storageKey, initialState))
+  const storage = $(useStorage<StoredState>(storageKey, initialState))
 
   /** current token ref, used by `useJwt` to reactively parse our token payload */
   let token = $computed({
@@ -134,5 +139,5 @@ export const useGlobalState = (): GlobalState => {
     { immediate: true },
   )
 
-  return { ...toRefs(storage), signedIn, signOut, signIn }
+  return { ...toRefs(storage), signedIn, signOut, signIn, sidebarOpen }
 }

packages/nc-gui-v2/lib/types.ts

@@ -9,13 +9,17 @@ export interface User {
   roles: (Role | string)[]
 }
 
-export interface State {
+export interface StoredState {
   token: string | null
   user: User | null
   lang: string
   darkMode: boolean
 }
 
+export interface State extends StoredState {
+  sidebarOpen: boolean
+}
+
 export interface Getters {
   signedIn: ComputedRef<boolean>
 }

packages/nc-gui-v2/pages/projects/index.vue

@@ -33,14 +33,14 @@ const route = useRoute()
 const { $api, $state } = useNuxtApp()
 
 const response = await $api.project.list({})
-const projects = $ref(response.list)
+const projects = $ref(Array(100).fill(...response.list))
 const activePage = $ref(navDrawerOptions[0].title)
 </script>
 
 <template>
   <NuxtLayout>
     <template #sidebar>
-      <v-navigation-drawer :border="0">
+      <v-navigation-drawer v-model="$state.sidebarOpen.value" :border="0">
         <div class="flex flex-col h-full">
           <div class="flex p-4">
             <v-menu class="select-none">
@@ -106,7 +106,7 @@ const activePage = $ref(navDrawerOptions[0].title)
 
     <v-container class="flex-1 mb-12">
       <div class="flex">
-        <div class="flex-1 prose-xl p-2">
+        <div class="flex-1 text-2xl md:text-4xl font-bold text-gray-500 dark:text-white p-4">
           {{ activePage }}
         </div>
 

packages/nc-gui-v2/pages/projects/index/index.vue

@@ -32,7 +32,7 @@ const formatTitle = (title: string) =>
 </script>
 
 <template>
-  <div class="grid grid-cols-2 md:grid-cols-5 3xl:grid-cols-6 gap-6 md:(gap-y-16)">
+  <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 3xl:grid-cols-6 gap-6 md:(gap-y-16)">
     <div class="group flex flex-col items-center gap-2">
       <v-menu>
         <template #activator="{ props }">