Update and refactor.

assets/haditha/scss/haditha.css

@@ -14,14 +14,15 @@
 @import "@nuxt/ui";
 
 /* custom imports */
-@import "../../../../../assets/common/scss/_IRANSansX.scss";
+/* @import "../../../../../assets/common/scss/_IRANSansX.scss"; */
 @import "../../../../../assets/common/scss/_takrim.scss";
 @import "../../../../../assets/common/scss/_vazir.scss";
-@import "../../../../../assets/common/scss/_estedad.scss";
-@import "../../../../../assets/common/scss/_sahel-single-font-weight.scss";
+/* @import "../../../../../assets/common/scss/_estedad.scss"; */
+/* @import "../../../../../assets/common/scss/_sahel-single-font-weight.scss"; */
 
 @theme {
-  --font: vazir, sahel, estadad, IRANSansX, "Public Sans", sans-serif;
+  /* --font: vazir, sahel, estadad, IRANSansX, "Public Sans", sans-serif; */
+  --font: vazir, "Public Sans", sans-serif;
   --ar-font: Takrim;
   --breakpoint-sm: 360px;
   --breakpoint-md: 720px;
@@ -38,17 +39,6 @@
 } */
 /* @source  */
 
-/* @import "../../../../../assets/common/scss/customizations/_variables.scss"; */
-/* @import "../../../../../assets/common/scss/customizations/_list-variables.scss"; */
-/* @import "../../../../../assets/common/scss/customizations/_monir-variables.scss"; */
-/* @import "../../../../../assets/common/scss/components/components.scss"; */
-/* @import "../../../../../assets/common/scss/plugins/plugins.scss"; */
-/* @import "../../../../../assets/common/scss/mixin.scss"; */
-/* @import "../../../../../assets/common/scss/placeholder.scss"; */
-/* @import "../../../../../assets/common/scss/layouts/layouts.scss"; */
-/* @import "../../../../../assets/common/scss/common.scss"; */
-/* @import "../../../../../assets/common/scss/responsive/responsive.scss"; */
-
 html {
   height: 100%;
   direction: rtl;
@@ -108,4 +98,4 @@ html {
   scrollbar-color: #ccc #eee;
 }
 
-@import "./responsive/responsive.css";
+/* @import "./responsive/responsive.css"; */

components/haditha/NavigationMenu.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useAuthStore } from "@stores/authStore";
 const route = useRoute();
+const router = useRouter();
 // {
 //     label: "چت بات",
 //     icon: "haditha:chat-bot",
@@ -80,7 +81,7 @@ const items = ref([
         type: "button" as const,
         onSelect(e: Event) {
           e.preventDefault();
-          logout();
+          localLogout();
         },
       },
     ],
@@ -125,7 +126,7 @@ const desktopLeftMenu = ref([
         type: "button" as const,
         onSelect(e: Event) {
           e.preventDefault();
-          logout();
+          localLogout();
         },
       },
     ],
