tabexseriescomponents 0.0.71 → 0.0.74

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

@@ -1,5 +1,11 @@
 import React, { useEffect, useState, useContext } from 'react';
+// import { useHistory, Link } from 'react-router-dom';
+// import '../../Generalfiles/CSS_GENERAL/dropdown.css';
 import headerstyles from '../../../styles/headers//headerstyles.module.css';
+// import { LanguageContext } from '../../../LanguageContext';
+// import { FetchingContext } from '../../../FetchingContext';
+// import { TemplateRoutingContext } from '../../../TemplateRoutingContext';
+// import { WebsiteDesignWorkPlaceContext } from '../../../../WebsiteDesignWorkPlaceContext';
 import { css } from 'glamor';
 import Dropdown from 'react-bootstrap/Dropdown';
 import { MdOutlinePolicy, MdOutlineShoppingCart, MdKeyboardArrowDown } from 'react-icons/md';
@@ -270,23 +276,23 @@ const ClassicHeader = (props) => {
     };
     return (
         <div
-            className={+' row m-0 w-100 d-flex justify-content-center '}
+            class={+' row m-0 w-100 d-flex justify-content-center '}
             style={{
                 width: '100vw',
             }}
         >
             <div
-                className={`${headerstyles.headercontainer}` + ' col-lg-12 p-0 d-md-none '}
+                class={`${headerstyles.headercontainer}` + ' col-lg-12 p-0 d-md-none '}
                 style={{
                     position: sectionproperties.headerstyles_position,
                 }}
             >
-                <div className="row m-0 w-100">
-                    <div className={`${header_cssstyles.upperHeaderSection}` + ' col-lg-12 d-flex align-items-center '}>
-                        <div className="row m-0 w-100 d-flex align-items-center">
-                            <div className="col-lg-4 d-flex justify-content-start">
+                <div class="row m-0 w-100">
+                    <div class={`${header_cssstyles.upperHeaderSection}` + ' col-lg-12 d-flex align-items-center '}>
+                        <div class="row m-0 w-100 d-flex align-items-center">
+                            <div class="col-lg-4 d-flex justify-content-start">
                                 <div
-                                    className={`${header_cssstyles.header_logo}`}
+                                    class={`${header_cssstyles.header_logo}`}
                                     style={{ cursor: 'pointer' }}
                                     onClick={() => {
                                         routingcountext('home');
@@ -304,20 +310,20 @@ const ClassicHeader = (props) => {
                                     />
                                 </div>
                             </div>
-                            <div className="col-lg-8 d-flex justify-content-end align-items-center">
+                            <div class="col-lg-8 d-flex justify-content-end align-items-center">
                                 <div
-                                    className={header_cssstyles.searchbarcont}
+                                    class={header_cssstyles.searchbarcont}
                                     style={{ position: 'relative', marginRight: langdetect == 'en' ? '1.9rem' : '', marginLeft: langdetect == 'ar' ? '1.9rem' : '' }}
                                 >
                                     <input
                                         type="text"
                                         placeholder={lang.searchproducts}
-                                        className={`${header_cssstyles.searchbarcont_input}`}
+                                        class={`${header_cssstyles.searchbarcont_input}`}
                                         onChange={(event) => {
                                             setSearchHeaderInputContext(event.target.value);
                                         }}
                                     />
-                                    <div className={` ${header_cssstyles.searchbar_icon_cont}` + ' d-flex align-items-center justify-content-center '}>
+                                    <div class={` ${header_cssstyles.searchbar_icon_cont}` + ' d-flex align-items-center justify-content-center '}>
                                         <BsSearch color={sectionproperties.searchbaricon_color} size={sectionproperties.searchbaricon_fontsize} />
                                     </div>
                                     <Searchlist actions={actions} sectionpropertiesprops={sectionproperties} srcfromprops={'headerfullwidth'} />
@@ -330,12 +336,12 @@ const ClassicHeader = (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.userBtniconfontsize} />
                                                 </i>
                                                 <p
-                                                    className="mb-0 p-0"
+                                                    class="mb-0 p-0"
                                                     style={{
                                                         marginLeft: langdetect == 'en' ? '8px' : 0,
                                                         marginRight: langdetect == 'ar' ? '8px' : 0,
@@ -346,20 +352,20 @@ const ClassicHeader = (props) => {
                                             </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',
@@ -370,7 +376,7 @@ const ClassicHeader = (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>
                                         )}
@@ -382,9 +388,9 @@ const ClassicHeader = (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>
@@ -395,10 +401,10 @@ const ClassicHeader = (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>
@@ -411,16 +417,16 @@ const ClassicHeader = (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>
@@ -429,12 +435,12 @@ const ClassicHeader = (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>
@@ -443,11 +449,11 @@ const ClassicHeader = (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>
@@ -456,18 +462,18 @@ const ClassicHeader = (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>
                                     )}
                                 </Dropdown>
                                 <div
-                                    className={header_cssstyles.cartbtncontainer + ' d-flex flex-row align-items-center justify-content-end '}
+                                    class={header_cssstyles.cartbtncontainer + ' d-flex flex-row align-items-center justify-content-end '}
                                     style={{
                                         marginRight: langdetect == 'en' ? '2.2rem' : '',
                                         marginLeft: langdetect == 'ar' ? '2.2rem' : '',
@@ -476,7 +482,7 @@ const ClassicHeader = (props) => {
                                         setsidecartnavshowcontext(true);
                                     }}
                                 >
-                                    <div className={`${header_cssstyles.cartbtnicon}` + ' allcentered cartbtnicon '} style={{ position: 'relative' }}>
+                                    <div class={`${header_cssstyles.cartbtnicon}` + ' allcentered cartbtnicon '} 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} />}
@@ -484,7 +490,7 @@ const ClassicHeader = (props) => {
                                         {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}`}
+                                            class={`${header_cssstyles.badge_counter_header_notifications}`}
                                             style={{
                                                 top: sectionproperties.cartbadgetop + 'px',
                                                 right: sectionproperties.cartbadgeright + 'px',
@@ -494,7 +500,7 @@ const ClassicHeader = (props) => {
                                         </div>
                                     </div>
                                     <p
-                                        className={header_cssstyles.cartbtntext + ' mb-0 p-0 cartbtnicon '}
+                                        class={header_cssstyles.cartbtntext + ' mb-0 p-0 cartbtnicon '}
                                         style={{
                                             marginLeft: langdetect == 'en' ? '9px' : 0,
                                             marginRight: langdetect == 'ar' ? '9px' : 0,
@@ -504,7 +510,7 @@ const ClassicHeader = (props) => {
                                     </p>
                                 </div>
                                 <div
-                                    className={`${header_cssstyles.wishlist_btn}` + ' wishlist_btn d-flex justify-content-center align-items-center  '}
+                                    class={`${header_cssstyles.wishlist_btn}` + ' wishlist_btn d-flex justify-content-center align-items-center  '}
                                     style={{
                                         marginRight: langdetect == 'en' ? '2.2rem' : '',
                                         marginLeft: langdetect == 'ar' ? '2.2rem' : '',
@@ -518,16 +524,16 @@ const ClassicHeader = (props) => {
                                             position: 'relative',
                                         }}
                                     >
-                                        <i className={header_cssstyles.favbtnicon + ' wishlist_btn h-100 d-flex align-items-center '}>
+                                        <i class={header_cssstyles.favbtnicon + ' wishlist_btn h-100 d-flex align-items-center '}>
                                             {sectionproperties.faviconshape == 'Heart Shape' && <FaRegHeart />}
                                             {sectionproperties.faviconshape == 'Star Shape' && <AiOutlineStar />}
                                         </i>
-                                        <div className={` ${header_cssstyles.badge_counter_header_notifications} ${header_cssstyles.wishlistbadge}` + ' d-flex justify-content-center text-center '}>
+                                        <div class={` ${header_cssstyles.badge_counter_header_notifications} ${header_cssstyles.wishlistbadge}` + ' d-flex justify-content-center text-center '}>
                                             <span> {favoriteprojectscountContext.length >= 10 ? '+9' : favoriteprojectscountContext.length}</span>
                                         </div>
                                     </div>
                                     <span
-                                        className="mb-0 p-0"
+                                        class="mb-0 p-0"
                                         style={{
                                             marginLeft: langdetect == 'en' ? '8px' : 0,
                                             marginRight: langdetect == 'ar' ? '8px' : 0,
@@ -536,20 +542,20 @@ const ClassicHeader = (props) => {
                                         {lang.wishlist}
                                     </span>
                                 </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 '}>
+                                                    <div class={`${header_cssstyles.languagecontainer}` + ' row m-0 w-100 d-flex align-items-center '}>
                                                         <img src={usflag} style={{ maxWidth: '2.2vh', maxHeight: '2.2vh' }} />
-                                                        <MdKeyboardArrowDown className="ml-2 mr-2" size={sectionproperties.language_container_fontsize} />
+                                                        <MdKeyboardArrowDown class="ml-2 mr-2" size={sectionproperties.language_container_fontsize} />
                                                     </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={egyptflag} style={{ maxWidth: '2.2vh', maxHeight: '2.2vh' }} />
-                                                        <MdKeyboardArrowDown className="ml-2 mr-2" size={sectionproperties.language_container_fontsize} />
+                                                        <MdKeyboardArrowDown class="ml-2 mr-2" size={sectionproperties.language_container_fontsize} />
                                                     </div>
                                                 )}
                                             </li>
@@ -560,9 +566,9 @@ const ClassicHeader = (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,
@@ -570,7 +576,7 @@ const ClassicHeader = (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>
@@ -580,9 +586,9 @@ const ClassicHeader = (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,
@@ -590,7 +596,7 @@ const ClassicHeader = (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>
@@ -600,13 +606,13 @@ const ClassicHeader = (props) => {
                             </div>
                         </div>
                     </div>
-                    <div className="col-lg-12 allcentered p-0">
+                    <div class="col-lg-12 allcentered p-0">
                         <div
                             style={{ background: sectionproperties.upperseparatorbgcolor, height: sectionproperties.upperseparatorheight + 'px', width: sectionproperties.upperseparatorwidth + '%' }}
                         />
                     </div>
                     <div
-                        className={header_cssstyles.lowerHeaderSection + ' col-lg-12 '}
+                        class={header_cssstyles.lowerHeaderSection + ' col-lg-12 '}
                         style={
                             {
                                 // display: sectionproperties.showhidesubheader == 'Show' && sectionproperties.subheaderposition == 'Besides Top Navigation' ? 'none' : 'flex',
@@ -614,7 +620,7 @@ const ClassicHeader = (props) => {
                         }
                     >
                         <nav
-                            className={headerstyles.navbar}
+                            class={headerstyles.navbar}
                             style={{
                                 display: sectionproperties.showhidesubheader == 'Show' && sectionproperties.subheaderposition == 'Besides Top Navigation' ? 'none' : 'flex',
                             }}
@@ -635,7 +641,7 @@ const ClassicHeader = (props) => {
                                                     templatepropcontext.pagesnprop[index].isselected = true;
                                                 }}
                                             >
-                                                <a href={item.navigationroute} className={`${header_cssstyles.navbar_item_text}` + ' navbar_item_text '}>
+                                                <a href={item.navigationroute} class={`${header_cssstyles.navbar_item_text}` + ' navbar_item_text '}>
                                                     {langdetect == 'en' ? item.pagename : item.pagename_ar}
                                                 </a>
                                             </li>
@@ -657,7 +663,7 @@ const ClassicHeader = (props) => {
                             />
                         )}
                     </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}