menu: UI enhancements in desktop sizes

- add product dialog
- enhance product page layout for desktop size

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

@@ -0,0 +1,3 @@
+.productModal{
+    width: 80vw;
+}

src/pages/menu/components/ProductPreviewDialog/ProductPreviewDialog.tsx

@@ -0,0 +1,34 @@
+import { Modal } from "antd";
+import ProductDetailPage from "pages/product/page";
+import styles from "./ProductPreviewDialog.module.css";
+
+interface ProductPreviewDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function ProductPreviewDialog({
+  isOpen,
+  onClose,
+}: ProductPreviewDialogProps) {
+  // const { isRTL } = useAppSelector((state) => state.locale);
+  // const { themeName } = useAppSelector((state) => state.theme);
+
+  return (
+    <Modal
+      open={isOpen}
+      onCancel={onClose}
+      footer={null}
+      width="auto"
+      centered
+      className={styles.productModal}
+      height={600}
+      style={{
+        width: "80vw",
+        minWidth: "80vw",
+      }}
+    >
+      <ProductDetailPage />
+    </Modal>
+  );
+}

src/pages/menu/components/ProductPreviewDialog/index.ts

@@ -0,0 +1 @@
+export { ProductPreviewDialog } from "./ProductPreviewDialog";