From c63683b25759dec4003f16731179ccb32a88710e Mon Sep 17 00:00:00 2001
From: Aashray Katiyar <aashray446@gmail.com>
Date: Wed, 18 Jan 2023 18:31:28 +0530
Subject: [PATCH] [NEW] : backport improve navbar #73

---
 app/components/conferences/EventAdmin.js |   8 +-
 app/components/menubar/newMenuBar.js     | 350 +++++++++++++++++++++++
 app/styles/Menubar.module.css            | 116 ++++++--
 3 files changed, 444 insertions(+), 30 deletions(-)
 create mode 100644 app/components/menubar/newMenuBar.js

diff --git a/app/components/conferences/EventAdmin.js b/app/components/conferences/EventAdmin.js
index 2685c83f..23d92d73 100644
--- a/app/components/conferences/EventAdmin.js
+++ b/app/components/conferences/EventAdmin.js
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import NewMenubar from "../menubar/newMenuBar";
 import Menubar from "../menubar";
 import _ from "lodash";
 import Cookies from "js-cookie";
@@ -52,15 +53,18 @@ export const VerifyUserRole = ({ menuprops }) => {
       "An error ocurred while getting user details on Superprofile",
       error
     );
+    throw new Error(`An error ocurred while getting user details on Superprofile: ${error?.response?.data?.errors?.[0]?.detail}`);
   }
 
   return (
     <>
       {abortAdmin()}
       {verified ? (
-        <Menubar menu={menuprops.menu.topNavItems} />
+        // <Menubar menu={menuprops.menu.topNavItems} />
+        <NewMenubar menu={menuprops.menu.topNavItems} />
       ) : (
-        <Menubar menu={menuCache.menu.topNavItems} />
+        // <Menubar menu={menuCache.menu.topNavItems} />
+        <NewMenubar menu={menuCache.menu.topNavItems} />
       )}
     </>
   );
