updated sorting

components/Collection/InnerDetails.js

@@ -24,8 +24,15 @@ const InnerDetails = ({ subCategories }) => {
   // );
   // );
 
 
   const sortedSubCategories = [...subCategories].sort((a, b) => {
   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);
   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 (
   return (
     <section className="collection-m-section sec_padd">
     <section className="collection-m-section sec_padd">
       <div className="custom_container container">
       <div className="custom_container container">

components/Collection/InnerDetailsSubCategory.js

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

styles/globals.css

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