tabexseriescomponents 0.0.71 → 0.0.74

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

@@ -1,9 +1,18 @@
 import React, { useEffect, useState, useContext } from 'react';
+// import { useHistory, Link } from 'react-router-dom';
 import Dropdown from 'react-bootstrap/Dropdown';
+// import '../../Generalfiles/CSS_GENERAL/dropdown.css';
 import headerstyles from '../../../styles/headers/Allinoneheader.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 { BsBag, BsHandbag } from 'react-icons/bs';
 import { BiLogOutCircle } from 'react-icons/bi';
 import { MdOutlinePolicy, MdOutlineShoppingCart, MdKeyboardArrowDown } from 'react-icons/md';
@@ -13,15 +22,23 @@ import { GoSearch } from 'react-icons/go';
 import { AiOutlineLogin, AiOutlineUserAdd } from 'react-icons/ai';
 import { AiOutlineStar, AiFillStar } from 'react-icons/ai';
 import { FiShoppingBag, FiShoppingCart, FiUser } from 'react-icons/fi';
+import { IoBagHandleOutline } from 'react-icons/io5';
+
 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';
-// import { useHistory } from 'react-router-dom';
 
 const AllinoneHeader = (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, 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;
@@ -37,7 +54,6 @@ const AllinoneHeader = (props) => {
     const routingcountext = props.actions.routingcountext;
     const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
     const actions = props.actions;
-    const history = props.actions.history;
     // const fetch_inst_tabex_websitetemplatesQueryContext = props.fetch_inst_tabex_websitetemplatesQueryContext;
     useEffect(() => {
         var secpropobj = {};
@@ -286,9 +302,9 @@ const AllinoneHeader = (props) => {
         return totalprice;
     };
     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',
@@ -296,11 +312,11 @@ const AllinoneHeader = (props) => {
                     width: '100vw',
                 }}
             >
-                <div className="col-lg-12 p-0">
-                    <div className={`${header_cssstyles.top_bar}` + ' row m-0 w-100 d-flex align-items-center '}>
-                        <div className="col-lg-3 col-md-6 col-sm-12 d-flex align-items-center justify-content-start p-0">
+                <div class="col-lg-12 p-0">
+                    <div class={`${header_cssstyles.top_bar}` + ' row m-0 w-100 d-flex align-items-center '}>
+                        <div class="col-lg-3 col-md-6 col-sm-12 d-flex align-items-center justify-content-start p-0">
                             <div
-                                className={`${header_cssstyles.header_logo}`}
+                                class={`${header_cssstyles.header_logo}`}
                                 style={{ cursor: 'pointer' }}
                                 onClick={() => {
                                     routingcountext('home');
@@ -318,14 +334,14 @@ const AllinoneHeader = (props) => {
                                 />
                             </div>
                         </div>
-                        <div className="col-lg-9 col-md-6 col-sm-12 allcentered p-0">
-                            <div className="row m-0 w-100 d-flex justify-content-end align-items-center">
+                        <div class="col-lg-9 col-md-6 col-sm-12 allcentered p-0">
+                            <div class="row m-0 w-100 d-flex justify-content-end align-items-center">
                                 {sectionproperties.searchbar_show == 'Show' && (
-                                    <div className="col-lg-5 p-0 d-flex justify-content-end align-items-center">
-                                        <div className="row m-0 w-100 d-flex justify-content-end align-items-center">
-                                            <div className="col-lg-12 p-0 d-flex justify-content-end align-items-center">
+                                    <div class="col-lg-5 p-0 d-flex justify-content-end align-items-center">
+                                        <div class="row m-0 w-100 d-flex justify-content-end align-items-center">
+                                            <div class="col-lg-12 p-0 d-flex justify-content-end align-items-center">
                                                 <input
-                                                    className={`${headerstyles.searchbar} ${header_cssstyles.searchbarcont_input}`}
+                                                    class={`${headerstyles.searchbar} ${header_cssstyles.searchbarcont_input}`}
                                                     placeholder={langdetect == 'en' ? "What're we looking for?" : 'البحث...'}
                                                     onChange={(event) => {
                                                         setSearchHeaderInputContext(event.target.value);
@@ -335,8 +351,8 @@ const AllinoneHeader = (props) => {
                                                         left: langdetect == 'en' ? '' : 0,
                                                     }}
                                                 />
-                                                <div className={`${header_cssstyles.searchbarcont}` + ' d-flex justify-content-center align-items-center '}>
-                                                    <i className={headerstyles.searchbaractive + ' h-100 d-flex align-items-center'}>
+                                                <div class={`${header_cssstyles.searchbarcont}` + ' d-flex justify-content-center align-items-center '}>
+                                                    <i class={headerstyles.searchbaractive + ' h-100 d-flex align-items-center'}>
                                                         <GoSearch
                                                             size={sectionproperties.searchbarcontfontsize}
                                                             style={{
@@ -346,8 +362,8 @@ const AllinoneHeader = (props) => {
                                                     </i>
                                                 </div>
                                             </div>
-                                            <div className="col-lg-12 p-0 d-flex justify-content-end align-items-center">
-                                                <Searchlist sectionpropertiesprops={sectionproperties} actions={actions} srcfromprops={'header-400'} />
+                                            <div class="col-lg-12 p-0 d-flex justify-content-end align-items-center">
+                                                <Searchlist actions={actions} sectionpropertiesprops={sectionproperties} srcfromprops={'header-400'} />
                                             </div>
                                         </div>
                                     </div>
@@ -360,27 +376,27 @@ const AllinoneHeader = (props) => {
                                 >
                                     <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 '}>
                                                     <FiUser 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 '}>
                                                         <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="m-0 p-0"
+                                                        class="m-0 p-0"
                                                         style={{
                                                             color: sectionproperties.greetingtextcolor,
                                                             fontSize: sectionproperties.greetingtextfontsize + 'px',
@@ -391,7 +407,7 @@ const AllinoneHeader = (props) => {
                                                         {lang.hello}
                                                         {langdetect == 'en' ? ',' : '،'}
                                                     </p>
-                                                    <p className={header_cssstyles.loggedinusername + ' loggedinuserbtn m-0 p-0 text-overflow '}>{authdetailsContext.customerinfo.name}</p>
+                                                    <p class={header_cssstyles.loggedinusername + ' loggedinuserbtn m-0 p-0 text-overflow '}>{authdetailsContext.customerinfo.name}</p>
                                                 </div>
                                             </div>
                                         )}
@@ -403,9 +419,9 @@ const AllinoneHeader = (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>
@@ -416,10 +432,10 @@ const AllinoneHeader = (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>
@@ -432,16 +448,16 @@ const AllinoneHeader = (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>
@@ -450,12 +466,12 @@ const AllinoneHeader = (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>
@@ -464,11 +480,11 @@ const AllinoneHeader = (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>
@@ -477,11 +493,11 @@ const AllinoneHeader = (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>
@@ -489,7 +505,7 @@ const AllinoneHeader = (props) => {
                                 </Dropdown>
                                 {sectionproperties.favBtnShow == 'Show' && (
                                     <div
-                                        className={
+                                        class={
                                             langdetect == 'en'
                                                 ? `${header_cssstyles.wishlist_btn}` + ' d-flex justify-content-center align-items-center ml-3 '
                                                 : `${header_cssstyles.wishlist_btn}` + ' d-flex justify-content-center align-items-center mr-3 '
@@ -498,7 +514,7 @@ const AllinoneHeader = (props) => {
                                             routingcountext(StaticPagesLinksContext.Wishlist);
                                         }}
                                     >
-                                        <i className={'h-100 d-flex align-items-center'}>
+                                        <i class={'h-100 d-flex align-items-center'}>
                                             {sectionproperties.faviconshape == 'Heart Shape' && (
                                                 <FaRegHeart
                                                     style={{
@@ -519,24 +535,24 @@ const AllinoneHeader = (props) => {
 
                                 {sectionproperties.cartBtnShow == 'Show' && (
                                     <div
-                                        className="m-0 d-flex flex-row align-items-center justify-content-end ml-3 mr-4"
+                                        class="m-0 d-flex flex-row align-items-center justify-content-end ml-3 mr-4"
                                         onClick={() => {
                                             setsidecartnavshowcontext(true);
                                         }}
                                     >
-                                        <div className={`${header_cssstyles.cart_btn}` + ' allcentered ml-2 mr-2 '} style={{ position: 'relative' }}>
+                                        <div class={`${header_cssstyles.cart_btn}` + ' allcentered ml-2 mr-2 '} style={{ position: 'relative' }}>
                                             {sectionproperties.carticonstyle == 'Shopping bag 1' && <FiShoppingBag size={sectionproperties.cartBtn_iconFontSize} />}
                                             {sectionproperties.carticonstyle == 'Shopping bag 2' && <CgShoppingBag size={sectionproperties.cartBtn_iconFontSize} />}
                                             {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag size={sectionproperties.cartBtn_iconFontSize} />}
                                             {sectionproperties.carticonstyle == 'Shopping bag 4' && <BsHandbag size={sectionproperties.cartBtn_iconFontSize} />}
                                             {sectionproperties.carticonstyle == 'Shopping cart 1' && <FiShoppingCart size={sectionproperties.cartBtn_iconFontSize} />}
                                             {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdOutlineShoppingCart size={sectionproperties.cartBtn_iconFontSize} />}
-                                            <div className={`${header_cssstyles.badge_counter_header_notifications} ${header_cssstyles.cartbadge}`}>
+                                            <div class={`${header_cssstyles.badge_counter_header_notifications} ${header_cssstyles.cartbadge}`}>
                                                 {fetchcustomercartQueryContext?.data?.data?.customercart != null ? fetchcustomercartQueryContext?.data?.data?.customercart?.cartitems?.length : 0}
                                             </div>
                                         </div>
                                         <p
-                                            className="m-0 p-0 d-flex flex-column "
+                                            class="m-0 p-0 d-flex flex-column "
                                             style={{
                                                 color: sectionproperties.cartBtnTextcolor,
                                                 fontSize: sectionproperties.cartBtnTextfontsize + 'px',
@@ -549,7 +565,7 @@ const AllinoneHeader = (props) => {
                                         >
                                             {lang.cart}
                                             <p
-                                                className="m-0 p-0"
+                                                class="m-0 p-0"
                                                 style={{
                                                     color: sectionproperties.total_color,
                                                     fontSize: sectionproperties.total_fontsize + 'px',
@@ -563,19 +579,19 @@ const AllinoneHeader = (props) => {
                                         </p>
                                     </div>
                                 )}
-                                <div className={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
+                                <div class={langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'}>
                                     <Dropdown>
                                         <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.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                        <p className="m-0 p-0 mr-2">En</p>
+                                                    <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                        <p class="m-0 p-0 mr-2">En</p>
                                                         <MdKeyboardArrowDown />
                                                     </div>
                                                 )}
                                                 {langdetect == 'ar' && (
-                                                    <div className={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
-                                                        <p className="m-0 p-0 ml-2">ع</p>
+                                                    <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
+                                                        <p class="m-0 p-0 ml-2">ع</p>
                                                         <MdKeyboardArrowDown />
                                                     </div>
                                                 )}
@@ -587,9 +603,9 @@ const AllinoneHeader = (props) => {
                                                     setlang('ar');
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' p-0 '}>
                                                     <p
-                                                        className={'dropdownitem d-flex align-items-center m-0 p-0'}
+                                                        class={'dropdownitem d-flex align-items-center m-0 p-0'}
                                                         style={{
                                                             fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                             fontWeight: sectionproperties.dropdown_fontweight,
@@ -597,7 +613,7 @@ const AllinoneHeader = (props) => {
                                                         }}
                                                     >
                                                         <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>
@@ -607,9 +623,9 @@ const AllinoneHeader = (props) => {
                                                     setlang('en');
                                                 }}
                                             >
-                                                <div className={`${header_cssstyles.dropdownitemcontainer}` + ' p-0 '}>
+                                                <div class={`${header_cssstyles.dropdownitemcontainer}` + ' p-0 '}>
                                                     <p
-                                                        className={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
+                                                        class={'dropdownitem d-flex align-items-center justify-content-center m-0 p-0'}
                                                         style={{
                                                             fontSize: sectionproperties.dropdown_fontsize + 'px',
                                                             fontWeight: sectionproperties.dropdown_fontweight,
@@ -617,7 +633,7 @@ const AllinoneHeader = (props) => {
                                                         }}
                                                     >
                                                         <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>
@@ -627,27 +643,17 @@ const AllinoneHeader = (props) => {
                             </div>
                         </div>
                         {sectionproperties.showlowerheadersection == 'Show' && (
-                            <div className="col-lg-12 p-0 mt-2 mb-2">
-                                <div className={header_cssstyles.header_divider}></div>
+                            <div class="col-lg-12 p-0 mt-2 mb-2">
+                                <div class={header_cssstyles.header_divider}></div>
                             </div>
                         )}
                     </div>
                 </div>
                 {sectionproperties.showlowerheadersection == 'Show' && (
-                    <div
-                        className={`${header_cssstyles.navbar_nav} ` + ' col-lg-12 align-items-center '}
-                        style={{
-                            display: sectionproperties.subheaderposition == 'Besides Top Navigation' ? 'block' : 'flex',
-                        }}
-                    >
-                        <div
-                            className="row m-0 w-100 align-items-center"
-                            style={{
-                                display: sectionproperties.subheaderposition == 'Besides Top Navigation' ? 'block' : 'flex',
-                            }}
-                        >
+                    <div class={`${header_cssstyles.navbar_nav} ` + ' col-lg-12 d-flex align-items-center '}>
+                        <div class="row m-0 w-100 d-flex align-items-center">
                             <nav
-                                className={headerstyles.navbar}
+                                class={headerstyles.navbar}
                                 style={{
                                     display: sectionproperties.showhidesubheader == 'Show' && sectionproperties.subheaderposition == 'Besides Top Navigation' ? 'none' : 'flex',
                                 }}
@@ -656,13 +662,9 @@ const AllinoneHeader = (props) => {
                                     {templatepropcontext.pagesnprop.map((item, index) => {
                                         if (item.isnavigation == 1 && item.isactive == 1) {
                                             return (
-                                                <div
-                                                    onClick={() => {
-                                                        history.push(item.navigationroute);
-                                                    }}
-                                                >
+                                                <div to={item.navigationroute}>
                                                     <li
-                                                        className={`${headerstyles.topbar_item_container}`}
+                                                        class={`${headerstyles.topbar_item_container}`}
                                                         style={{
                                                             marginRight: langdetect == 'en' ? '35px' : 0,
                                                             marginLeft: langdetect == 'en' ? 0 : '35px',
@@ -674,7 +676,7 @@ const AllinoneHeader = (props) => {
                                                             templatepropcontext.pagesnprop[index].isselected = true;
                                                         }}
                                                     >
-                                                        <div className={`${headerstyles.topbar_item} ${header_cssstyles.topbar_item}`}>
+                                                        <div class={`${headerstyles.topbar_item} ${header_cssstyles.topbar_item}`}>
                                                             <span>{langdetect == 'en' ? item.pagename : item.pagename_ar}</span>
                                                         </div>
                                                     </li>
@@ -699,7 +701,7 @@ const AllinoneHeader = (props) => {
                         </div>
                     </div>
                 )}
-                <div className="col-lg-12 p-0">
+                <div class="col-lg-12 p-0">
                     {sectionproperties.showhidesubheader == 'Show' && sectionproperties.subheaderposition == 'Full Width' && (
                         <Subheader
                             sectionpropertiesprops={sectionproperties}