changes

app/components/TopMenu.vue

@@ -3,10 +3,10 @@
     class="navbar has-shadow sticky top-0 px-3"
     role="navigation"
   >
-    <div class="navbar-brand mr-5">
+    <div class="navbar-brand mr-3">
       <div class="navbar-item is-gap-1">
         <div class="size-4 has-background-primary rounded-full"></div>
-        <span class="fs-16 font-semibold has-text-primary">{{ $dayjs().format("DD/MM") }}</span>
+        <span class="font-semibold has-text-primary">{{ $dayjs().format("DD/MM") }}</span>
       </div>
       <a
         class="navbar-item p-0 has-text-primary"
@@ -42,7 +42,7 @@
       </a>
     </div>
     <div
-      class="navbar-menu"
+      class="navbar-menu is-flex-shrink-1"
       id="navMenu"
     >
       <div class="navbar-start is-gap-1 is-align-items-center">
@@ -95,20 +95,22 @@
           </div>
         </template>
       </div>
-      <!-- <div class="navbar-end">
+      <div class="navbar-end is-gap-1 is-align-items-center">
-        <a class="navbar-item" @click="changeTab(tabConfig)" v-if="tabConfig">
+        <!-- v-if="tabConfig" -->
-          <Icon name="material-symbols:settings-outline-rounded" :size="20" />
+        <a
+          class="navbar-item rounded-lg p-1.5"
+          @click="changeTab(tabConfig)"
+        >
+          <Icon
+            name="material-symbols:settings-outline-rounded"
+            :size="20"
+            class="has-text-grey-60"
+          />
         </a>
-        <a class="navbar-item" @click="openProfile()" v-if="avatar">
+        <!-- @click="openProfile()" v-if="avatar" -->
-          <Avatarbox v-bind="avatar"></Avatarbox>
+        <a
-        </a>
+          class="navbar-item rounded-full p-0 max-w-full is-flex is-gap-2 is-justify-content-space-between is-align-items-center"
-      </div> -->
+        >
-      <div class="navbar-end">
-        <a class="navbar-item is-flex is-gap-2 is-justify-content-space-between is-align-items-center">
-          <div>
-            <p class="fs-13">Xin chào,</p>
-            <p class="fs-14 font-bold">Quản lý</p>
-          </div>
           <Avatarbox
             text="Q"
             type="findata"

app/components/common/Avatarbox.vue

@@ -9,9 +9,9 @@ const props = defineProps({
 <template>
   <div
     @click="$emit('justclick')"
-    class="rounded-full mx-0 px-0 size-10 font-bold is-flex is-justify-content-center is-align-items-center"
+    class="avatarbox rounded-full mx-0 px-0 size-9 font-bold is-flex is-justify-content-center is-align-items-center"
     :style="{
-      border: image ? 'none' : '1px solid var(--bulma-grey-70)',
+      border: image ? 'none' : '1px solid var(--bulma-grey-90)',
     }"
   >
     <figure
@@ -26,3 +26,11 @@ const props = defineProps({
     <span v-else>{{ text }}</span>
   </div>
 </template>
+<style scoped>
+.avatarbox:hover {
+  background-color: var(--bulma-grey-100);
+  &:hover {
+    background-color: var(--bulma-grey-95);
+  }
+}
+</style>

app/components/snackbar/Info.vue

@@ -1,7 +1,7 @@
 <template>
   <p
     v-html="props.content"
-    class="fs-14"
+    class="fs-14 has-text-white"
   ></p>
 </template>
 <script setup>

app/components/snackbar/SnackBar.vue

@@ -14,7 +14,7 @@ setTimeout(() => store.commit("snackbar", undefined), 2500);
 
 <template>
   <div
-    class="snackbar is-flex is-justify-content-space-between is-align-items-center is-gap-1 pl-3 pr-1.5 py-2 rounded-md"
+    class="snackbar is-flex is-justify-content-space-between is-align-items-center is-gap-2 pl-3 pr-1.5 py-2 rounded-md"
   >
     <Info
       v-if="component === 'Info'"

app/error.vue

@@ -28,6 +28,7 @@ function reload() {
     <Icon
       name="material-symbols:warning-rounded"
       :size="50"
+      class="has-text-danger-60"
     />
     <h1 class="font-semibold is-size-3">Đã xảy ra sự cố</h1>
     <p class="has-text-grey">

app/plugins/03-api-loader.js

@@ -14,8 +14,15 @@ export default defineNuxtPlugin((nuxtApp) => {
   const notReadyConns = connlist.filter((v) => !v.ready);
 
   async function getReady() {
+    try {
       await $getapi(notReadyConns);
       store.ready = true;
+    } catch (error) {
+      showError({
+        statusCode: 500,
+        statusMessage: `api-loader plugin failed: ${error.message}`,
+      });
+    }
   }
   if (notReadyConns.length > 0) getReady();
 });

my-bulma-project.css

@@ -11635,7 +11635,7 @@ a.navbar-item.is-active, a.navbar-item.is-selected,
   margin: 0.5rem 0;
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1199px) {
   .navbar > .container {
     display: block;
   }
@@ -11684,7 +11684,7 @@ a.navbar-item.is-active, a.navbar-item.is-selected,
     padding-bottom: var(--bulma-navbar-height);
   }
 }
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1200px) {
   .navbar,
   .navbar-menu,
   .navbar-start,

my-bulma-project.scss

@@ -13,6 +13,7 @@ $grey: #69748c;
 @use "bulma/sass" with (
   $family-primary: string.unquote("'Inter', 'SF Pro', 'Helvetica', 'Arial', sans-serif"),
   $family-monospace: string.unquote("'Roboto Mono', monospace"),
+  $navbar-breakpoint: 1200px,
   $primary: $blue,
   $link: $blue,
   $info: $cyan,