@@ -134,7 +135,7 @@ const desktopLeftMenu = ref([
 
 const isMobile = ref(false);
 const rerenderNavigation = ref(1);
-const { isAuthenticatedGetter, isRealUserGetter } = useAuthStore();
+const { isAuthenticatedGetter,logout } = useAuthStore();
 
 const filterLeftItem = () => {
   if (isAuthenticatedGetter) {
@@ -182,9 +183,24 @@ const setMenu = () => {
 
 setMenu();
 
+const localLogout = () => {
+  logout();
+
+  router.push({
+    name: "hadithaLogin",
+  });
+};
 // if(!(isAuthenticatedGetter && isRealUserGetter))
 // items.value = items.value.filter((item) => item.to != "/haditha/favorites");
 
+// watch(
+//   () => isAuthenticatedGetter,
+//   (newVal) => {
+//     setMenu();
+//   },
+//   { immediate: true }
+// );
+
 onMounted(() => {
   if (window?.outerWidth < 991) {
     isMobile.value = true;
@@ -195,7 +211,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="fixed bottom-2 main-navbar lg:bottom-auto lg:top-2 right-0 left-0 pt-2">
+  <div
+    class="fixed bottom-2 main-navbar lg:bottom-auto lg:top-2 right-0 left-0 pt-2"
+  >
     <UContainer class="flex my-navbar mx-3 lg:mx-auto">
       <!-- :disableHoverTrigge="isMobile" -->
       <UNavigationMenu

components/haditha/hero-page/SectionOne.vue

@@ -42,7 +42,8 @@ const AutoComplation = defineAsyncComponent(() =>
       <navigation-menu></navigation-menu>
 
       <div class="logo-container flex justify-center flex-col items-center">
-        <img fit="auto" quality="80" placeholder src="/img/haditha/logo.png" />
+        <!-- <img fit="auto" quality="80" placeholder src="/img/haditha/logo.png" /> -->
+        <NuxtImg src="/img/haditha/logo.png" />
         <div class="title">
           کاوش با
           <span class="badge-style me-1"> هوش مصنوعی </span>

pages/haditha/favorites/index.vue

@@ -95,8 +95,8 @@ const loadMore = async () => {
   });
 };
 
-// const { isFetching } = useInfiniteScroll(loadMore, "favoriteInfiniteScroll");
-const { isFetching } = useInfiniteScroll(async () => {
+// const { isFetching } = useCustomInfiniteScroll(loadMore, "favoriteInfiniteScroll");
+const { isFetching } = useCustomInfiniteScroll(async () => {
   await loadMore();
 });
 

pages/haditha/library/index.vue

@@ -115,7 +115,7 @@ const loadMore = async () => {
 };
 // const { isFetching } = useInfiniteScroll(loadMore, "libraryInfiniteScroll");
 
-const { isFetching } = useInfiniteScroll(async () => {
+const { isFetching } = useCustomInfiniteScroll(async () => {
   await loadMore();
 });
 // #endregion methods

pages/haditha/public-pages/about-us.vue

@@ -27,7 +27,7 @@ const NavigationMenu = defineAsyncComponent(() =>
   <HadithaLayout>
     <div class="page-container h-full">
       <!-- max-w-[var(--ui-container-two)] -->
-      <UContainer class="page-inner-container sm:px-6 lg:px-4">
+      <UContainer class="page-inner-container mx-auto max-w-[var(--ui-container-two)] sm:px-6 lg:px-4">
         <navigation-menu></navigation-menu>
 
         <div

pages/haditha/public-pages/contactus.vue

@@ -27,7 +27,7 @@ const NavigationMenu = defineAsyncComponent(() =>
   <HadithaLayout>
     <div class="page-container h-full">
       <!-- max-w-[var(--ui-container-two)] -->
-      <UContainer class="page-inner-container sm:px-6 lg:px-4">
+      <UContainer class="page-inner-container mx-auto max-w-[var(--ui-container-two)] sm:px-6 lg:px-4">
         <span class="top-left-bgi z-0"></span>
 
         <navigation-menu></navigation-menu>

pages/haditha/public-pages/index.vue

@@ -129,7 +129,8 @@ onMounted(() => {
   <HadithaLayout>
     <div class="page-container h-full">
       <!-- max-w-[var(--ui-container-two)] -->
-      <UContainer class="page-inner-container sm:px-6 lg:px-4">
+      <UContainer
+      class="page-inner-container mx-auto max-w-[var(--ui-container-two)] sm:px-6 lg:px-4">      
         <navigation-menu></navigation-menu>
 
         <div class="page-header pt-38 pb-4 flex justify-between items-center">

pages/haditha/public-pages/rules.vue

@@ -27,7 +27,7 @@ const NavigationMenu = defineAsyncComponent(() =>
   <HadithaLayout>
     <div class="page-container h-full">
       <!-- max-w-[var(--ui-container-two)] -->
-      <UContainer class="page-inner-container sm:px-6 lg:px-4">
+      <UContainer class="page-inner-container mx-auto max-w-[var(--ui-container-two)] sm:px-6 lg:px-4">
         <navigation-menu></navigation-menu>
 
         <div

pages/haditha/search/index.vue

@@ -523,7 +523,7 @@ const loadMore = async () => {
   // } else status.value = "idle";
 };
 // For window scrolling
-const { isFetching } = useInfiniteScroll(async () => {
+const { isFetching } = useCustomInfiniteScroll(async () => {
   await loadMore();
 });
 // For a specific element