feat/page-cleaning: finished

app/components/pub/my-ui/content-switcher/content-switcher.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const props = defineProps<{
-  height: 200
+  height?: number
   activeTab?: 1 | 2
 }>()
 
@@ -12,7 +12,7 @@ function handleClick(value: 1 | 2) {
 </script>
 
 <template>
-  <div class="content-switcher" :style="`height: ${height}px`">
+  <div class="content-switcher" :style="`height: ${height || 200}px`">
     <div :class="`${activeTab === 1 ? 'active' : 'inactive'}`">
       <div class="content-wrapper">
         <div>
@@ -49,7 +49,7 @@ function handleClick(value: 1 | 2) {
   }
 
   .content-wrapper {
-    @apply p-4 2xl:p-5 overflow-hidden
+    @apply p-4 2xl:p-5 overflow-hidden grow
   }
   .inactive .content-wrapper {
     @apply p-0 w-0

app/components/pub/my-ui/doc-entry/colon.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-
+const { class: classProp } = defineProps<{
+  class?: string
+}>()
 </script>
 
 <template>
-  <div class="w-5 text-center">:</div>    
+  <div :class="`w-4 ps-1 ${classProp}`">:</div>
 </template>

app/components/pub/my-ui/menus/submenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type EncounterItem } from "../../../../handlers/encounter-process.handler";
+import { type EncounterItem } from "~/handlers/encounter-init.handler";
 
 const props = defineProps<{
   initialActiveMenu: string
@@ -18,22 +18,28 @@ function changeMenu(value: string) {
 </script>
 
 <template>
-  <div class="mt-4 flex gap-4">
+  <div class="flex">
     <!-- Menu Sidebar -->
-    <div v-if="data.length > 0" class="w-72 flex-shrink-0 rounded-md border bg-white shadow-sm dark:bg-neutral-950">
-      <div class="max-h-[calc(100vh-12rem)] overflow-y-auto p-2">
-        <button v-for="menu in data" :key="menu.id" :data-active="activeMenu === menu.id"
-          class="w-full rounded-md px-4 py-3 text-left text-sm transition-colors data-[active=false]:text-gray-700 data-[active=false]:hover:bg-gray-100 data-[active=true]:bg-primary data-[active=true]:text-white dark:data-[active=false]:text-gray-300 dark:data-[active=false]:hover:bg-neutral-800"
+    <div v-if="data.length > 0" class="w-56 2xl:w-64 flex-shrink-0 rounded-md border bg-white dark:bg-slate-800 shadow-sm">
+      <div class="max-h-[calc(100vh-12rem)] overflow-y-auto px-2 py-3">
+        <button
+          v-for="menu in data"
+          :key="menu.id"
+          :data-active="activeMenu === menu.id"
+          class="w-full rounded-md px-4 py-3 text-left text-xs 2xl:text-sm transition-colors data-[active=false]:text-gray-700 data-[active=false]:hover:bg-gray-100 data-[active=true]:bg-primary data-[active=true]:text-white dark:data-[active=false]:text-gray-300 dark:data-[active=false]:hover:bg-neutral-800"
           @click="changeMenu(menu.id)">
           {{ menu.title }}
         </button>
       </div>
     </div>
     <!-- Active Menu Content -->
-    <div v-if="data.find((m) => m.id === activeMenu)?.component"
-      class="flex-1 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
-      <component :is="data.find((m) => m.id === activeMenu)?.component"
-        v-bind="data.find((m) => m.id === activeMenu)?.props" />
+    <div class="p-4 2xl:p-5 flex-grow">
+      <div v-if="data.find((m) => m.id === activeMenu)?.component"
+        class="flex-1 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
+        <component
+          :is="data.find((m) => m.id === activeMenu)?.component"
+          v-bind="data.find((m) => m.id === activeMenu)?.props" />
+      </div>
     </div>
   </div>
 </template>

app/components/pub/my-ui/nav-content/ba.vue

@@ -20,7 +20,7 @@ function onClick(type: ClickType) {
     @click="onClick('draft')"
     class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
     </svg>
     {{ props.label }}