updated sorting

components/Collection/InnerDetails.js

@@ -24,8 +24,15 @@ const InnerDetails = ({ subCategories }) => {
   // );
 
   const sortedSubCategories = [...subCategories].sort((a, b) => {
+  if (sort === "name-asc") return a.title.localeCompare(b.title);
+  if (sort === "name-desc") return b.title.localeCompare(a.title);
+  // Default: sort by rank
   return (Number(a.rank) || 999) - (Number(b.rank) || 999);
 });
+
+//   const sortedSubCategories = [...subCategories].sort((a, b) => {
+//   return (Number(a.rank) || 999) - (Number(b.rank) || 999);
+// });
   return (
     <section className="collection-m-section sec_padd">
       <div className="custom_container container">

components/Collection/InnerDetailsSubCategory.js

@@ -7,7 +7,6 @@ import FilterButton from "../Common/FilterButton";
 import { cleanImage } from "../services/imageHandling";
 
 const InnerDetailsSubCategory = ({ products }) => {
- 
   const router = useRouter();
   const { category, subCategory } = router.query;
 const [showFilter, setShowFilter] = useState(false);
@@ -20,12 +19,17 @@ const [showFilter, setShowFilter] = useState(false);
   };
 
   // Optional sorting
-  const sortedProducts = [...products].sort((a, b) => {
-    if (sort === "name-asc") return a.title.localeCompare(b.title);
-    if (sort === "name-desc") return b.title.localeCompare(a.title);
-    return 0;
-  });
-
+  // const sortedProducts = [...products].sort((a, b) => {
+  //   if (sort === "name-asc") return a.title.localeCompare(b.title);
+  //   if (sort === "name-desc") return b.title.localeCompare(a.title);
+  //   return 0;
+  // });
+  const sortedSubCategories = [...products].sort((a, b) => {
+  if (sort === "name-asc") return a.title.localeCompare(b.title);
+  if (sort === "name-desc") return b.title.localeCompare(a.title);
+  // Default: sort by rank
+  return (Number(a.rank) || 999) - (Number(b.rank) || 999);
+});
   return (
     <section className="collection-m-section sec_padd">
       <div className="custom_container container">
@@ -72,7 +76,7 @@ const [showFilter, setShowFilter] = useState(false);
 
         {/* Products */}
         <Row>
-          {sortedProducts.map((product) => (
+          {sortedSubCategories.map((product) => (
             <Col md={6} key={product.productSlug}>
               <div className="collections-item">
                 <Link

components/Layout/Header.js

@@ -239,7 +239,7 @@ export default function Navigation({ collectionsData = [] }) {
                                     }}
                                     className={
                                       collectionL1.categorySlug ===
-                                      cat.categorySlug
+                                        cat.categorySlug
                                         ? "active"
                                         : ""
                                     }
@@ -263,7 +263,7 @@ export default function Navigation({ collectionsData = [] }) {
                                     onMouseEnter={() => setCollectionL2(sub)}
                                     className={
                                       collectionL2.subCategorySlug ===
-                                      sub.subCategorySlug
+                                        sub.subCategorySlug
                                         ? "active"
                                         : ""
                                     }
@@ -655,32 +655,32 @@ export default function Navigation({ collectionsData = [] }) {
                   {/* ‹ Brands */}
                 </button>
 
-               
-                 
-                
-                  <Link href="/brands/valcucine">
-                            <Image
-                              width={177}
-                              height={60}
-                              src="/image/header-logo/valcucine.png"
-                            />
-                          </Link>
-                          <Link href="/brands/rimadesio">
-                            <Image
-                              width={177}
-                              height={60}
-                              src="/image/header-logo/rimadesio.png"
-                            />
-                          </Link>
-                          <Link href="/brands/inalco">
-                            <Image
-                              width={177}
-                              height={60}
-                              src="/image/header-logo/inalco.png"
-                            />
-                          </Link>
-              
-              
+
+
+
+                <Link href="/brands/valcucine">
+                  <Image
+                    width={177}
+                    height={60}
+                    src="/image/header-logo/valcucine.png"
+                  />
+                </Link>
+                <Link href="/brands/rimadesio">
+                  <Image
+                    width={177}
+                    height={60}
+                    src="/image/header-logo/rimadesio.png"
+                  />
+                </Link>
+                <Link href="/brands/inalco">
+                  <Image
+                    width={177}
+                    height={60}
+                    src="/image/header-logo/inalco.png"
+                  />
+                </Link>
+
+
               </>
             )}
           </Nav>

styles/globals.css

@@ -754,11 +754,18 @@ input:focus-visible {
 .dropdown-custom {
   /* position: relative; */
 }
-
+.navbar-expand-lg .navbar-nav .dropdown-menu{
+transition: all 0.2s;
+  transform: translateY(40px);
+}
 .dropdown-custom:hover .dropdown-menu {
   display: block;
   visibility: visible;
   opacity: 9;
+
+visibility: visible;
+transform: translateY(0);
+opacity: 1;
 }
 .navList01 {
   list-style: none;
@@ -1126,6 +1133,7 @@ footer a:hover {
   }
   .custom_container p{
       margin: 0.5rem 0 !important;
+      /* line-height: 1.2rem; */
   }
   .innercontent-section .contactPage-address .list-unstyled{
     margin-top: 1rem;
@@ -1416,7 +1424,7 @@ footer a:hover {
     bottom: inherit;
 }
   body {
-    font-size: 14px;
+    font-size: 16px;
   }
   footer a,
   footer li {