improved user experience tab control

resources/js/client-custom/tabControll.js

@@ -13,4 +13,8 @@ document.addEventListener('DOMContentLoaded', function () {
             });
         });
     }
+
+    if(window.location.hash) {
+       document.querySelector(`.tab-control [href="${window.location.hash}"]`)?.click();
+    }
 });

resources/lang/fa.json

@@ -188,6 +188,7 @@
     "Expire date": "تاریخ انقضا",
     "Extra description": "توضیحات اضافه",
     "False": "خیر",
+    "Favorites": "علاقه‌مندی‌ها",
     "Feature image": "تصویر شاخص",
     "File": "پرونده",
     "File ext": "پسوند پرونده",
@@ -219,7 +220,7 @@
     "Image deleted successfully": "تصویر حذف شد",
     "Image uploaded successfully": "تصویر افزوده شد",
     "Images": "تصاویر",
-    "Increase \/ decrease by Admin": "افزودن / کاهش توسط مدیر سایت",
+    "Increase \/ decrease by Admin": "افزودن \/ کاهش توسط مدیر سایت",
     "Index image": "تصویر شاخص",
     "Information": "اطلاعات",
     "Interaction": "تعامل",

resources/views/segments/customer/AvisaCustomer/AvisaCustomer.blade.php

@@ -59,6 +59,12 @@
                             {{__("Comments")}}
                         </a>
                     </li>
+                    <li>
+                        <a href="#favs">
+                            <i class="ri-hearts-line"></i>
+                            {{__("Favorites")}}
+                        </a>
+                    </li>
                     <li>
                         <a href="{{route('client.sign-out')}}">
                             <i class="ri-logout-box-line"></i>
@@ -334,6 +340,9 @@
                 <div class="tab" id="addresses">
                     {{-- WIP submit new ticket --}}
                 </div>
+                <div class="tab" id="favs">
+                    {{-- WIP submit new ticket --}}
+                </div>
             </div>
         </div>
     </div>

resources/views/segments/customer/AvisaCustomer/AvisaCustomer.scss

@@ -1,5 +1,6 @@
 #AvisaCustomer {
     padding: 2rem 0;
+
     .avisa-avatar {
         height: 128px;
         width: 128px;
@@ -24,6 +25,9 @@
                 display: block;
                 font-size: 20px;
                 transition: 500ms;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow-x: hidden;
 
                 &.active, &:hover {
                     background: var(--xshop-secondary);