tabexseriescomponents 0.0.65 → 0.0.67

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

@@ -1,20 +1,9 @@
 import React, { useEffect, useState, useContext } from 'react';
-// import { useHistory, Link } from 'react-router-dom';
 import Dropdown from 'react-bootstrap/Dropdown';
-// import './dropdown.css';
-// import headerstyles from './headerresturant.module.css';
 import headerstyles from '../../../styles/headers/headerresturant.module.css';
-
-// import { LanguageContext } from '../../../LanguageContext';
 import { IKImage } from 'imagekitio-react';
 import { IKpublicKey, IKurlEndpoint } from '../../../../Env';
-
-// import { FetchingContext } from '../../../FetchingContext';
-// import { TemplateRoutingContext } from '../../../TemplateRoutingContext';
-// import { WebsiteDesignWorkPlaceContext } from '../../../../WebsiteDesignWorkPlaceContext';
 import { css } from 'glamor';
-// import Subheader from '../Subheader/Subheader';
-// import Headerresponsive from '../Headerresponsive/Headerresponsive';
 import { BiLogOutCircle } from 'react-icons/bi';
 import { MdOutlinePolicy, MdOutlineShoppingCart } from 'react-icons/md';
 import { FaRegHeart } from 'react-icons/fa';
@@ -22,37 +11,18 @@ import { CgShoppingBag } from 'react-icons/cg';
 import { BsInfoCircle, BsHandbag, BsBag, BsWhatsapp } from 'react-icons/bs';
 import { AiFillStar } from 'react-icons/ai';
 import { FiShoppingBag, FiShoppingCart, FiUser } from 'react-icons/fi';
-// import egyptflag from '../../Generalfiles/images/egyptflag.png';
-// import usflag from '../../Generalfiles/images/usflag.png';
 import { FaFacebookF } from 'react-icons/fa';
 import { AiFillInstagram, AiOutlineLogin, AiOutlineUserAdd, AiOutlineStar, AiOutlineHeart } from 'react-icons/ai';
-
-// import Searchlist from '../../StaticPages/Searchlist/Searchlist.jsx';
 import egyptflag from '../../../assets/images/egyptflag.png';
 import usflag from '../../../assets/images/usflag.png';
 import Headerresponsive from '../Headerresponsive/Headerresponsive.jsx';
 import Subheader from '../Subheader/Subheader.jsx';
 
 const HeaderRestaurant = (props) => {
-    // let history = useHistory();
-    // const { lang, setlang, langdetect } = useContext(LanguageContext);
-    // const { fetch_inst_tabex_websitetemplatesQueryContext, StatePagePropertiesContext } = useContext(WebsiteDesignWorkPlaceContext);
-    // const {
-    //     templateproperties_context,
-    //     setsidecartnavshowcontext,
-    //     fetchAuthorizationQueryContext,
-    //     LogoutMutationContext,
-    //     fetchcustomercartQueryContext,
-    //     favoriteprojectscountContext,
-    //     setSearchHeaderInputContext,
-    // } = useContext(FetchingContext);
-    // const { routingcountext, StaticPagesLinksContext } = useContext(TemplateRoutingContext);
     const [sectionproperties, setsectionproperties] = useState('');
-
     const LogoutMutationContext = props.actions.LogoutMutationContext;
     const fetchcustomercartQueryContext = props.actions.fetchcustomercartQueryContext;
     const setsidecartnavshowcontext = props.actions.setsidecartnavshowcontext;
-    const setSearchHeaderInputContext = props.actions.setSearchHeaderInputContext;
     const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
     const lang = props.actions.lang;
     const langdetect = props.actions.langdetect;
@@ -64,7 +34,6 @@ const HeaderRestaurant = (props) => {
     const routingcountext = props.actions.routingcountext;
     const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
     const actions = props.actions;
-    // const fetch_inst_tabex_websitetemplatesQueryContext = props.fetch_inst_tabex_websitetemplatesQueryContext;
     useEffect(() => {
         var secpropobj = {};
         StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
@@ -74,13 +43,11 @@ const HeaderRestaurant = (props) => {
                 });
             }
         });
