Adjust all layout (#7)

Author: piovezanfernando

resources/dist/index.css

@@ -13,20 +13,14 @@
     "lint:fix": "eslint \"src/**/*.{js,ts,vue}\" --fix"
   },
   "dependencies": {
-    "@guolao/vue-monaco-editor": "^1.6.0",
-    "@mdi/font": "^7.4.47",
-    "@primevue/themes": "^4.5.2",
-    "ace-builds": "^1.43.5",
+    "@vicons/ionicons5": "^0.13.0",
+    "@vueuse/core": "^14.1.0",
     "fuse.js": "^7.0.0",
     "highlight.js": "^11.11.1",
+    "naive-ui": "^2.43.2",
     "pinia": "^2.3.1",
-    "primeflex": "^4.0.0",
-    "primeicons": "^7.0.0",
-    "primevue": "^4.5.2",
-    "roboto-fontface": "^0.10.0",
     "vue": "^3.4.21",
-    "vue-router": "^4.3.0",
-    "vuetify": "^3.5.10"
+    "vue-router": "^4.3.0"
   },
   "devDependencies": {
     "@types/node": "^20.11.24",
@@ -40,7 +34,6 @@
     "tailwindcss": "^3.4.17",
     "typescript": "^5.4.2",
     "vite": "^5.1.5",
-    "vite-plugin-vuetify": "^2.0.1",
     "vue-tsc": "^2.0.6"
   }
 }

resources/dist/index.js

@@ -1,39 +1,73 @@
 <template>
-  <div class="h-screen flex flex-column">
-    <TopNavbar @open-search="isSearchVisible = true" />
-    <Splitter style="height: calc(100vh - 4rem)" class="mb-5">
-      <SplitterPanel :size="20" :minSize="10" class="flex align-items-center justify-content-center">
-          <SidebarMenu class="w-full h-full"/>
-      </SplitterPanel>
-      <SplitterPanel :size="80" :minSize="30">
-        <Splitter layout="vertical">
-          <SplitterPanel :size="50" :minSize="20" class="flex align-items-center justify-content-center">
-            <RequestPanel class="w-full h-full"/>
-          </SplitterPanel>
-          <SplitterPanel :size="50" :minSize="20" class="flex align-items-center justify-content-center">
-            <ResponsePanel class="w-full h-full"/>
-          </SplitterPanel>
-        </Splitter>
-      </SplitterPanel>
-    </Splitter>
-    <SearchPalette v-model:visible="isSearchVisible" />
-  </div>
+  <n-config-provider :theme="currentTheme" :theme-overrides="currentThemeOverrides">
+    <n-message-provider>
+      <n-notification-provider>
+        <n-global-style />
+        <div class="h-screen flex flex-column">
+          <TopNavbar @open-search="isSearchVisible = true" @toggle-theme="toggleTheme" :is-dark="isDark" />
+          <n-split 
+            direction="horizontal" 
+            :default-size="0.2"
+            :min="0.1"
+            :max="0.4"
+            style="height: calc(100vh - 4rem)"
+          >
+            <template #1>
+              <SidebarMenu ref="sidebarRef" class="w-full h-full"/>
+            </template>
+            <template #2>
+              <n-split 
+                direction="vertical"
+                :default-size="0.5"
+                :min="0.2"
+                :max="0.8"
+              >
+                <template #1>
+                  <RequestPanel class="w-full h-full"/>
+                </template>
+                <template #2>
+                  <ResponsePanel class="w-full h-full"/>
+                </template>
+              </n-split>
+            </template>
+          </n-split>
+          <SearchPalette v-model:visible="isSearchVisible" />
+        </div>
+      </n-notification-provider>
+    </n-message-provider>
+  </n-config-provider>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, provide, computed } from 'vue';
+import { NConfigProvider, NMessageProvider, NNotificationProvider, NGlobalStyle, NSplit } from 'naive-ui';
+import { darkTheme, customDarkTheme, customLightTheme } from './theme';
 import TopNavbar from './components/TopNavbar.vue';
 import SidebarMenu from './components/SidebarMenu.vue';
 import RequestPanel from './components/RequestPanel.vue';
 import ResponsePanel from './components/ResponsePanel.vue';
 import SearchPalette from './components/SearchPalette.vue';
-import Splitter from 'primevue/splitter';
-import SplitterPanel from 'primevue/splitterpanel';
 import { useApiStore } from './stores/api';
+import { useLocalStorage } from '@vueuse/core';
 
 const apiStore = useApiStore();
 
 const isSearchVisible = ref(false);
+const sidebarRef = ref();
+
+// Theme management
+const isDark = useLocalStorage('theme-dark', true);
+
+const currentTheme = computed(() => isDark.value ? darkTheme : null);
+const currentThemeOverrides = computed(() => isDark.value ? customDarkTheme : customLightTheme);
+
+const toggleTheme = () => {
+  isDark.value = !isDark.value;
+};
+
+// Provide sidebar ref and theme to children
+provide('sidebarRef', sidebarRef);
+provide('isDark', isDark);
 
 onMounted(async () => {
   await apiStore.fetchRoutes();
@@ -50,4 +84,10 @@ onMounted(async () => {
 .flex-column {
   flex-direction: column;
 }
+.w-full {
+  width: 100%;
+}
+.h-full {
+  height: 100%;
+}
 </style>