From 1b97ca034b29621095ba1d8fdb5b1d191877c2a7 Mon Sep 17 00:00:00 2001
From: Umang Utkarsh <umangutkarsh0024@gmail.com>
Date: Mon, 16 Oct 2023 16:09:08 +0530
Subject: [PATCH 1/3] style-navbar-items-desktop

---
 app/components/menubar/newMenuBar.js | 26 ++++++++++++++------------
 app/styles/Menubar.module.css        | 19 ++++++++++++++++++-
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/app/components/menubar/newMenuBar.js b/app/components/menubar/newMenuBar.js
index fe1d1d63..3d37ab99 100644
--- a/app/components/menubar/newMenuBar.js
+++ b/app/components/menubar/newMenuBar.js
@@ -195,14 +195,16 @@ const DesktopNav = ({ nav_Items, nft, brandInfo }) => {
 
   return (
     <Navbar className='d-none d-lg-flex justify-content-between px-4 py-3'>
-      <BrandLogo
-        brandLink={brandInfo.brandLink}
-        brandLogoSrc={brandInfo.brandLogoSrc}
-        imageTitle={brandInfo.imageTitle}
-        brandName={brandInfo.brandName}
-        height={32}
-        width={132}
-      />
+      <Navbar.Brand href='/' className='navbar-logo'>
+        <BrandLogo
+          brandLink={brandInfo.brandLink}
+          brandLogoSrc={brandInfo.brandLogoSrc}
+          imageTitle={brandInfo.imageTitle}
+          brandName={brandInfo.brandName}
+          height={32}
+          width={132}
+        />
+      </Navbar.Brand>
       <Nav className='w-full ' ref={clickRef}>
         {nav_Items?.map((nav_item, key) =>
           nav_item.sub_menus?.data?.length > 1 ? (
@@ -217,9 +219,9 @@ const DesktopNav = ({ nav_Items, nft, brandInfo }) => {
               }}
               onMouseLeave={() => setIsShown(0)}
             >
-              <span className={`${styles.navbar_item_hover} text-muted`}>
+              <span className={`${styles.navbar_item_hover}`} style={{fontWeight: 'bold'}}>
                 {nav_item.url ? (
-                  <a href={nav_item.url} className='text-decoration-none'>
+                  <a href={nav_item.url} >
                     {nav_item.label}
                   </a>
                 ) : (
@@ -273,9 +275,9 @@ const DesktopNav = ({ nav_Items, nft, brandInfo }) => {
           ) : (
             <Nav.Link
               key={key}
-              className={`${styles.navbar_item_hover} text-muted mx-3`}
+              className={`${styles.navbar_item_hover} mx-3`}
             >
-              {nav_item.label}
+              <span style={{fontWeight: 'bold'}} >{nav_item.label}</span>
             </Nav.Link>
           )
         )}
diff --git a/app/styles/Menubar.module.css b/app/styles/Menubar.module.css
index 53c18884..dedfecad 100644
--- a/app/styles/Menubar.module.css
+++ b/app/styles/Menubar.module.css
@@ -25,6 +25,8 @@
 
 .navbarItem:hover:after {
   width: 100%;
+  font-weight: bold;
+  transform: scale(1.3);
 }
 
 .brand {
@@ -34,6 +36,14 @@
   display: none;
 }
 
+.navbar-logo {
+  border-radius: 30px;
+}
+.navbar-logo:hover {
+  transform: scale(1.3);
+  cursor: pointer;
+}
+
 .chat {
   border-bottom-left-radius: 10px;
   border-top-right-radius: 10px;
@@ -54,6 +64,7 @@
   align-items: center;
   justify-content: center;
   box-shadow: 0 0 0 0;
+  transform: scale(1.3);
 }
 
 .btn-close:focus {
@@ -158,6 +169,9 @@
 .navbar_item_hover:hover {
   cursor: pointer;
   color: red;
+  font-weight: bolder;
+  transition: 0.2s ease-in-out;
+  transform: scale(1.1);
 }
 
 .dropdown {
@@ -180,6 +194,7 @@
 .elipses {
   color: #87898d;
   text-decoration-line: none !important;
+  transform: scale(1.3);
 }
 
 .dropdown_menu {
@@ -194,10 +209,12 @@
 .dropdown_menu_item:hover,
 .dropdown_menu_item {
   color: black;
-  text-decoration: none;
+  text-decoration: solid;
+  transform: scale(1.3);
 }
 
 .nft_pfp {
   width: 50px;
   overflow: hidden;
 }
+

From 898204442138f2d33018900dd79e192843eb80cf Mon Sep 17 00:00:00 2001
From: Umang Utkarsh <umangutkarsh0024@gmail.com>
Date: Mon, 16 Oct 2023 17:43:30 +0530
Subject: [PATCH 2/3] desktop-navItem-dropdown

---
 .vscode/settings.json                |   9 +--
 app/components/menubar/newMenuBar.js | 114 ++++++++++++++++-----------
 app/styles/Menubar.module.css        |  14 +++-
 3 files changed, 82 insertions(+), 55 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index d3381123..4bbfb0bf 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,4 @@
 {
-    "eslint.workingDirectories": [
-        "./app",
-        "./cms"
-    ],
-    "workbench.startupEditor": "none",
-}
\ No newline at end of file
+  "eslint.workingDirectories": ["./app", "./cms"],
+  "workbench.startupEditor": "none"
+}
diff --git a/app/components/menubar/newMenuBar.js b/app/components/menubar/newMenuBar.js
index 3d37ab99..ed2f642e 100644
--- a/app/components/menubar/newMenuBar.js
+++ b/app/components/menubar/newMenuBar.js
@@ -16,7 +16,11 @@ const ArrowIcon = () => {
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
     >
-      <path d='M1.5 1.5L15.5 15.5L31 1.5' stroke='black' strokeWidth='2' />
+      <path
+        d='M1.5 1.5L15.5 15.5L31 1.5'
+        stroke='black'
+        strokeWidth='2'
+      />
     </svg>
   );
 };
@@ -26,7 +30,10 @@ const MobileNav = ({ nav_Items, nft, brandInfo }) => {
   const { user, handleLogin, handleLogout, handleResend, isModalOpen, setIsModalOpen, method } =
     useRCAuth4Google();
   return (
-    <Navbar className='d-lg-none' expand={false}>
+    <Navbar
+      className='d-lg-none'
+      expand={false}
+    >
       <Container fluid>
         <Navbar.Toggle
           aria-controls='offcanvasNavbar'
@@ -157,7 +164,9 @@ const MobileNav = ({ nav_Items, nft, brandInfo }) => {
           </Offcanvas.Body>
         </Navbar.Offcanvas>
         <Navbar.Brand className={styles.brand}>
-          {nft ? <NFTProfilePicture id='img2' /> :
+          {nft ? (
+            <NFTProfilePicture id='img2' />
+          ) : (
             <RCAuthGoogleLoginButton
               user={user}
               handleLogin={handleLogin}
@@ -166,7 +175,8 @@ const MobileNav = ({ nav_Items, nft, brandInfo }) => {
               isModalOpen={isModalOpen}
               setIsModalOpen={setIsModalOpen}
               method={method}
-            />}
+            />
+          )}
         </Navbar.Brand>
       </Container>
     </Navbar>
@@ -195,7 +205,10 @@ const DesktopNav = ({ nav_Items, nft, brandInfo }) => {
 
   return (
     <Navbar className='d-none d-lg-flex justify-content-between px-4 py-3'>
-      <Navbar.Brand href='/' className='navbar-logo'>
+      <Navbar.Brand
+        href='/'
+        className='navbar-logo'
+      >
         <BrandLogo
           brandLink={brandInfo.brandLink}
           brandLogoSrc={brandInfo.brandLogoSrc}
@@ -205,7 +218,10 @@ const DesktopNav = ({ nav_Items, nft, brandInfo }) => {
           width={132}
         />
       </Navbar.Brand>
-      <Nav className='w-full ' ref={clickRef}>
+      <Nav
+        className='w-full '
+        ref={clickRef}
+      >
         {nav_Items?.map((nav_item, key) =>
           nav_item.sub_menus?.data?.length > 1 ? (
             <span
@@ -219,14 +235,11 @@ const DesktopNav = ({ nav_Items, nft, brandInfo }) => {
               }}
               onMouseLeave={() => setIsShown(0)}
             >
-              <span className={`${styles.navbar_item_hover}`} style={{fontWeight: 'bold'}}>
-                {nav_item.url ? (
-                  <a href={nav_item.url} >
-                    {nav_item.label}
-                  </a>
-                ) : (
-                  nav_item.label
-                )}
+              <span
+                className={`${styles.navbar_item_hover}`}
+                style={{ fontWeight: 'bold' }}
+              >
+                {nav_item.url ? <a href={nav_item.url}>{nav_item.label}</a> : nav_item.label}
               </span>
               {/*submenu container | this will be shown for those whose id is in isShown */}
               <div className={`${styles.navbar_subitems} shadow-lg`}>
@@ -242,30 +255,28 @@ const DesktopNav = ({ nav_Items, nft, brandInfo }) => {
                     {nav_item.sub_menus.data.map(
                       (item) =>
                         item.attributes.parent_id < 1 && (
-                          <div className={`${styles.navbar_subitems_items}`}>
-                            <div>
-                              <a
-                                href={item.attributes.url}
-                                className={styles.subItemLinks}
-                              >
-                                {item.attributes.label}
-                              </a>
+                          <a
+                            href={item.attributes.url}
+                            className={styles.subItemLinks}
+                          >
+                            <div className={`${styles.navbar_subitems_items}`}>
+                              {item.attributes.label}
+                              {/*if submenus contain more sub menus */}
+                              {nav_item.sub_menus.data.map(
+                                (subItem) =>
+                                  subItem.attributes.parent_id === item.attributes.id && (
+                                    <div className='px-4 pt-3 fw-light'>
+                                      <a
+                                        href={subItem.attributes.url}
+                                        className={styles.subItemLinks}
+                                      >
+                                        {subItem.attributes.label}
+                                      </a>
+                                    </div>
+                                  )
+                              )}
                             </div>
-                            {/*if submenus contain more sub menus */}
-                            {nav_item.sub_menus.data.map(
-                              (subItem) =>
-                                subItem.attributes.parent_id === item.attributes.id && (
-                                  <div className='px-4 pt-3 fw-light'>
-                                    <a
-                                      href={subItem.attributes.url}
-                                      className={styles.subItemLinks}
-                                    >
-                                      {subItem.attributes.label}
-                                    </a>
-                                  </div>
-                                )
-                            )}
-                          </div>
+                          </a>
                         )
                     )}
                   </div>
@@ -277,13 +288,13 @@ const DesktopNav = ({ nav_Items, nft, brandInfo }) => {
               key={key}
               className={`${styles.navbar_item_hover} mx-3`}
             >
-              <span style={{fontWeight: 'bold'}} >{nav_item.label}</span>
+              <span style={{ fontWeight: 'bold' }}>{nav_item.label}</span>
             </Nav.Link>
           )
         )}
       </Nav>
 
-      <div className={styles["clickToChat_button"]}>
+      <div className={styles['clickToChat_button']}>
         {user._id && (
           <RocketChatLinkButton
             className={`bg-danger bg-gradient p-2 text-white ${styles.chat}`}
@@ -294,9 +305,11 @@ const DesktopNav = ({ nav_Items, nft, brandInfo }) => {
           </RocketChatLinkButton>
         )}
       </div>
-      
+
       <div>
-        {nft ? <NFTProfilePicture id='img1' /> :
+        {nft ? (
+          <NFTProfilePicture id='img1' />
+        ) : (
           <RCAuthGoogleLoginButton
             user={user}
             handleLogin={handleLogin}
@@ -305,18 +318,27 @@ const DesktopNav = ({ nav_Items, nft, brandInfo }) => {
             isModalOpen={isModalOpen}
             setIsModalOpen={setIsModalOpen}
             method={method}
-          />}
+          />
+        )}
       </div>
-    </Navbar >
+    </Navbar>
   );
 };
 
 export default function NewMenubar(props) {
-  let pfpIsNFT = false
+  let pfpIsNFT = false;
   return (
     <Container fluid>
-      <MobileNav nav_Items={props.menu?.data?.attributes?.body} nft={pfpIsNFT} brandInfo={props.brandInfo} />
-      <DesktopNav nav_Items={props.menu?.data?.attributes?.body} nft={pfpIsNFT} brandInfo={props.brandInfo} />
+      <MobileNav
+        nav_Items={props.menu?.data?.attributes?.body}
+        nft={pfpIsNFT}
+        brandInfo={props.brandInfo}
+      />
+      <DesktopNav
+        nav_Items={props.menu?.data?.attributes?.body}
+        nft={pfpIsNFT}
+        brandInfo={props.brandInfo}
+      />
     </Container>
   );
 }
diff --git a/app/styles/Menubar.module.css b/app/styles/Menubar.module.css
index dedfecad..c5f097d0 100644
--- a/app/styles/Menubar.module.css
+++ b/app/styles/Menubar.module.css
@@ -144,7 +144,16 @@
 
 .navbar_subitems_items {
   padding: 1rem 1rem 1rem 2rem;
-  width: 18rem;
+  width: 15rem;
+}
+
+.navbar_subitems_items:hover {
+  color: #ff5050;
+  background-color: #f0f2f5;
+  padding: 1rem 1rem 1rem 2rem;
+  width: 15rem;
+  font-weight: bold;
+  transition: 0.15s;
 }
 
 .subItemLinks {
@@ -170,7 +179,7 @@
   cursor: pointer;
   color: red;
   font-weight: bolder;
-  transition: 0.2s ease-in-out;
+  transition: 0.3s ease-in-out;
   transform: scale(1.1);
 }
 
@@ -217,4 +226,3 @@
   width: 50px;
   overflow: hidden;
 }
-

From 8cc0d776995f4d73bfae5c6e62a818389cc80f12 Mon Sep 17 00:00:00 2001
From: Umang Utkarsh <umangutkarsh0024@gmail.com>
Date: Mon, 16 Oct 2023 19:33:46 +0530
Subject: [PATCH 3/3] navBar-items-mobile

---
 app/components/menubar/newMenuBar.js | 79 +++++++++++++---------------
 app/styles/Menubar.module.css        | 51 +++++++++++++++---
 2 files changed, 82 insertions(+), 48 deletions(-)

diff --git a/app/components/menubar/newMenuBar.js b/app/components/menubar/newMenuBar.js
index ed2f642e..28ce249f 100644
--- a/app/components/menubar/newMenuBar.js
+++ b/app/components/menubar/newMenuBar.js
@@ -55,7 +55,8 @@ const MobileNav = ({ nav_Items, nft, brandInfo }) => {
           <Offcanvas.Header closeButton>
             <Navbar.Brand
               href='/'
-              className='d-flex justify-content-center align-items-center '
+              className={`d-flex justify-content-center align-items-center ${styles.navbarLogo}`}
+              style={{ paddingTop: '0.5rem' }}
             >
               <BrandLogo
                 brandLink={brandInfo.brandLink}
@@ -70,23 +71,21 @@ const MobileNav = ({ nav_Items, nft, brandInfo }) => {
           <Offcanvas.Body>
             {nav_Items?.map((nav_Item) =>
               nav_Item.url ? (
-                <div key={nav_Item.id}>
-                  <Row
-                    className={`${styles.dropdown} d-flex flex-row justify-content-between align-items-center mt-3 `}
-                    onClick={() => {
-                      setDropDown({ show: false, _id: 0 });
-                    }}
-                  >
-                    <Col>
-                      <a
-                        href={nav_Item.url}
-                        className='text-decoration-none fs-4 fw-light text-dark'
-                      >
-                        {nav_Item.label}
-                      </a>
-                    </Col>
-                  </Row>
-                </div>
+                <a
+                  href={nav_Item.url}
+                  className='text-decoration-none fs-4 fw-light text-dark'
+                >
+                  <div key={nav_Item.id}>
+                    <Row
+                      className={`${styles.dropdown} d-flex flex-row justify-content-between align-items-center mt-3 `}
+                      onClick={() => {
+                        setDropDown({ show: false, _id: 0 });
+                      }}
+                    >
+                      <Col>{nav_Item.label}</Col>
+                    </Row>
+                  </div>
+                </a>
               ) : (
                 <div key={nav_Item.id}>
                   <Row
@@ -110,44 +109,40 @@ const MobileNav = ({ nav_Items, nft, brandInfo }) => {
                     </Col>
                     <Col>
                       {nav_Item.sub_menus?.data?.length > 1 && (
-                        <span
-                          className={
-                            dropDown.show
-                              ? `${styles.arrowRotate} bg-transparent me-2`
-                              : `${styles.arrow} bg-transparent me-2 `
-                          }
+                        <div
+                          className={dropDown.show ? `${styles.arrowRotate}` : `${styles.arrow}`}
                         >
                           <ArrowIcon />
-                        </span>
+                        </div>
                       )}
                     </Col>
                   </Row>
                   {dropDown._id === nav_Item.id && dropDown.show ? (
                     <div>
-                      <div>
+                      <div className={`${styles.dropDown}`}>
                         {nav_Item.sub_menus.data.map(
                           (item) =>
                             item.attributes.parent_id === null && (
                               <>
-                                <div className='p-2 fw-medium'>
-                                  <a
-                                    href={item.attributes.url}
-                                    className={styles.subItemLinks}
-                                  >
-                                    {item.attributes.label}
-                                  </a>
-                                </div>
+                                <a
+                                  href={item.attributes.url}
+                                  className={styles.subItemLinks}
+                                >
+                                  <div className='p-2 fw-medium'>{item.attributes.label}</div>
+                                </a>
+
+                                {/* If more sub-items are present */}
                                 {nav_Item.sub_menus.data.map(
                                   (subItem) =>
                                     subItem.attributes.parent_id === item.attributes.id && (
-                                      <div className='px-4 py-1 fw-light'>
-                                        <a
-                                          href={subItem.attributes.url}
-                                          className={styles.subItemLinks}
-                                        >
+                                      <a
+                                        href={subItem.attributes.url}
+                                        className={styles.subItemLinks}
+                                      >
+                                        <div className='px-4 py-1 fw-light'>
                                           {subItem.attributes.label}
-                                        </a>
-                                      </div>
+                                        </div>
+                                      </a>
                                     )
                                 )}
                               </>
@@ -207,7 +202,7 @@ const DesktopNav = ({ nav_Items, nft, brandInfo }) => {
     <Navbar className='d-none d-lg-flex justify-content-between px-4 py-3'>
       <Navbar.Brand
         href='/'
-        className='navbar-logo'
+        className={`${styles.navbarLogo}`}
       >
         <BrandLogo
           brandLink={brandInfo.brandLink}
diff --git a/app/styles/Menubar.module.css b/app/styles/Menubar.module.css
index c5f097d0..5553358d 100644
--- a/app/styles/Menubar.module.css
+++ b/app/styles/Menubar.module.css
@@ -36,12 +36,14 @@
   display: none;
 }
 
-.navbar-logo {
-  border-radius: 30px;
+.navbarLogo {
+  /* padding-left: 1rem; */
+  transition: 0.2s ease-in-out;
 }
-.navbar-logo:hover {
-  transform: scale(1.3);
+.navbarLogo:hover {
+  transform: scale(1.15);
   cursor: pointer;
+  transition: 0.2s ease-in-out;
 }
 
 .chat {
@@ -160,7 +162,16 @@
   cursor: pointer;
 
   text-decoration: none;
-  color: black;
+  color: #858585;
+}
+
+.subItemLinks:hover {
+  cursor: pointer;
+  transition: 0.1s ease-in-out;
+  font-weight: bold;
+  color: #ff5050;
+  background-color: #f0f2f5;
+  text-decoration: none;
 }
 
 .color {
@@ -171,10 +182,22 @@
   margin-left: 80%;
 }
 
+.arrow:hover {
+  margin-left: 80%;
+  font-weight: bold;
+}
+
 .arrowRotate {
   margin-left: 80%;
   transform: rotate(180deg);
 }
+
+.arrowRotate:hover {
+  margin-left: 80%;
+  transform: rotate(180deg);
+  font-weight: bold;
+}
+
 .navbar_item_hover:hover {
   cursor: pointer;
   color: red;
@@ -185,6 +208,18 @@
 
 .dropdown {
   cursor: pointer;
+  /* font-weight: bold; */
+}
+
+.dropdown:hover {
+  cursor: pointer;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+
+  font-weight: bold;
+  color: #ff5050;
+  background-color: #f0f2f5;
+  transition: 0.15s ease-in-out;
 }
 
 .toggler_bar::before {
@@ -215,10 +250,14 @@
   border: 1px solid black;
 }
 
-.dropdown_menu_item:hover,
 .dropdown_menu_item {
   color: black;
   text-decoration: solid;
+}
+
+.dropdown_menu_item:hover {
+  color: black;
+  text-decoration: solid;
   transform: scale(1.3);
 }