tabexseriescomponents 0.0.71 → 0.0.73

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useContext } from 'react';
-// import { useHistory } from 'react-router-dom';
+// import { useHistory, Link } from 'react-router-dom';
 import Dropdown from 'react-bootstrap/Dropdown';
 // import '../../Generalfiles/CSS_GENERAL/dropdown.css';
 
@@ -36,6 +36,7 @@ import Headerresponsive from '../Headerresponsive/Headerresponsive.jsx';
 import Subheader from '../Subheader/Subheader.jsx';
 
 const Modernheader = (props) => {
+    // let history = useHistory();
     // const { lang, setlang, langdetect } = useContext(LanguageContext);
     // const { fetch_inst_tabex_websitetemplatesQueryContext, StatePagePropertiesContext } = useContext(WebsiteDesignWorkPlaceContext);
     // const {
@@ -64,7 +65,7 @@ const Modernheader = (props) => {
     const favoriteprojectscountContext = props.actions.favoriteprojectscountContext;
     const routingcountext = props.actions.routingcountext;
     const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
-    const history = props.actions.history;
+    const history = props.actions.useHistory;
     const actions = props.actions;
     // const fetch_inst_tabex_websitetemplatesQueryContext = props.fetch_inst_tabex_websitetemplatesQueryContext;
     useEffect(() => {
@@ -304,9 +305,9 @@ const Modernheader = (props) => {
         }
     }, [templateproperties_context]);
     return (
-        <div className={`${headerstyles.header_container}` + ' row m-0 w-100 d-flex justify-content-center '} style={{ position: 'relative' }}>
+        <div class={`${headerstyles.header_container}` + ' row m-0 w-100 d-flex justify-content-center '} style={{ position: 'relative' }}>
             <div
-                className="row m-0 d-md-none"
+                class="row m-0 d-md-none"
                 style={{
                     position: sectionproperties.headerstyles_position,
                     marginTop: sectionproperties.header_marginTop + 'px',
@@ -314,29 +315,29 @@ const Modernheader = (props) => {
                     width: sectionproperties.header_width + 'vw',
                 }}
             >
-                <div className="row m-0 w-100">
-                    <div className={`${header_cssstyles.top_bar}` + ' row m-0 w-100 d-flex align-items-center '}>
-                        <div className="col-lg-4 col-md-6 col-sm-12 allcentered p-0" style={{}}>
-                            <div className={header_cssstyles.searchbarcont}>
+                <div class="row m-0 w-100">
+                    <div class={`${header_cssstyles.top_bar}` + ' row m-0 w-100 d-flex align-items-center '}>
+                        <div class="col-lg-4 col-md-6 col-sm-12 allcentered p-0" style={{}}>
+                            <div class={header_cssstyles.searchbarcont}>
                                 <input
                                     type="text"
                                     placeholder={lang.searchproducts}
-                                    className={`${header_cssstyles.searchbarcont_input}`}
+                                    class={`${header_cssstyles.searchbarcont_input}`}
                                     onChange={(event) => {
                                         setSearchHeaderInputContext(event.target.value);
                                     }}
                                 />
-                                <span className={header_cssstyles.searchbar_icon_cont + ' m-0 pr-0 '}>
-                                    <i className="h-100 allcentered">
+                                <span class={header_cssstyles.searchbar_icon_cont + ' m-0 pr-0 '}>
+                                    <i class="h-100 allcentered">
                                         <BsSearch size={sectionproperties.searchbaricon_fontsize} />
                                     </i>
                                 </span>
                                 <Searchlist actions={actions} sectionpropertiesprops={sectionproperties} srcfromprops={'fullheader'} />
                             </div>
                         </div>
-                        <div className="col-lg-4 col-md-6 col-sm-12 allcentered p-0">
+                        <div class="col-lg-4 col-md-6 col-sm-12 allcentered p-0">
                             <div
-                                className={`${header_cssstyles.header_logo}` + ' allcentered '}
+                                class={`${header_cssstyles.header_logo}` + ' allcentered '}
                                 style={{ cursor: 'pointer' }}
                                 onClick={() => {
                                     routingcountext('home');
@@ -353,32 +354,32 @@ const Modernheader = (props) => {
                                 />
                             </div>
                         </div>
-                        <div className="col-lg-4 col-md-6 col-sm-12 p-0 d-flex align-items-center justify-content-end">
+                        <div class="col-lg-4 col-md-6 col-sm-12 p-0 d-flex align-items-center justify-content-end">
                             <div style={{ marginRight: langdetect == 'en' ? '30px' : 0, marginLeft: langdetect == 'en' ? 0 : '30px' }}>
                                 <Dropdown>
                                     <Dropdown.Toggle>
                                         {!authdetailsContext.loggedin && (
-                                            <div className={` ${header_cssstyles.user_btn}` + ' d-flex align-items-center justify-content-center '} sytle={{ position: 'relative' }}>
-                                                <i className={' h-100 d-flex align-items-center '}>
+                                            <div class={` ${header_cssstyles.user_btn}` + ' d-flex align-items-center justify-content-center '} sytle={{ position: 'relative' }}>
+                                                <i class={' h-100 d-flex align-items-center '}>
                                                     <BiUser size={sectionproperties.userBtnTextfontsize} />
                                                 </i>
                                             </div>
                                         )}
                                         {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 '}>
                                                         <BiUser 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="m-0 p-0"
+                                                        class="m-0 p-0"
                                                         style={{
                                                             color: sectionproperties.greetingtextcolor,
                                                             fontSize: sectionproperties.greetingtextfontsize + 'px',
@@ -390,7 +391,7 @@ const Modernheader = (props) => {
                                                         {langdetect == 'en' ? ',' : '،'}
                                                     </p>
                                                     <p
-                                                        className={header_cssstyles.loggedinusername + ' loggedinuserbtn m-0 p-0 text-overflow '}
+                                                        class={header_cssstyles.loggedinusername + ' loggedinuserbtn m-0 p-0 text-overflow '}
                                                         style={{
                                                             maxWidth: '90px',
                                                         }}
@@ -408,9 +409,9 @@ const Modernheader = (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>
@@ -421,10 +422,10 @@ const Modernheader = (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>
@@ -437,16 +438,16 @@ const Modernheader = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Ordershistory);
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
-                                                    <i className="h-100 allcentered">
-                                                        {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}` + ' allcenetered m-0 p-0 '}>
+                                                    <i class="h-100 allcentered">
+                                                        {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'} />}
                                                     </i>
-                                                    <p className={' allcenetered m-0 p-0 '}>{lang.orderhistory}</p>
+                                                    <p class={' allcenetered m-0 p-0 '}>{lang.orderhistory}</p>
                                                 </div>
                                             </Dropdown.Item>
                                             <Dropdown.Divider></Dropdown.Divider>
@@ -455,12 +456,12 @@ const Modernheader = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Wishlist);
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
-                                                    <i className="h-100 allcentered">
-                                                        {sectionproperties.faviconshape == 'Heart Shape' && <FaRegHeart className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
-                                                        {sectionproperties.faviconshape == 'Star Shape' && <AiFillStar className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
+                                                    <i class="h-100 allcentered">
+                                                        {sectionproperties.faviconshape == 'Heart Shape' && <FaRegHeart class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
+                                                        {sectionproperties.faviconshape == 'Star Shape' && <AiFillStar class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />}
                                                     </i>
-                                                    <p className={' allcenetered m-0 p-0 '}>{lang.wishlist}</p>
+                                                    <p class={' allcenetered m-0 p-0 '}>{lang.wishlist}</p>
                                                 </div>
                                             </Dropdown.Item>
                                             <Dropdown.Divider></Dropdown.Divider>
@@ -469,11 +470,11 @@ const Modernheader = (props) => {
                                                     routingcountext(StaticPagesLinksContext.Policies);
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
-                                                    <i className="h-100 allcentered">
-                                                        <MdOutlinePolicy className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' allcenetered m-0 p-0 '}>
+                                                    <i class="h-100 allcentered">
+                                                        <MdOutlinePolicy class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
                                                     </i>
-                                                    <p className={' allcenetered m-0 p-0 '}>{lang.policies}</p>
+                                                    <p class={' allcenetered m-0 p-0 '}>{lang.policies}</p>
                                                 </div>
                                             </Dropdown.Item>
                                             <Dropdown.Divider></Dropdown.Divider>
@@ -482,11 +483,11 @@ const Modernheader = (props) => {
                                                     LogoutMutationContext.mutate();
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
-                                                    <i className="h-100 allcentered">
-                                                        <BiLogOutCircle className={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' m-0 p-0 d-flex align-items-center '}>
+                                                    <i class="h-100 allcentered">
+                                                        <BiLogOutCircle class={langdetect == 'en' ? 'mr-2' : 'ml-2'} />
                                                     </i>
-                                                    <p className={' allcenetered m-0 p-0 '}>{lang.logout}</p>
+                                                    <p class={' allcenetered m-0 p-0 '}>{lang.logout}</p>
                                                 </div>
                                             </Dropdown.Item>
                                         </Dropdown.Menu>
@@ -494,14 +495,14 @@ const Modernheader = (props) => {
                                 </Dropdown>
                             </div>
                             <div
-                                className={`${header_cssstyles.wishlist_btn} ${headerstyles.header_menu}` + ' cursor-pointer allcentered '}
+                                class={`${header_cssstyles.wishlist_btn} ${headerstyles.header_menu}` + ' cursor-pointer allcentered '}
                                 onClick={() => {
                                     routingcountext(StaticPagesLinksContext.Wishlist);
                                 }}
                                 style={{ marginRight: langdetect == 'en' ? '30px' : 0, marginLeft: langdetect == 'en' ? 0 : '30px' }}
                             >
-                                <span className={`${headerstyles.nav_link} ` + ' pr-0  '} style={{ position: 'relative' }}>
-                                    <i className="allcentered">
+                                <span class={`${headerstyles.nav_link} ` + ' pr-0  '} style={{ position: 'relative' }}>
+                                    <i class="allcentered">
                                         {sectionproperties.faviconshape == 'Heart Shape' && (
                                             <FaRegHeart
                                                 style={{
@@ -518,7 +519,7 @@ const Modernheader = (props) => {
                                         )}
                                     </i>
                                     <div
-                                        className={`${headerstyles.badge_counter_header_notifications} ${header_cssstyles.badge_counter_header_notifications}`}
+                                        class={`${headerstyles.badge_counter_header_notifications} ${header_cssstyles.badge_counter_header_notifications}`}
                                         style={{
                                             top: sectionproperties.wishlistbadgetop + 'px',
                                             right: sectionproperties.wishlistbadgeright + 'px',
@@ -529,7 +530,7 @@ const Modernheader = (props) => {
                                 </span>
                             </div>
                             <div
-                                className={`${headerstyles.header_menu} ${header_cssstyles.cart_btn}` + ' cursor-pointer allcentered  '}
+                                class={`${headerstyles.header_menu} ${header_cssstyles.cart_btn}` + ' cursor-pointer allcentered  '}
                                 onClick={() => {
                                     setsidecartnavshowcontext(true);
                                 }}
@@ -538,13 +539,13 @@ const Modernheader = (props) => {
                                     marginLeft: langdetect == 'en' ? 0 : '30px',
                                 }}
                             >
-                                <span className={`${headerstyles.nav_link}` + ' pr-0 '} 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} />}
+                                <span class={`${headerstyles.nav_link}` + ' pr-0 '} 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} />}
                                         {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdOutlineShoppingCart size={sectionproperties.cartBtn_iconFontSize} />}
                                     </i>
                                     <div
@@ -564,51 +565,51 @@ const Modernheader = (props) => {
                                     </div>
                                 </span>
                             </div>
-                            <div className={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
+                            <div class={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
                                 <Dropdown>
                                     <Dropdown.Toggle>
-                                        <li className={`${headerstyles.header_menu}` + ' allcentered '}>
+                                        <li class={`${headerstyles.header_menu}` + ' allcentered '}>
                                             {langdetect == 'en' && (
-                                                <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
                                                     <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.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
                                                     <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>
                                     </Dropdown.Toggle>
                                     <Dropdown.Menu>
                                         <Dropdown.Item
-                                            className={`${header_cssstyles.dropdownitem}`}
+                                            class={`${header_cssstyles.dropdownitem}`}
                                             onClick={() => {
                                                 setlang('ar');
                                             }}
                                         >
-                                            <div className={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
-                                                <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+                                            <div class={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
+                                                <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
                                                     <img src={egyptflag} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
-                                                    <span className="ml-2 mr-2">{lang.arabic}</span>
+                                                    <span class="ml-2 mr-2">{lang.arabic}</span>
                                                 </p>
                                             </div>
                                         </Dropdown.Item>
                                         <Dropdown.Divider></Dropdown.Divider>
                                         <Dropdown.Item
-                                            className={`${header_cssstyles.dropdownitem}`}
+                                            class={`${header_cssstyles.dropdownitem}`}
                                             onClick={() => {
                                                 setlang('en');
                                             }}
                                         >
-                                            <div className={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
-                                                <p className={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
+                                            <div class={`${header_cssstyles.dropdownitemcontainer}` + ' d-flex align-items-center m-0 p-0 '}>
+                                                <p class={`${header_cssstyles.dropdownitem}` + ' dropdownitem d-flex align-items-center m-0 p-0 '}>
                                                     <img src={usflag} style={{ maxWidth: '2vh', maxHeight: '2vh' }} />
-                                                    <span className="ml-2 mr-2">{lang.english}</span>
+                                                    <span class="ml-2 mr-2">{lang.english}</span>
                                                 </p>
                                             </div>
                                         </Dropdown.Item>
@@ -618,20 +619,15 @@ const Modernheader = (props) => {
                         </div>
                     </div>
                     {sectionproperties.showlowerheadersection == 'Show' && (
-                        <div className="col-lg-12 allcentered p-0">
-                            <div className={header_cssstyles.header_divider}></div>
+                        <div class="col-lg-12 allcentered p-0">
+                            <div class={header_cssstyles.header_divider}></div>
                         </div>
                     )}
                     {sectionproperties.showlowerheadersection == 'Show' && (
-                        <div className={`${header_cssstyles.navbar_nav} ` + ' row w-100 m-0 d-flex align-items-center '}>
-                            <div
-                                className="col-lg-12 col-md-12 justify-content-center align-items-center m-auto"
-                                style={{
-                                    display: sectionproperties.subheaderposition == 'Besides Top Navigation' ? 'block' : 'flex',
-                                }}
-                            >
+                        <div class={`${header_cssstyles.navbar_nav} ` + ' row w-100 m-0 d-flex align-items-center '}>
+                            <div class="col-lg-12 col-md-12 allcentered m-auto">
                                 <nav
-                                    className={headerstyles.navbar}
+                                    class={headerstyles.navbar}
                                     style={{
                                         display: sectionproperties.showhidesubheader == 'Show' && sectionproperties.subheaderposition == 'Besides Top Navigation' ? 'none' : 'flex',
                                     }}
@@ -649,13 +645,9 @@ const Modernheader = (props) => {
                                             }
                                             if (item.isnavigation == 1 && item.isactive == 1) {
                                                 return (
-                                                    <div
-                                                        onClick={() => {
-                                                            history.push(item.navigationroute);
-                                                        }}
-                                                    >
+                                                    <div to={item.navigationroute}>
                                                         <li
-                                                            className={`${headerstyles.topbar_item_container}` + ' nav-item '}
+                                                            class={`${headerstyles.topbar_item_container}` + ' nav-item '}
                                                             onClick={() => {
                                                                 templatepropcontext.pagesnprop.forEach(function (pageitem, pageindex) {
                                                                     pageitem.isselected = false;
@@ -663,8 +655,8 @@ const Modernheader = (props) => {
                                                                 templatepropcontext.pagesnprop[index].isselected = true;
                                                             }}
                                                         >
-                                                            <div className={`${headerstyles.topbar_item} ${header_cssstyles.topbar_item} ${header_cssstyles.nav_link} ${activeclass} ${activeclass2}`}>
-                                                                <span className={`${headerstyles.topbar_item_text} ${header_cssstyles.topbar_item_text} ${activeclass3}`}>
+                                                            <div class={`${headerstyles.topbar_item} ${header_cssstyles.topbar_item} ${header_cssstyles.nav_link} ${activeclass} ${activeclass2}`}>
+                                                                <span class={`${headerstyles.topbar_item_text} ${header_cssstyles.topbar_item_text} ${activeclass3}`}>
                                                                     {langdetect == 'en' ? item.pagename : item.pagename_ar}
                                                                 </span>
                                                             </div>
@@ -677,7 +669,6 @@ const Modernheader = (props) => {
                                 </nav>
                                 {sectionproperties.showhidesubheader == 'Show' && sectionproperties.subheaderposition == 'Besides Top Navigation' && (
                                     <Subheader
-                                        actions={actions}
                                         sectionpropertiesprops={sectionproperties}
                                         subheaderpropertiesprops={{
                                             subheaderpositionprops: 'in nav',
@@ -685,16 +676,16 @@ const Modernheader = (props) => {
                                             paddingRightprops: '30px',
                                             subheadercontentpositionprops: 'center',
                                         }}
+                                        actions={actions}
                                     />
                                 )}
                             </div>
                         </div>
                     )}
                 </div>
-                <div className="col-lg-12 p-0">
+                <div class="col-lg-12 p-0">
                     {sectionproperties.showhidesubheader == 'Show' && sectionproperties.subheaderposition == 'Full Width' && (
                         <Subheader
-                            actions={actions}
                             sectionpropertiesprops={sectionproperties}
                             subheaderpropertiesprops={{
                                 subheaderpositionprops: 'Full Width',
@@ -702,6 +693,7 @@ const Modernheader = (props) => {
                                 paddingRightprops: '30px',
                                 subheadercontentpositionprops: 'center',
                             }}
+                            actions={actions}
                         />
                     )}
                 </div>