tabexseriescomponents 0.0.71 → 0.0.73

package/{src1-10 → src-aya}/TabexComponents/Headers/HeaderRestaurant/HeaderRestaurant.jsx

@@ -50,6 +50,15 @@ const HeaderRestaurant = (props) => {
         }
         setsectionproperties({ ...secpropobj });
     }, [StatePagePropertiesContext]);
+    const [logoarrayofobjects, setlogoarrayofobjects] = useState([]);
+    useEffect(() => {
+        if (templateproperties_context.length != 0 && templateproperties_context.logoarrayofobjects != undefined) {
+            var logoarrayofobjectsparsed = JSON.parse(templateproperties_context.logoarrayofobjects);
+            if (Array.isArray(logoarrayofobjectsparsed)) {
+                setlogoarrayofobjects([...logoarrayofobjectsparsed]);
+            }
+        }
+    }, [templateproperties_context]);
     const header_cssstyles = {
         header_logo: css({
             width: templateproperties_context.logo_width + 'px',
@@ -279,22 +288,13 @@ const HeaderRestaurant = (props) => {
             right: sectionproperties.wishlistbadgeright + 'px',
         }),
     };
-    const [logoarrayofobjects, setlogoarrayofobjects] = useState([]);
-    useEffect(() => {
-        if (templateproperties_context.length != 0 && templateproperties_context.logoarrayofobjects != undefined) {
-            var logoarrayofobjectsparsed = JSON.parse(templateproperties_context.logoarrayofobjects);
-            if (Array.isArray(logoarrayofobjectsparsed)) {
-                setlogoarrayofobjects([...logoarrayofobjectsparsed]);
-            }
-        }
-    }, [templateproperties_context]);
     return (
-        <div className={' row ml-0 mr-0 w-100 d-flex justify-content-center position-md-relative '} style={{ position: sectionproperties.headerstyles_position }}>
-            <div className="col-lg-12 p-0">
-                <div className={`${headerstyles.header_innercontainer} ${header_cssstyles.header_innercontainer}` + ' row m-0 w-100 d-flex d-md-none align-items-center '}>
-                    <div className="col-lg-4 p-0 d-flex align-items-center">
+        <div class={' row ml-0 mr-0 w-100 d-flex justify-content-center position-md-relative '} style={{ position: sectionproperties.headerstyles_position }}>
+            <div class="col-lg-12 p-0">
+                <div class={`${headerstyles.header_innercontainer} ${header_cssstyles.header_innercontainer}` + ' row m-0 w-100 d-flex d-md-none align-items-center '}>
+                    <div class="col-lg-4 p-0 d-flex align-items-center">
                         <div
-                            className={`${header_cssstyles.header_logo}` + ' d-flex align-items-center justify-content-center '}
+                            class={`${header_cssstyles.header_logo}` + ' d-flex align-items-center justify-content-center '}
                             style={{ cursor: 'pointer' }}
                             onClick={() => {
                                 routingcountext('home');
@@ -311,8 +311,8 @@ const HeaderRestaurant = (props) => {
                             />
                         </div>
                     </div>
-                    <div className="col-lg-4 p-0 d-flex align-items-center justify-content-center">
-                        <nav className={headerstyles.navbar}>
+                    <div class="col-lg-4 p-0 d-flex align-items-center justify-content-center">
+                        <nav class={headerstyles.navbar}>
                             <ul>
                                 {templatepropcontext.pagesnprop.map((item, index) => {
                                     var activeclass = '';
@@ -323,14 +323,14 @@ const HeaderRestaurant = (props) => {
 
                                     if (item.isnavigation == 1 && item.isactive == 1) {
                                         return (
-                                            <li className="allcentered" style={{ flex: 1, paddingLeft: '25px', paddingRight: '25px' }}>
+                                            <li class="allcentered" style={{ flex: 1, paddingLeft: '25px', paddingRight: '25px' }}>
                                                 <div
                                                     onClick={() => {
                                                         routingcountext(item.navigationroute, false, '');
                                                     }}
                                                 >
-                                                    <div className={`${headerstyles.navbar_item} ${activeclass}`}>
-                                                        <span className={`${headerstyles.navbar_item_text} ${header_cssstyles.navbar_item_text}`}>
+                                                    <div class={`${headerstyles.navbar_item} ${activeclass}`}>
+                                                        <span class={`${headerstyles.navbar_item_text} ${header_cssstyles.navbar_item_text}`}>
                                                             {langdetect == 'en' ? item.pagename : item.pagename_ar}
                                                         </span>
                                                     </div>
@@ -342,40 +342,38 @@ const HeaderRestaurant = (props) => {
                             </ul>
                         </nav>
                     </div>
-                    <div className="col-lg-4 p-0 d-flex align-items-center justify-content-end">
+                    <div class="col-lg-4 p-0 d-flex align-items-center justify-content-end">
                         <Dropdown
                             style={{
-                                // (authdetailsContext.loggedin == true ? '30px' : '28px') : 0,
-                                // (authdetailsContext.loggedin == true ? '30px' : '6px') : '30px'
                                 marginRight: langdetect == 'en' ? '30px' : 0,
                                 marginLeft: langdetect == 'ar' ? '30px' : 0,
                             }}
                         >
                             <Dropdown.Toggle>
-                                <div className={' d-flex align-items-center justify-content-center '}>
+                                <div class={' d-flex align-items-center justify-content-center '}>
                                     {!authdetailsContext.loggedin && (
-                                        <span className={`${header_cssstyles.user_btn}` + ' d-flex justify-content-center align-items-center '}>
+                                        <span class={`${header_cssstyles.user_btn}` + ' d-flex justify-content-center align-items-center '}>
                                             <FiUser size={sectionproperties.userBtniconfontsize} />
                                         </span>
                                     )}
                                     {authdetailsContext.loggedin && (
-                                        <div className={header_cssstyles.userBtnLoggedinContainer + ' allcentered '} sytle={{ position: 'relative' }}>
-                                            <div className={header_cssstyles.loggedinuserbtn + ' loggedinuserbtn loggedinuserbtnbg ml-2 mr-2 '}>
-                                                <i className={' h-100 allcentered '}>
+                                        <div class={header_cssstyles.userBtnLoggedinContainer + ' allcentered '} sytle={{ position: 'relative' }}>
+                                            <div class={header_cssstyles.loggedinuserbtn + ' loggedinuserbtn loggedinuserbtnbg ml-2 mr-2 '}>
+                                                <i class={' h-100 allcentered '}>
                                                     <FiUser size={sectionproperties.loggedinusericonfontsize} />
                                                 </i>
                                             </div>
                                             <div
-                                                className="m-0 p-0 loggedinuserbtn flex-column"
+                                                class="m-0 p-0 loggedinuserbtn flex-column"
                                                 style={{
                                                     textAlign: langdetect == 'en' ? 'left' : 'right',
                                                 }}
                                             >
-                                                <p className={header_cssstyles.greetingstyles + ' m-0 p-0 '}>
+                                                <p class={header_cssstyles.greetingstyles + ' m-0 p-0 '}>
                                                     {lang.hello}
                                                     {langdetect == 'en' ? ',' : '،'}
                                                 </p>
-                                                <p className={header_cssstyles.loggedinusername + ' loggedinuserbtn text-overflow m-0 p-0 '}>{authdetailsContext.customerinfo.name}</p>
+                                                <p class={header_cssstyles.loggedinusername + ' loggedinuserbtn text-overflow m-0 p-0 '}>{authdetailsContext.customerinfo.name}</p>
                                             </div>
                                         </div>
                                     )}
@@ -388,9 +386,9 @@ const HeaderRestaurant = (props) => {
                                             routingcountext(StaticPagesLinksContext.Login);
                                         }}
                                     >
-                                        <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                            <p className={' d-flex align-items-center m-0 p-0 '}>
-                                                <AiOutlineLogin className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
+                                        <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                            <p class={' d-flex align-items-center m-0 p-0 '}>
+                                                <AiOutlineLogin class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
                                                 <span>{lang.login}</span>
                                             </p>
                                         </div>
@@ -401,10 +399,10 @@ const HeaderRestaurant = (props) => {
                                             routingcountext(StaticPagesLinksContext.Signup);
                                         }}
                                     >
-                                        <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                            <p className={' d-flex align-items-center m-0 p-0 '}>
-                                                <AiOutlineUserAdd className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
-                                                <span className="text-transform-none">{lang.signup}</span>
+                                        <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                            <p class={' d-flex align-items-center m-0 p-0 '}>
+                                                <AiOutlineUserAdd class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
+                                                <span class="text-transform-none">{lang.signup}</span>
                                             </p>
                                         </div>
                                     </Dropdown.Item>
@@ -417,14 +415,14 @@ const HeaderRestaurant = (props) => {
                                             routingcountext(StaticPagesLinksContext.Ordershistory);
                                         }}
                                     >
-                                        <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                            <p className={' d-flex align-items-center m-0 p-0 '}>
-                                                {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                {sectionproperties.carticonstyle == 'Shopping bag 4' && <BsHandbag className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdOutlineShoppingCart className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                        <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                            <p class={' d-flex align-items-center m-0 p-0 '}>
+                                                {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                {sectionproperties.carticonstyle == 'Shopping bag 4' && <BsHandbag class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdOutlineShoppingCart class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
                                                 <span>{lang.orderhistory}</span>
                                             </p>
                                         </div>
@@ -435,10 +433,10 @@ const HeaderRestaurant = (props) => {
                                             routingcountext(StaticPagesLinksContext.Wishlist);
                                         }}
                                     >
-                                        <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                            <p className={' d-flex align-items-center m-0 p-0 '}>
-                                                {sectionproperties.faviconshape == 'Heart Shape' && <AiOutlineHeart className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                {sectionproperties.faviconshape == 'Star Shape' && <AiFillStar className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                        <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                            <p class={' d-flex align-items-center m-0 p-0 '}>
+                                                {sectionproperties.faviconshape == 'Heart Shape' && <AiOutlineHeart class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                {sectionproperties.faviconshape == 'Star Shape' && <AiFillStar class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
                                                 <span>{lang.wishlist}</span>
                                             </p>
                                         </div>
@@ -449,9 +447,9 @@ const HeaderRestaurant = (props) => {
                                             routingcountext(StaticPagesLinksContext.Policies);
                                         }}
                                     >
-                                        <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                            <p className={' d-flex align-items-center m-0 p-0 '}>
-                                                <MdOutlinePolicy className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
+                                        <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                            <p class={' d-flex align-items-center m-0 p-0 '}>
+                                                <MdOutlinePolicy class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
                                                 <span>{lang.policies}</span>
                                             </p>
                                         </div>
@@ -462,9 +460,9 @@ const HeaderRestaurant = (props) => {
                                             LogoutMutationContext.mutate();
                                         }}
                                     >
-                                        <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                            <p className={' d-flex align-items-center m-0 p-0 '}>
-                                                <BiLogOutCircle className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
+                                        <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                            <p class={' d-flex align-items-center m-0 p-0 '}>
+                                                <BiLogOutCircle class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
                                                 <span>{lang.logout}</span>
                                             </p>
                                         </div>
@@ -474,13 +472,13 @@ const HeaderRestaurant = (props) => {
                         </Dropdown>
                         {sectionproperties.favBtnShow == 'Show' && (
                             <div
-                                className={`${header_cssstyles.wishlist_btn}` + ' d-flex justify-content-center align-items-center '}
+                                class={`${header_cssstyles.wishlist_btn}` + ' d-flex justify-content-center align-items-center '}
                                 onClick={() => {
                                     routingcountext(StaticPagesLinksContext.Wishlist);
                                 }}
                             >
                                 <span style={{ position: 'relative' }}>
-                                    <i className={' h-100 d-flex align-items-center '}>
+                                    <i class={' h-100 d-flex align-items-center '}>
                                         {sectionproperties.faviconshape == 'Heart Shape' && (
                                             <FaRegHeart
                                                 style={{
@@ -497,7 +495,7 @@ const HeaderRestaurant = (props) => {
                                         )}
                                     </i>
                                     <div
-                                        className={
+                                        class={
                                             `${headerstyles.badge_counter_header_notifications} ${header_cssstyles.badge_counter_header_notifications} ${header_cssstyles.wishlistbadge}` +
                                             ' d-flex justify-content-center text-center '
                                         }
@@ -508,7 +506,7 @@ const HeaderRestaurant = (props) => {
                             </div>
                         )}
                         <div
-                            className={
+                            class={
                                 !authdetailsContext.loggedin
                                     ? langdetect == 'en'
                                         ? `${header_cssstyles.cart_btn}` + ' cursor-pointer allcentered ml-3 mr-4 '
@@ -524,12 +522,12 @@ const HeaderRestaurant = (props) => {
                             }}
                         >
                             <span style={{ position: 'relative' }}>
-                                <i className={' allcentered '}>
-                                    {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag className="" size={sectionproperties.cartBtn_iconFontSize} />}
-                                    {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag className="" size={sectionproperties.cartBtn_iconFontSize} />}
-                                    {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag className="" size={sectionproperties.cartBtn_iconFontSize} />}
-                                    {sectionproperties.carticonstyle == 'Shopping bag 4' && <BsHandbag className="" size={sectionproperties.cartBtn_iconFontSize} />}
-                                    {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart className="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                <i class={' allcentered '}>
+                                    {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag class="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                    {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag class="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                    {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag class="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                    {sectionproperties.carticonstyle == 'Shopping bag 4' && <BsHandbag class="" size={sectionproperties.cartBtn_iconFontSize} />}
+                                    {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart class="" size={sectionproperties.cartBtn_iconFontSize} />}
                                     {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdOutlineShoppingCart size={sectionproperties.cartBtn_iconFontSize} />}
                                 </i>
                                 <div
@@ -549,10 +547,10 @@ const HeaderRestaurant = (props) => {
                                 </div>
                             </span>
                         </div>
-                        <div className={langdetect == 'en' ? 'informationdropdown informationdropdown_en' : 'informationdropdown informationdropdown_ar'}>
+                        <div class={langdetect == 'en' ? 'informationdropdown informationdropdown_en' : 'informationdropdown informationdropdown_ar'}>
                             <Dropdown>
                                 <Dropdown.Toggle>
-                                    <i className={header_cssstyles.infoiconcontainer + ' allcentered '}>
+                                    <i class={header_cssstyles.infoiconcontainer + ' allcentered '}>
                                         <BsInfoCircle size={sectionproperties.icontextfontsize} />
                                     </i>
                                 </Dropdown.Toggle>
@@ -569,53 +567,53 @@ const HeaderRestaurant = (props) => {
                                     </Dropdown.Header>
                                     <Dropdown.Divider />
                                     <Dropdown.Item>
-                                        <div className="row m-0 w-100">
-                                            <div className="col-lg-3 p-0 d-flex align-items-center justify-content-start">
-                                                <p className={header_cssstyles.informationtitle + ' p-0 m-0 '}>{lang.address}:</p>
+                                        <div class="row m-0 w-100">
+                                            <div class="col-lg-3 p-0 d-flex align-items-center justify-content-start">
+                                                <p class={header_cssstyles.informationtitle + ' p-0 m-0 '}>{lang.address}:</p>
                                             </div>
-                                            <div className="col-lg-9 d-flex align-items-center justify-content-start">
-                                                <p className={header_cssstyles.infotext + ' p-0 m-0 '}>{authdetailsContext.instinfo.address_en}</p>
+                                            <div class="col-lg-9 d-flex align-items-center justify-content-start">
+                                                <p class={header_cssstyles.infotext + ' p-0 m-0 '}>{authdetailsContext?.instinfo?.address_en}</p>
                                             </div>
                                         </div>
                                     </Dropdown.Item>
                                     <Dropdown.Divider />
                                     <Dropdown.Item>
-                                        <div className="row m-0 w-100">
-                                            <div className="col-lg-3 p-0 d-flex align-items-center justify-content-start">
-                                                <p className={header_cssstyles.informationtitle + ' p-0 m-0 '}>{langdetect == 'en' ? 'Phone' : 'التليفون'}:</p>
+                                        <div class="row m-0 w-100">
+                                            <div class="col-lg-3 p-0 d-flex align-items-center justify-content-start">
+                                                <p class={header_cssstyles.informationtitle + ' p-0 m-0 '}>{langdetect == 'en' ? 'Phone' : 'التليفون'}:</p>
                                             </div>
-                                            <div className="col-lg-9 d-flex align-items-center justify-content-start">
-                                                <p className={header_cssstyles.infotext + ' p-0 m-0 '}>{authdetailsContext.instinfo.contactinfo.mobile}</p>
+                                            <div class="col-lg-9 d-flex align-items-center justify-content-start">
+                                                <p class={header_cssstyles.infotext + ' p-0 m-0 '}>{authdetailsContext?.instinfo?.contactinfo?.mobile}</p>
                                             </div>
                                         </div>
                                     </Dropdown.Item>
                                     <Dropdown.Divider />
                                     <Dropdown.Item>
-                                        <div className="row m-0 w-100">
-                                            <div className="col-lg-3 p-0 d-flex align-items-center justify-content-start">
-                                                <p className={header_cssstyles.informationtitle + ' p-0 m-0 '}>{lang.email}:</p>
+                                        <div class="row m-0 w-100">
+                                            <div class="col-lg-3 p-0 d-flex align-items-center justify-content-start">
+                                                <p class={header_cssstyles.informationtitle + ' p-0 m-0 '}>{lang.email}:</p>
                                             </div>
-                                            <div className="col-lg-9 d-flex align-items-center justify-content-start">
-                                                <p className={header_cssstyles.infotext + ' p-0 m-0 '}>{authdetailsContext.instinfo.contactinfo.email}</p>
+                                            <div class="col-lg-9 d-flex align-items-center justify-content-start">
+                                                <p class={header_cssstyles.infotext + ' p-0 m-0 '}>{authdetailsContext?.instinfo?.contactinfo?.email}</p>
                                             </div>
                                         </div>
                                     </Dropdown.Item>
                                     <Dropdown.Divider />
                                     <Dropdown.Item>
-                                        <div className="col-lg-12 col-sm-12 mb-sm-2 p-3 d-flex justify-content-center">
-                                            <div className=" col-lg-12 d-flex flex-row align-items-center justify-content-center ">
+                                        <div class="col-lg-12 col-sm-12 mb-sm-2 p-3 d-flex justify-content-center">
+                                            <div class=" col-lg-12 d-flex flex-row align-items-center justify-content-center ">
                                                 {sectionproperties.fbbtn_show == 'Show' && (
-                                                    <div className={`${header_cssstyles.facebook_btn}` + '  d-flex align-items-center justify-content-center '}>
+                                                    <div class={`${header_cssstyles.facebook_btn}` + '  d-flex align-items-center justify-content-center '}>
                                                         <FaFacebookF size={sectionproperties.facebkbtnniconfontsize} />
                                                     </div>
                                                 )}
                                                 {sectionproperties.instbtn_show == 'Show' && (
-                                                    <div className={`${header_cssstyles.instgram_btn}` + '  d-flex align-items-center justify-content-center ml-3 mr-3 '}>
+                                                    <div class={`${header_cssstyles.instgram_btn}` + '  d-flex align-items-center justify-content-center ml-3 mr-3 '}>
                                                         <AiFillInstagram size={sectionproperties.instgrambtniconfontsize} />
                                                     </div>
                                                 )}
                                                 {sectionproperties.youtbtn_show == 'Show' && (
-                                                    <div className={`${header_cssstyles.youtube_btn}` + '  d-flex align-items-center justify-content-center '}>
+                                                    <div class={`${header_cssstyles.youtube_btn}` + '  d-flex align-items-center justify-content-center '}>
                                                         <BsWhatsapp size={sectionproperties.youtubebtniconfontsize} />
                                                     </div>
                                                 )}
@@ -625,7 +623,7 @@ const HeaderRestaurant = (props) => {
                                 </Dropdown.Menu>
                             </Dropdown>
                         </div>
-                        <div className={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
+                        <div class={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
                             <Dropdown
                                 style={{
                                     marginLeft: langdetect == 'en' ? '25px' : 0,
@@ -633,19 +631,19 @@ const HeaderRestaurant = (props) => {
                                 }}
                             >
                                 <Dropdown.Toggle>
-                                    <li className={' d-flex align-items-center justify-content-center '}>
+                                    <li class={' d-flex align-items-center justify-content-center '}>
                                         {langdetect == 'en' && (
-                                            <div className={`${header_cssstyles.language_container}` + ' row m-0 allcentered '}>
+                                            <div class={`${header_cssstyles.language_container}` + ' row m-0 allcentered '}>
                                                 <img src={egyptflag} style={{ maxWidth: '2.5vh', maxHeight: '2.5vh' }} />
-                                                <div style={{ height: '20px', width: '1.5px', background: '#e6e6e6' }} className="ml-2 mr-2"></div>
-                                                <p className="m-0 p-0">ع</p>
+                                                <div style={{ height: '20px', width: '1.5px', background: '#e6e6e6' }} class="ml-2 mr-2"></div>
+                                                <p class="m-0 p-0">ع</p>
                                             </div>
                                         )}
                                         {langdetect == 'ar' && (
-                                            <div className={`${header_cssstyles.language_container}` + ' row m-0 allcentered '}>
+                                            <div class={`${header_cssstyles.language_container}` + ' row m-0 allcentered '}>
                                                 <img src={usflag} style={{ maxWidth: '2.5vh', maxHeight: '2.5vh' }} />
-                                                <div style={{ height: '20px', width: '1.5px', background: '#e6e6e6' }} className="ml-2 mr-2"></div>
-                                                <p className="m-0 p-0">En</p>
+                                                <div style={{ height: '20px', width: '1.5px', background: '#e6e6e6' }} class="ml-2 mr-2"></div>
+                                                <p class="m-0 p-0">En</p>
                                             </div>
                                         )}
                                     </li>
@@ -656,10 +654,10 @@ const HeaderRestaurant = (props) => {
                                             setlang('ar');
                                         }}
                                     >
-                                        <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                            <p className={' d-flex align-items-center m-0 p-0 '}>
+                                        <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                            <p class={' d-flex align-items-center m-0 p-0 '}>
                                                 <img src={egyptflag} style={{ maxWidth: '2.5vh', maxHeight: '2.5vh' }} />
-                                                <span className="ml-2 mr-2">{lang.arabic}</span>
+                                                <span class="ml-2 mr-2">{lang.arabic}</span>
                                             </p>
                                         </div>
                                     </Dropdown.Item>
@@ -670,7 +668,7 @@ const HeaderRestaurant = (props) => {
                                         }}
                                     >
                                         <span
-                                            className="d-flex align-items-center justify-content-center"
+                                            class="d-flex align-items-center justify-content-center"
                                             style={{
                                                 fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                 fontWeight: sectionproperties.dropdown_fontweight,
@@ -678,29 +676,30 @@ const HeaderRestaurant = (props) => {
                                             }}
                                         >
                                             <img src={usflag} style={{ maxWidth: '2.5vh', maxHeight: '2.5vh' }} />
-                                            <span className="ml-2 mr-2">{lang.english}</span>
+                                            <span class="ml-2 mr-2">{lang.english}</span>
                                         </span>
                                     </Dropdown.Item>
                                 </Dropdown.Menu>
                             </Dropdown>
                         </div>
                     </div>
-                    <div className="col-lg-12 p-0">
+                    <div class="col-lg-12 p-0">
                         {sectionproperties.showhidesubheader == 'Show' && (
                             <Subheader
-                                actions={actions}
                                 sectionpropertiesprops={sectionproperties}
+                                actions={actions}
                                 subheaderpropertiesprops={{
                                     subheaderpositionprops: 'Full Width',
-                                    paddingLeftprops: '25px',
-                                    paddingRightprops: '25px',
+                                    paddingLeftprops: '35px',
+                                    paddingRightprops: '35px',
+                                    subheadercontentpositionprops: 'center',
                                 }}
                             />
                         )}
                     </div>
                 </div>
-                <div className="col-lg-12 p-0">
-                    <Headerresponsive actions={actions} sectionpropertiesprops={sectionproperties} />
+                <div class="col-lg-12 p-0">
+                    <Headerresponsive sectionpropertiesprops={sectionproperties} actions={actions} />
                 </div>
             </div>
         </div>