add Header for cart page

src/pages/menu/components/MenuList/MenuList.module.css

@@ -54,7 +54,7 @@
 }
 
 @media (min-width: 1025px) {
-  .menuSections{
+  .menuSections {
     padding: 0;
   }
 
@@ -630,28 +630,6 @@
   }
 }
 
-/* Skeleton Loading Styles */
-.skeletonContainer {
-  animation: skeletonPulse 1.5s ease-in-out infinite;
-}
-
-.skeletonContainer .ant-skeleton {
-  transition: all 0.3s ease;
-}
-
-.skeletonContainer .ant-skeleton-image {
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.skeletonContainer .ant-skeleton-input {
-  border-radius: 6px;
-}
-
-.skeletonContainer .ant-skeleton-button {
-  border-radius: 20px;
-}
-
 @keyframes skeletonPulse {
   0% {
     opacity: 1;
@@ -673,72 +651,6 @@
   }
 }
 
-.skeletonContainer .ant-skeleton-active .ant-skeleton-input,
-.skeletonContainer .ant-skeleton-active .ant-skeleton-image,
-.skeletonContainer .ant-skeleton-active .ant-skeleton-button {
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-  background-size: 200px 100%;
-  animation: skeletonShimmer 1.5s infinite;
-}
-
-/* Mobile-specific skeleton styles */
-@media (max-width: 768px) {
-  .skeletonContainer .ant-skeleton {
-    margin-bottom: 12px;
-  }
-
-  .skeletonContainer .ant-skeleton-image {
-    border-radius: 4px;
-  }
-
-  .skeletonContainer .ant-skeleton-input {
-    border-radius: 4px;
-  }
-
-  .skeletonContainer .ant-skeleton-button {
-    border-radius: 16px;
-  }
-}
-
-/* Dark theme skeleton styles */
-:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-input,
-:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-image,
-:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-button {
-  background: linear-gradient(90deg, #181818 25%, #363636 50%, #181818 75%);
-  background-size: 200px 100%;
-  animation: skeletonShimmer 1.5s infinite;
-}
-
-:global(.darkApp) .skeletonContainer .ant-skeleton-input,
-:global(.darkApp) .skeletonContainer .ant-skeleton-image,
-:global(.darkApp) .skeletonContainer .ant-skeleton-button {
-  background-color: #181818;
-  border-color: #363636;
-}
-
-/* Tablet-specific skeleton styles */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .skeletonContainer {
-    padding: 24px;
-  }
-
-  .skeletonContainer .ant-skeleton {
-    margin-bottom: 16px;
-  }
-
-  .skeletonContainer .ant-skeleton-image {
-    border-radius: 6px;
-  }
-
-  .skeletonContainer .ant-skeleton-input {
-    border-radius: 5px;
-  }
-
-  .skeletonContainer .ant-skeleton-button {
-    border-radius: 18px;
-  }
-}
-
 .menuItemsGridSticky {
   height: 60;
 }

src/pages/menu/components/MenuList/MenuList.tsx

@@ -48,13 +48,16 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
   }
 
   // Group products by category
-  const productsByCategory = products?.reduce((acc, product) => {
-    if (product.categoryId && !acc[product?.categoryId]) {
-      acc[product?.categoryId] = [];
-    }
-    acc[product?.categoryId || 0].push(product);
-    return acc;
-  }, {} as Record<number, Product[]>);
+  const productsByCategory = products?.reduce(
+    (acc, product) => {
+      if (product.categoryId && !acc[product?.categoryId]) {
+        acc[product?.categoryId] = [];
+      }
+      acc[product?.categoryId || 0].push(product);
+      return acc;
+    },
+    {} as Record<number, Product[]>,
+  );
 
   return (
     <>
@@ -170,14 +173,14 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
                               style={{
                                 display: "-webkit-box",
                                 WebkitBoxOrient: "vertical",
-                                WebkitLineClamp: xs ? 2 : 4,
+                                WebkitLineClamp: 2,
                                 overflow: "hidden",
                                 textOverflow: "ellipsis",
                                 wordWrap: "break-word",
                                 overflowWrap: "break-word",
                                 lineHeight: "1.5rem",
-                                maxHeight: xs ? "3em" : "6.6em",
-                                fontSize: xs ? "1rem" : 18,
+                                maxHeight: "3em",
+                                fontSize: "1rem",
                                 letterSpacing: "0.01em",
                               }}
                             >
@@ -231,8 +234,8 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
                               xs
                                 ? styles.popularMenuItemImageMobile
                                 : md
-                                ? styles.popularMenuItemImageTablet
-                                : styles.popularMenuItemImageDesktop
+                                  ? styles.popularMenuItemImageTablet
+                                  : styles.popularMenuItemImageDesktop
                             }`}
                             width={90}
                             height={90}

src/pages/menu/page.tsx

@@ -41,7 +41,7 @@ function MenuPage() {
     restaurantDetails?.restaurant.id,
     {
       skip: !restaurantDetails?.restaurant.id,
-    }
+    },
   );
   const { categoryRefs } = useScrollHandler();
   const { xs, md } = useBreakpoint();
@@ -58,7 +58,7 @@ function MenuPage() {
       />
 
       {isLoading ? (
-        <MenuSkeleton categoryCount={6} itemCount={8} variant="default" />
+        <MenuSkeleton categoryCount={10} itemCount={8} variant="default" />
       ) : (
         <div className={styles.menuContainer}>
           <div className={styles.restaurantHeader}>