fix: truncate sidebar item label & transalation refactor

frontend/src/components/Layouts/AppSidebar.vue

@@ -10,7 +10,7 @@
       <div class="mb-3 flex flex-col">
         <SidebarLink
           id="notifications-btn"
-          :label="__('Notifications')"
+          label="Notifications"
           :icon="NotificationsIcon"
           :isCollapsed="isSidebarCollapsed"
           @click="() => toggleNotificationPanel()"
@@ -67,7 +67,7 @@
             <SidebarLink
               v-for="link in view.views"
               :icon="link.icon"
-              :label="__(link.label)"
+              :label="link.label"
               :to="link.to"
               :isCollapsed="isSidebarCollapsed"
               class="mx-2 my-0.5"
@@ -78,13 +78,13 @@
     </div>
     <div class="m-2 flex flex-col gap-1">
       <SidebarLink
-        :label="__('Docs')"
+        label="Docs"
         :isCollapsed="isSidebarCollapsed"
         icon="book-open"
         @click="() => openDocs()"
       />
       <SidebarLink
-        :label="isSidebarCollapsed ? __('Expand') : __('Collapse')"
+        :label="isSidebarCollapsed ? 'Expand' : 'Collapse'"
         :isCollapsed="isSidebarCollapsed"
         @click="isSidebarCollapsed = !isSidebarCollapsed"
         class=""

frontend/src/components/SidebarLink.vue

@@ -8,8 +8,8 @@
       class="flex w-full items-center justify-between duration-300 ease-in-out"
       :class="isCollapsed ? 'ml-[3px] p-1' : 'px-2 py-1'"
     >
-      <div class="flex items-center">
-        <Tooltip :text="label" placement="right" :disabled="!isCollapsed">
+      <div class="flex items-center truncate">
+        <Tooltip :text="__(label)" placement="right" :disabled="!isCollapsed">
           <slot name="icon">
             <span class="grid h-4.5 w-4.5 flex-shrink-0 place-items-center">
               <FeatherIcon
@@ -21,16 +21,18 @@
             </span>
           </slot>
         </Tooltip>
-        <span
-          class="flex-1 flex-shrink-0 text-base duration-300 ease-in-out"
-          :class="
-            isCollapsed
-              ? 'ml-0 w-0 overflow-hidden opacity-0'
-              : 'ml-2 w-auto opacity-100'
-          "
-        >
-          {{ label }}
-        </span>
+        <Tooltip :text="__(label)" placement="right" :disabled="isCollapsed" hoverDelay="1.5">
+          <span
+            class="flex-1 flex-shrink-0 truncate text-base duration-300 ease-in-out"
+            :class="
+              isCollapsed
+                ? 'ml-0 w-0 overflow-hidden opacity-0'
+                : 'ml-2 w-auto opacity-100'
+            "
+          >
+            {{ __(label) }}
+          </span>
+        </Tooltip>
       </div>
       <slot name="right" />
     </div>