diff --git a/app/components/menubar/newMenuBar.js b/app/components/menubar/newMenuBar.js
new file mode 100644
index 00000000..adefef8b
--- /dev/null
+++ b/app/components/menubar/newMenuBar.js
@@ -0,0 +1,350 @@
+import { useEffect, useRef, useState, forwardRef } from 'react';
+import { Navbar, Nav, Container, Col, Row, Offcanvas, Dropdown } from 'react-bootstrap';
+import styles from '../../styles/Menubar.module.css';
+import BrandLogo from "../brandlogo";
+import RocketChatLinkButton from "../rocketchatlinkbutton";
+import Cookies from "js-cookie";
+import Link from "next/link";
+import { DummyLoginButton } from "../auth/dummy";
+import RCGoogleLoginButton from "../auth/goauth/ui/GoogleRCLogin";
+
+const userCookie = Cookies.get("user");
+const isUserLoggedIn = Cookies.get("hashmail") ? true : false;
+const hasAllRequiredCreds =
+  process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID &&
+  process.env.NEXT_PUBLIC_RC_URL;
+
+const CustomToggle = forwardRef(({ children, onClick }, ref) => (
+  <a
+    className={styles.elipses}
+    href=""
+    ref={ref}
+    onClick={(e) => {
+      e.preventDefault();
+      onClick(e);
+    }}
+  >
+    {children}
+    <span className={styles.threedots} />
+  </a>
+));
+
+if (!hasAllRequiredCreds) console.log("RC4Community is now using a dummy Auth Component! If you wish to use a robust Auth component, provide all the credentials first (https://github.com/RocketChat/RC4Community/tree/master/app/components/auth)")
+
+
+const ArrowIcon = () => {
+  return (
+    <svg
+      width='14'
+      height='15'
+      viewBox='0 0 32 17'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path d='M1.5 1.5L15.5 15.5L31 1.5' stroke='black' strokeWidth='2' />
+    </svg>
+  );
+};
+
+const MobileNav = ({ nav_Items }) => {
+  const [dropDown, setDropDown] = useState({ show: false, _id: 0 });
+  return (
+    <Navbar className='d-lg-none' expand={false}>
+      <Container fluid>
+        <Navbar.Toggle
+          aria-controls='offcanvasNavbar'
+          className={styles.default_toggler}
+        >
+          <div
+            className={`${styles.navbar_toggler} navbar-toggler collapsed d-flex d-lg-none flex-column justify-content-around bg-white`}
+            type='button'
+          >
+            <span className={`${styles.toggler_icon} mb-2`}></span>
+            <span className={`${styles.toggler_icon} mt-2`}></span>
+          </div>
+        </Navbar.Toggle>
+        <Navbar.Offcanvas
+          id='offcanvasNavbar'
+          aria-labelledby='offcanvasNavbarLabel'
+          placement='start'
+        >
+          <Offcanvas.Header closeButton>
+            <Navbar.Brand
+              href='/'
+              className='d-flex justify-content-center align-items-center '
+            >
+              <BrandLogo
+                logoLink={
+                  "https://global-uploads.webflow.com/611a19b9853b7414a0f6b3f6/611bbb87319adfd903b90f24_logoRC.svg"
+                }
+                imageTitle={"Rocket.Chat"}
+                brandName={"Rocket.Chat Community"}
+                height={30}
+                width={132}
+              />
+            </Navbar.Brand>
+          </Offcanvas.Header>
+          <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>
+              ) : (
+                <div key={nav_Item.id}>
+                  <Row
+                    className={`${styles.dropdown} d-flex flex-row justify-content-between align-items-center mt-3 `}
+                    onClick={() => {
+                      if (dropDown._id === nav_Item.id) {
+                        setDropDown({ show: false, _id: 0 });
+                      } else {
+                        setDropDown({ show: true, _id: nav_Item.id });
+                      }
+                    }}
+                  >
+                    <Col
+                      className={
+                        dropDown._id === nav_Item.id && dropDown.show
+                          ? `${styles.color} fs-4 fw-light`
+                          : 'fs-4 fw-light'
+                      }
+                    >
+                      {nav_Item.label}
+                    </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 `
+                          }
+                        >
+                          <ArrowIcon />
+                        </span>
+                      )}
+                    </Col>
+                  </Row>
+                  {dropDown._id === nav_Item.id && dropDown.show ? (
+                    <div>
+                      <div>
+                        {nav_Item.sub_menus.data.map(
+                          (item, key) =>
+                          (
+                            <>
+                              <div key={key} className={'p-2 fw-medium' + ` ${item.attributes.style === 'disable' ? styles.disabled : ''}`}>
+                                <a
+                                  href={item.attributes.url}
+                                  className={styles.subItemLinks}
+                                >
+                                  {item.attributes.label}
+                                </a>
+                              </div>
+                              {nav_Item.attributes?.parent_id && nav_Item.sub_menus.data.map(
+                                (subItem, key) =>
+                                  subItem.attributes.parent_id === item.attributes.id && (
+                                    <div className='px-4 py-1 fw-light'>
+                                      <a
+                                        key={key}
+                                        href={subItem.attributes.url}
+                                        className={styles.subItemLinks}
+                                      >
+                                        {subItem.attributes.label}
+                                      </a>
+                                    </div>
+                                  )
+                              )}
+                            </>
+                          )
+                        )}
+                      </div>
+                    </div>
+                  ) : (
+                    ''
+                  )}
+                </div>
+              )
+            )}
+          </Offcanvas.Body>
+        </Navbar.Offcanvas>
+        <SidebarItem />
+      </Container>
+    </Navbar>
+  );
+};
+
+const DesktopNav = ({ nav_Items }) => {
+
+  const [isShown, setIsShown] = useState(0);
+  const clickRef = useRef(null);
+
+  const handleClickOutside = (event) => {
+    if (clickRef.current && !clickRef.current.contains(event.target)) {
+      setIsShown(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, []);
+
+  return (
+    <Navbar className='d-none d-lg-flex justify-content-between px-4 py-3'>
+      <BrandLogo
+        logoLink={
+          "https://global-uploads.webflow.com/611a19b9853b7414a0f6b3f6/611bbb87319adfd903b90f24_logoRC.svg"
+        }
+        imageTitle={"Rocket.Chat"}
+        brandName={"Rocket.Chat Community"}
+        height={21}
+        width={124}
+      />
+      <Nav className='w-full ' ref={clickRef}>
+        {nav_Items?.map((nav_item, key) =>
+          nav_item.sub_menus?.data?.length > 1 ? (
+            <span
+              key={key}
+              className='p-2 d-flex flex-column mx-3 '
+              onMouseEnter={() => {
+                setIsShown(nav_item.id);
+              }}
+              onTouchStart={() => {
+                setIsShown(nav_item.id);
+              }}
+              onMouseLeave={() => setIsShown(0)}
+            >
+              <span className={`${styles.navbar_item_hover} text-muted`}>
+                {nav_item.url ? (
+                  <a href={nav_item.url} className='text-decoration-none'>
+                    {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`}>
+                {isShown === nav_item.id && (
+                  <div
+                    className={
+                      nav_item.sub_menus.data?.length > 10
+                        ? 'd-flex flex-row '
+                        : 'd-flex flex-column '
+                    }
+                  >
+                    {/* iterate over sub menus like omnichannels, devops, GSoC, GSoD */}
+                    {nav_item.sub_menus.data.map(
+                      (item, key) =>
+                      (
+                        <div className={`${styles.navbar_subitems_items} `} key={key}>
+                          <div className={item.attributes.style === 'disable' ? styles.disabled : ''}>
+                            <a
+                              href={item.attributes.url}
+                              className={styles.subItemLinks}
+                            >
+                              {item.attributes.label}
+                            </a>
+                          </div>
+                          {/*if submenus contain more sub menus */}
+                          {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>
+                      )
+                    )}
+                  </div>
+                )}
+              </div>
+            </span>
+          ) : (
+            <Nav.Link
+              key={key}
+              className={`${styles.navbar_item_hover} text-muted mx-3`}
+            >
+              {nav_item.label}
+            </Nav.Link>
+          )
+        )}
+      </Nav>
+
+      <SidebarItem />
+    </Navbar >
+  );
+};
+
+const SidebarItem = () => {
+  return (
+
+    <div className="d-inline-flex">
+
+      <>
+        {isUserLoggedIn && (
+          <RocketChatLinkButton
+            className={`bg-danger bg-gradient p-2 text-white ${styles.chat}`}
+          >
+            Click to Chat
+          </RocketChatLinkButton>
+        )}
+        {userCookie && (
+          <div className="mx-3">
+            <Dropdown align="end" className={styles.dropdown_menu}>
+              <Dropdown.Toggle as={CustomToggle} />
+              <Dropdown.Menu size="sm" title="">
+                <Dropdown.Header>RC4Community Profile</Dropdown.Header>
+                <Dropdown.Item>
+                  <Link href={`/profile/${userCookie}`}>
+                    <a className={styles.dropdown_menu_item}>Profile</a>
+                  </Link>
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </div>
+        )}
+      </>
+
+      <div className="mx-2">
+        {hasAllRequiredCreds ? (
+          <RCGoogleLoginButton />
+        ) : (
+          <DummyLoginButton />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function NewMenubar(props) {
+  return (
+    <Container fluid>
+      <MobileNav nav_Items={props.menu?.data?.attributes?.body} />
+      <DesktopNav nav_Items={props.menu?.data?.attributes?.body} />
+    </Container>
+  );
+}
diff --git a/app/styles/Menubar.module.css b/app/styles/Menubar.module.css
index 1b06045e..e657cd86 100644
--- a/app/styles/Menubar.module.css
+++ b/app/styles/Menubar.module.css
@@ -5,6 +5,11 @@
   display: none !important;
 }
 
+.clickToChat_button {
+  position: absolute;
+  right: 100px;
+}
+
 .navbarItem::after {
   position: absolute;
   bottom: 0;
@@ -22,6 +27,9 @@
   width: 100%;
 }
 
+.brand {
+  margin-right: 0px;
+}
 .my-dropdown-toggle:after {
   display: none;
 }
@@ -36,44 +44,46 @@
 .default_toggler:hover,
 .default_toggler:active,
 .default_toggler:focus {
-  border: 0;
+  outline: 0px solid white;
+  border-inline: 0px solid white;
+  border: 0px solid white;
+  border-color: white;
   width: 20px;
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
+  box-shadow: 0 0 0 0;
+}
+
+.btn-close:focus {
+  box-shadow: 0 0 0 0rem rgba(255, 255, 255, 0);
+  border: 0px solid white;
+  outline: 0px solid white;
 }
 
 .navbar_toggler {
-  width: 30px;
+  width: 33px;
   height: 20px;
   position: relative;
   transition: 0.5s ease-in-out;
+  border: 0px;
 }
 
-.navbar_toggler,
-.navbar_toggler:focus,
-.navbar_toggler:active,
-.toggler_icon:focus {
-  outline: none;
-  box-shadow: none;
-  border: 0;
+.navbar-light .navbar_toggler {
+  border: 0px;
 }
 
 .toggler_icon {
-  margin: 0;
-  padding: 0;
   display: block;
-  position: absolute;
   height: 2px;
   width: 100%;
-  background: rgb(107, 107, 107);
+  background: rgb(62, 62, 62);
   border-radius: 1px;
-  left: 0;
-  top: 18px;
 }
 
-.toggler_icon::before, .toggler_icon::after{
+.toggler_icon::before,
+.toggler_icon::after {
   content: '';
   position: absolute;
   left: 0;
@@ -85,11 +95,11 @@
 }
 
 .toggler_icon::after {
-  top: 10px;
+  top: 3px;
 }
 
-.toggler_icon::before{
-  top: -10px;
+.toggler_icon::before {
+  top: 13px;
 }
 
 /* when navigation is clicked */
@@ -103,29 +113,73 @@
   margin-top: -10px;
 }
 
-.toggler_bar::after{
+.toggler_bar::after {
   transform: rotate(-45deg);
   top: 0;
 }
 
-.toggler_bar::before{
-  transform: rotate(45deg);
-  top: 0
+.rotate {
+  transform: rotate(-180deg);
+  transition: all 0.1s;
+}
+.navbar_subitems {
+  position: absolute;
+  transform: translate(-5rem, 30px);
+  background-color: white;
+  padding: 0rem;
+  max-width: 36rem;
+  z-index: 10;
+}
+
+.navbar_subitems_items {
+  padding: 1rem 1rem 1rem 2rem;
+  width: 18rem;
 }
 
+.subItemLinks {
+  cursor: pointer;
+
+  text-decoration: none;
+  color: black;
+}
+
+.color {
+  color: red;
+}
+
+.arrow {
+  margin-left: 80%;
+}
+
+.arrowRotate {
+  margin-left: 80%;
+  transform: rotate(180deg);
+}
+.navbar_item_hover:hover {
+  cursor: pointer;
+  color: red;
+}
+
+.dropdown {
+  cursor: pointer;
+}
+
+.toggler_bar::before {
+  transform: rotate(45deg);
+  top: 0;
+}
 
 .threedots:after {
-  content: "\2807";
+  content: '\2807';
   font-size: 30px;
   height: 100%;
   padding-left: 7px;
 }
 
 .elipses:hover,
-.elipses { 
-    color: #87898d;
-    text-decoration-line: none !important; 
-   
+.elipses {
+  color: #87898d;
+  text-decoration-line: none !important;
 }
 
 .dropdown_menu {
@@ -141,4 +195,10 @@
 .dropdown_menu_item {
   color: black;
   text-decoration: none;
+}
+
+.disabled {
+  pointer-events: none;
+  cursor: default;
+  opacity: 0.6;
 }
\ No newline at end of file