fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix logo container in tablet and desktop size

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-11-25 23:03:05 +03:00
parent cc8705afdf
commit 36af620b02
5 changed files with 188 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/layouts/app/HeaderMenuDrawer.tsx
View File

@@ -6,8 +6,8 @@ import ProText from "components/ProText";
import { useState } from "react";
import { useGetMenuQuery } from "redux/api/others";
import { useAppSelector } from "redux/hooks";
import { darkColors, lightColors } from "ThemeConstants";
import useHeaderMenu from "./hooks/useHeaderMenu";
import "./styles.css";
const { useBreakpoint } = Grid;
@@ -55,26 +55,7 @@ export default function HeaderMenuDrawer() {
return (
<>
{!isLoadingMenu && (
<div
style={{
display: "flex",
justifyContent: "space-between",
position: "fixed",
zIndex: 999,
[isRTL ? "left" : "right"]: 0,
top: 220,
backgroundColor:
themeName === "dark"
? darkColors.secondaryBgColor
: lightColors.secondaryBgColor,
[isRTL ? "borderTopRightRadius" : "borderTopLeftRadius"]: 10,
[isRTL ? "borderBottomRightRadius" : "borderBottomLeftRadius"]: 10,
border:
themeName === "dark"
? "1px solid var(--border)"
: "1px solid var(--border)",
}}
>
<div className="header-floating-btn">
<Button
type="text"
icon={isRTL ? <NextIcon /> : <BackIcon />}

70
src/layouts/app/styles.css
View File

@@ -113,3 +113,73 @@
:where(.darkApp) .user-icon {
background: var(--primary-dark);
}
.header-floating-btn {
display: flex;
justify-content: space-between;
position: fixed;
z-index: 999;
right: 0;
top: 220px;
background-color: var(--secondary-background);
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border: 1px solid var(--border);
}
:where(.ant-app-rtl) .header-floating-btn {
left: 0;
right: auto;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
@media (min-width: 769px) and (max-width: 1024px) {
.header-floating-btn {
display: flex;
justify-content: space-between;
position: fixed;
z-index: 999;
right: 0;
top: 250px;
background-color: var(--secondary-background);
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border: 1px solid var(--border);
}
:where(.ant-app-rtl) .header-floating-btn {
left: 0;
right: auto;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
}
/* Desktop devices (min-width: 1025px) */
@media (min-width: 1025px) {
.header-floating-btn {
display: flex;
justify-content: space-between;
position: fixed;
z-index: 999;
right: 0;
top: 270px;
background-color: var(--secondary-background);
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border: 1px solid var(--border);
}
:where(.ant-app-rtl) .header-floating-btn {
left: 0;
right: auto;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
}

46
src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css
View File

@@ -38,19 +38,18 @@
}
.logoContainerIcon {
position: absolute;
left: 0 !important;
top: 127px !important;
position: absolute !important;
left: 0px !important;
top: 127px;
z-index: 10 !important;
}
:global(.ant-app-rtl) .logo {
right: 19px;
}
:global(.ant-app-rtl) .logoContainerIcon {
right: -10px;
right: -10px !important;
}
/* Menu Section Styles */
@@ -225,8 +224,22 @@
@media (min-width: 769px) and (max-width: 1024px) {
.logo {
left: 40px;
width: 80px;
height: 80px;
width: 80px !important;
height: 80px !important;
top: 142px !important;
}
.logoContainerIcon {
position: absolute !important;
left: 0px !important;
top: 133px;
z-index: 10 !important;
width: 140px !important;
height: 100px !important;
}
:global(.ant-app-rtl) .logoContainerIcon {
right: -17px !important;
}
.categoriesContainer {
@@ -299,11 +312,28 @@
@media (min-width: 1025px) {
.logo {
left: 33px;
top: 141px;
top: 114px !important;
width: 150px !important;
height: 150px !important;
}
:global(.ant-app-rtl) .logo {
right: 28px !important;
}
.logoContainerIcon {
position: absolute !important;
left: 0px !important;
top: 106px;
z-index: 10 !important;
width: 247px !important;
height: 170px !important;
}
:global(.ant-app-rtl) .logoContainerIcon {
right: -30px !important;
}
.categoriesContainer {
height: 180px;
padding: 0 24px;

2
src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx
View File

@@ -120,7 +120,7 @@ const MenuSkeleton = ({
{/* Logo Skeleton */}
<LogoContainerIcon className={styles.logoContainerIcon} />
<div className={styles.logo}>
<Skeleton.Image active />
<Skeleton.Image active style={{ width: 160, height: 160 }} />
</div>
</div>
<div className={`${styles.pageContainer} ${styles.skeletonContainer}`}>

145
src/pages/menu/menu.module.css
View File

@@ -18,35 +18,6 @@
margin-bottom: 24px;
} */
.leftShape {
position: absolute;
top: 133px;
width: 47px;
height: 50px;
left: -11px;
background-color: var(--background); /* Color of the shape */
clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
}
:global(.darkApp) .leftShape {
background-color: var(--background);
}
.rightShape {
position: absolute;
top: 133px;
width: 47px;
height: 50px;
left: 102px;
background-color: var(--background); /* Color of the shape */
clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
transform: scale(-1, 1); /* Mirror the shape on the Y-axis */
}
:global(.darkApp) .rightShape {
background-color: var(--background);
}
.logo {
position: absolute;
left: 19px;
@@ -71,6 +42,23 @@
right: 19px;
}
.logoContainerIcon {
position: absolute !important;
left: 0px !important;
top: 127px;
z-index: 10 !important;
}
:global(.ant-app-rtl) .logoContainerIcon {
right: -10px !important;
}
.timeIcon {
position: relative;
top: 4px;
margin: 0 4px;
}
.services {
height: 36px;
position: absolute;
@@ -483,6 +471,11 @@
color: #666;
}
:global(.ant-app-rtl) .openingHours {
left: 10px;
right: auto;
}
.restaurantTitle {
font-size: 16px;
font-weight: bold;
@@ -558,7 +551,8 @@
}
.logo {
left: 40px;
top: -73px;
left: 24px;
width: 80px !important;
height: 80px !important;
}
@@ -574,14 +568,17 @@
border-radius: 0 0 20px 20px;
}
.leftShape {
top: 171px;
left: -3px;
.logoContainerIcon {
position: absolute !important;
left: 0px !important;
top: 133px;
z-index: 10 !important;
width: 140px !important;
height: 100px !important;
}
.rightShape {
top: 171px;
left: 116px;
:global(.ant-app-rtl) .logoContainerIcon {
right: -17px !important;
}
.pageContainer {
@@ -603,6 +600,20 @@
.contentWrapper {
margin-top: 16px;
}
.openingHours {
position: absolute;
top: 210px;
right: 16px;
font-size: 14px;
font-weight: 600;
color: #666;
}
:global(.ant-app-rtl) .openingHours {
left: 16px;
right: auto;
}
}
/* Desktop devices (min-width: 1025px) */
@@ -628,29 +639,50 @@
.logo {
position: absolute;
left: 33px;
top: -95px;
left: 38px;
top: -122px;
border-radius: 50%;
z-index: 10;
z-index: 11;
border: 3px solid var(--background);
width: 150px !important;
height: 150px !important;
}
:global(.ant-app-rtl) .logo {
right: 28px;
}
.navButton {
width: 48px !important;
height: 48px !important;
border-radius: 16px !important;
}
.leftShape {
top: 171px;
left: -10px;
.logoContainerIcon {
position: absolute !important;
left: 0px !important;
top: 106px;
z-index: 10 !important;
width: 247px !important;
height: 170px !important;
}
.rightShape {
top: 171px;
left: 179px;
:global(.ant-app-rtl) .logoContainerIcon {
right: -30px !important;
}
.openingHours {
position: absolute;
top: 230px;
right: 16px;
font-size: 14px;
font-weight: 600;
color: #666;
}
:global(.ant-app-rtl) .openingHours {
left: 32px;
right: auto;
}
}
@@ -690,26 +722,3 @@
display: none !important;
}
}
.logoContainerIcon {
position: absolute !important;
left: 0px !important;
top: 127px !important;
z-index: 10 !important;
}
:global(.ant-app-rtl) .logoContainerIcon {
right: -10px !important;
}
:global(.ant-app-rtl) .openingHours {
left: 10px;
right: auto;
}
.timeIcon {
position: relative;
top: 4px;
margin: 0 4px;
}