-
         if (Object.keys(secpropobj).length === 0) {
             props.defaultproperties.forEach(function (defaultpropobj, defaultpropindex) {
                 secpropobj[defaultpropobj.property_css_name] = defaultpropobj.property_value;
             });
         }
-
         setsectionproperties({ ...secpropobj });
     }, [StatePagePropertiesContext]);
     const header_cssstyles = {
@@ -322,12 +289,12 @@ const HeaderRestaurant = (props) => {
         }
     }, [templateproperties_context]);
     return (
-        <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={' 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={`${header_cssstyles.header_logo}` + ' d-flex align-items-center justify-content-center '}
+                            className={`${header_cssstyles.header_logo}` + ' d-flex align-items-center justify-content-center '}
                             style={{ cursor: 'pointer' }}
                             onClick={() => {
                                 routingcountext('home');
@@ -344,8 +311,8 @@ const HeaderRestaurant = (props) => {
                             />
                         </div>
                     </div>
-                    <div class="col-lg-4 p-0 d-flex align-items-center justify-content-center">
-                        <nav class={headerstyles.navbar}>
+                    <div className="col-lg-4 p-0 d-flex align-items-center justify-content-center">
+                        <nav className={headerstyles.navbar}>
                             <ul>
                                 {templatepropcontext.pagesnprop.map((item, index) => {
                                     var activeclass = '';
@@ -356,14 +323,14 @@ const HeaderRestaurant = (props) => {
 
                                     if (item.isnavigation == 1 && item.isactive == 1) {
                                         return (
-                                            <li class="allcentered" style={{ flex: 1, paddingLeft: '25px', paddingRight: '25px' }}>
+                                            <li className="allcentered" style={{ flex: 1, paddingLeft: '25px', paddingRight: '25px' }}>
                                                 <div
                                                     onClick={() => {
                                                         routingcountext(item.navigationroute, false, '');
                                                     }}
                                                 >
-                                                    <div class={`${headerstyles.navbar_item} ${activeclass}`}>
-                                                        <span class={`${headerstyles.navbar_item_text} ${header_cssstyles.navbar_item_text}`}>
+                                                    <div className={`${headerstyles.navbar_item} ${activeclass}`}>
+                                                        <span className={`${headerstyles.navbar_item_text} ${header_cssstyles.navbar_item_text}`}>
                                                             {langdetect == 'en' ? item.pagename : item.pagename_ar}
                                                         </span>
                                                     </div>
@@ -374,19 +341,8 @@ const HeaderRestaurant = (props) => {
                                 })}
                             </ul>
                         </nav>
-                        {sectionproperties.showhidesubheader == 'Show' && sectionproperties.subheaderposition == 'Besides Top Navigation' && (
-                            <Subheader
-                                sectionpropertiesprops={sectionproperties}
-                                subheaderpropertiesprops={{
-                                    subheaderpositionprops: 'in nav',
-                                    paddingLeftprops: '25px',
-                                    paddingRightprops: '25px',
-                                }}
-                                actions={actions}
-                            />
-                        )}
                     </div>
-                    <div class="col-lg-4 p-0 d-flex align-items-center justify-content-end">
+                    <div className="col-lg-4 p-0 d-flex align-items-center justify-content-end">
                         <Dropdown
                             style={{
                                 // (authdetailsContext.loggedin == true ? '30px' : '28px') : 0,
@@ -396,30 +352,30 @@ const HeaderRestaurant = (props) => {
                             }}
                         >
                             <Dropdown.Toggle>
-                                <div class={' d-flex align-items-center justify-content-center '}>
+                                <div className={' d-flex align-items-center justify-content-center '}>
                                     {!authdetailsContext.loggedin && (
-                                        <span class={`${header_cssstyles.user_btn}` + ' d-flex justify-content-center align-items-center '}>
+                                        <span className={`${header_cssstyles.user_btn}` + ' d-flex justify-content-center align-items-center '}>
                                             <FiUser size={sectionproperties.userBtniconfontsize} />
                                         </span>
                                     )}
                                     {authdetailsContext.loggedin && (
-                                        <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 '}>
+                                        <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 '}>
                                                     <FiUser size={sectionproperties.loggedinusericonfontsize} />
                                                 </i>
                                             </div>
                                             <div
-                                                class="m-0 p-0 loggedinuserbtn flex-column"
+                                                className="m-0 p-0 loggedinuserbtn flex-column"
                                                 style={{
                                                     textAlign: langdetect == 'en' ? 'left' : 'right',
                                                 }}
                                             >
-                                                <p class={header_cssstyles.greetingstyles + ' m-0 p-0 '}>
+                                                <p className={header_cssstyles.greetingstyles + ' m-0 p-0 '}>
                                                     {lang.hello}
                                                     {langdetect == 'en' ? ',' : '،'}
                                                 </p>
-                                                <p class={header_cssstyles.loggedinusername + ' loggedinuserbtn text-overflow m-0 p-0 '}>{authdetailsContext.customerinfo.name}</p>
+                                                <p className={header_cssstyles.loggedinusername + ' loggedinuserbtn text-overflow m-0 p-0 '}>{authdetailsContext.customerinfo.name}</p>
                                             </div>
                                         </div>
                                     )}
@@ -432,9 +388,9 @@ const HeaderRestaurant = (props) => {
                                             routingcountext(StaticPagesLinksContext.Login);
                                         }}
                                     >
-                                        <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'} />
+                                        <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'} />
                                                 <span>{lang.login}</span>
                                             </p>
                                         </div>
@@ -445,10 +401,10 @@ const HeaderRestaurant = (props) => {
                                             routingcountext(StaticPagesLinksContext.Signup);
                                         }}
                                     >
-                                        <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>
+                                        <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>
                                             </p>
                                         </div>
                                     </Dropdown.Item>
@@ -461,14 +417,14 @@ const HeaderRestaurant = (props) => {
                                             routingcountext(StaticPagesLinksContext.Ordershistory);
                                         }}
                                     >
-                                        <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'} />}
+                                        <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'} />}
                                                 <span>{lang.orderhistory}</span>
                                             </p>
                                         </div>
@@ -479,10 +435,10 @@ const HeaderRestaurant = (props) => {
                                             routingcountext(StaticPagesLinksContext.Wishlist);
                                         }}
                                     >
-                                        <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'} />}
+                                        <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'} />}
                                                 <span>{lang.wishlist}</span>
                                             </p>
                                         </div>
@@ -493,9 +449,9 @@ const HeaderRestaurant = (props) => {
                                             routingcountext(StaticPagesLinksContext.Policies);
                                         }}
                                     >
-                                        <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'} />
+                                        <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'} />
                                                 <span>{lang.policies}</span>
                                             </p>
                                         </div>
@@ -506,9 +462,9 @@ const HeaderRestaurant = (props) => {
                                             LogoutMutationContext.mutate();
                                         }}
                                     >
-                                        <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'} />
+                                        <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'} />
                                                 <span>{lang.logout}</span>
                                             </p>
                                         </div>
@@ -518,13 +474,13 @@ const HeaderRestaurant = (props) => {
                         </Dropdown>
                         {sectionproperties.favBtnShow == 'Show' && (
                             <div
-                                class={`${header_cssstyles.wishlist_btn}` + ' d-flex justify-content-center align-items-center '}
+                                className={`${header_cssstyles.wishlist_btn}` + ' d-flex justify-content-center align-items-center '}
                                 onClick={() => {
                                     routingcountext(StaticPagesLinksContext.Wishlist);
                                 }}
                             >
                                 <span style={{ position: 'relative' }}>
-                                    <i class={' h-100 d-flex align-items-center '}>
+                                    <i className={' h-100 d-flex align-items-center '}>
                                         {sectionproperties.faviconshape == 'Heart Shape' && (
                                             <FaRegHeart
                                                 style={{
@@ -541,7 +497,7 @@ const HeaderRestaurant = (props) => {
                                         )}
                                     </i>
                                     <div
-                                        class={
+                                        className={
                                             `${headerstyles.badge_counter_header_notifications} ${header_cssstyles.badge_counter_header_notifications} ${header_cssstyles.wishlistbadge}` +
                                             ' d-flex justify-content-center text-center '
                                         }
@@ -552,7 +508,7 @@ const HeaderRestaurant = (props) => {
                             </div>
                         )}
                         <div
-                            class={
+                            className={
                                 !authdetailsContext.loggedin
                                     ? langdetect == 'en'
                                         ? `${header_cssstyles.cart_btn}` + ' cursor-pointer allcentered ml-3 mr-4 '
@@ -568,12 +524,12 @@ const HeaderRestaurant = (props) => {
                             }}
                         >
                             <span style={{ position: 'relative' }}>
-                                <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} />}
+                                <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} />}
                                     {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdOutlineShoppingCart size={sectionproperties.cartBtn_iconFontSize} />}
                                 </i>
                                 <div
@@ -593,10 +549,10 @@ const HeaderRestaurant = (props) => {
                                 </div>
                             </span>
                         </div>
-                        <div class={langdetect == 'en' ? 'informationdropdown informationdropdown_en' : 'informationdropdown informationdropdown_ar'}>
+                        <div className={langdetect == 'en' ? 'informationdropdown informationdropdown_en' : 'informationdropdown informationdropdown_ar'}>
                             <Dropdown>
                                 <Dropdown.Toggle>
-                                    <i class={header_cssstyles.infoiconcontainer + ' allcentered '}>
+                                    <i className={header_cssstyles.infoiconcontainer + ' allcentered '}>
                                         <BsInfoCircle size={sectionproperties.icontextfontsize} />
                                     </i>
                                 </Dropdown.Toggle>
@@ -613,53 +569,53 @@ const HeaderRestaurant = (props) => {
                                     </Dropdown.Header>
                                     <Dropdown.Divider />
                                     <Dropdown.Item>
-                                        <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 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>
-                                            <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 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>
                                         </div>
                                     </Dropdown.Item>
                                     <Dropdown.Divider />
                                     <Dropdown.Item>
-                                        <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 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>
-                                            <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 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>
                                         </div>
                                     </Dropdown.Item>
                                     <Dropdown.Divider />
                                     <Dropdown.Item>
-                                        <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 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>
-                                            <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 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>
                                         </div>
                                     </Dropdown.Item>
                                     <Dropdown.Divider />
                                     <Dropdown.Item>
-                                        <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 ">
+                                        <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 ">
                                                 {sectionproperties.fbbtn_show == 'Show' && (
-                                                    <div class={`${header_cssstyles.facebook_btn}` + '  d-flex align-items-center justify-content-center '}>
+                                                    <div className={`${header_cssstyles.facebook_btn}` + '  d-flex align-items-center justify-content-center '}>
                                                         <FaFacebookF size={sectionproperties.facebkbtnniconfontsize} />
                                                     </div>
                                                 )}
                                                 {sectionproperties.instbtn_show == 'Show' && (
-                                                    <div class={`${header_cssstyles.instgram_btn}` + '  d-flex align-items-center justify-content-center ml-3 mr-3 '}>
+                                                    <div className={`${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 class={`${header_cssstyles.youtube_btn}` + '  d-flex align-items-center justify-content-center '}>
+                                                    <div className={`${header_cssstyles.youtube_btn}` + '  d-flex align-items-center justify-content-center '}>
                                                         <BsWhatsapp size={sectionproperties.youtubebtniconfontsize} />
                                                     </div>
                                                 )}
@@ -669,7 +625,7 @@ const HeaderRestaurant = (props) => {
                                 </Dropdown.Menu>
                             </Dropdown>
                         </div>
-                        <div class={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
+                        <div className={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
                             <Dropdown
                                 style={{
                                     marginLeft: langdetect == 'en' ? '25px' : 0,
@@ -677,19 +633,19 @@ const HeaderRestaurant = (props) => {
                                 }}
                             >
                                 <Dropdown.Toggle>
-                                    <li class={' d-flex align-items-center justify-content-center '}>
+                                    <li className={' d-flex align-items-center justify-content-center '}>
                                         {langdetect == 'en' && (
-                                            <div class={`${header_cssstyles.language_container}` + ' row m-0 allcentered '}>
+                                            <div className={`${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' }} class="ml-2 mr-2"></div>
-                                                <p class="m-0 p-0">ع</p>
+                                                <div style={{ height: '20px', width: '1.5px', background: '#e6e6e6' }} className="ml-2 mr-2"></div>
+                                                <p className="m-0 p-0">ع</p>
                                             </div>
                                         )}
                                         {langdetect == 'ar' && (
-                                            <div class={`${header_cssstyles.language_container}` + ' row m-0 allcentered '}>
+                                            <div className={`${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' }} class="ml-2 mr-2"></div>
-                                                <p class="m-0 p-0">En</p>
+                                                <div style={{ height: '20px', width: '1.5px', background: '#e6e6e6' }} className="ml-2 mr-2"></div>
+                                                <p className="m-0 p-0">En</p>
                                             </div>
                                         )}
                                     </li>
@@ -700,10 +656,10 @@ const HeaderRestaurant = (props) => {
                                             setlang('ar');
                                         }}
                                     >
-                                        <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 '}>
+                                        <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 '}>
                                                 <img src={egyptflag} style={{ maxWidth: '2.5vh', maxHeight: '2.5vh' }} />
-                                                <span class="ml-2 mr-2">{lang.arabic}</span>
+                                                <span className="ml-2 mr-2">{lang.arabic}</span>
                                             </p>
                                         </div>
                                     </Dropdown.Item>
@@ -714,7 +670,7 @@ const HeaderRestaurant = (props) => {
                                         }}
                                     >
                                         <span
-                                            class="d-flex align-items-center justify-content-center"
+                                            className="d-flex align-items-center justify-content-center"
                                             style={{
                                                 fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                 fontWeight: sectionproperties.dropdown_fontweight,
@@ -722,28 +678,28 @@ const HeaderRestaurant = (props) => {
                                             }}
                                         >
                                             <img src={usflag} style={{ maxWidth: '2.5vh', maxHeight: '2.5vh' }} />
-                                            <span class="ml-2 mr-2">{lang.english}</span>
+                                            <span className="ml-2 mr-2">{lang.english}</span>
                                         </span>
                                     </Dropdown.Item>
                                 </Dropdown.Menu>
                             </Dropdown>
                         </div>
                     </div>
-                    <div class="col-lg-12 p-0">
-                        {sectionproperties.showhidesubheader == 'Show' && sectionproperties.subheaderposition == 'Full Width' && (
+                    <div className="col-lg-12 p-0">
+                        {sectionproperties.showhidesubheader == 'Show' && (
                             <Subheader
+                                actions={actions}
                                 sectionpropertiesprops={sectionproperties}
                                 subheaderpropertiesprops={{
                                     subheaderpositionprops: 'Full Width',
                                     paddingLeftprops: '25px',
                                     paddingRightprops: '25px',
                                 }}
-                                actions={actions}
                             />
                         )}
                     </div>
                 </div>
-                <div class="col-lg-12 p-0">
+                <div className="col-lg-12 p-0">
                     <Headerresponsive actions={actions} sectionpropertiesprops={sectionproperties} />
                 </div>
             </div>