From 946d89b02ca5af7e20bc1870a7f950605383d0bf Mon Sep 17 00:00:00 2001 From: Aashray Katiyar <69245931+Aashray446@users.noreply.github.com> Date: Tue, 24 Jan 2023 11:55:11 +0530 Subject: [PATCH] [NEW] : backport improve navbar #73 (#88) * [NEW] : backport improve navbar #73 * [FIX] : Mapping and rendering error in nav * : Navbar links visibility * improve color contrast for better acessibility & prettify Co-authored-by: Dnouv --- app/components/conferences/EventAdmin.js | 7 +- app/components/menubar/newMenuBar.js | 357 +++++++++++++++++++++++ app/styles/Menubar.module.css | 139 +++++++-- 3 files changed, 471 insertions(+), 32 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..8426bcf4 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"; @@ -58,9 +59,11 @@ export const VerifyUserRole = ({ menuprops }) => { <> {abortAdmin()} {verified ? ( - + // + ) : ( - + // + )} ); diff --git a/app/components/menubar/newMenuBar.js b/app/components/menubar/newMenuBar.js new file mode 100644 index 00000000..581b7b35 --- /dev/null +++ b/app/components/menubar/newMenuBar.js @@ -0,0 +1,357 @@ +import { useEffect, useRef, useState, forwardRef, useLayoutEffect, Fragment } 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"); + +let isUserLoggedIn; +const hasAllRequiredCreds = + process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID && + process.env.NEXT_PUBLIC_RC_URL; + +const CustomToggle = forwardRef(({ children, onClick }, ref) => ( + { + e.preventDefault(); + onClick(e); + }} + > + {children} + + +)); + +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 ( + + + + ); +}; + +const MobileNav = ({ nav_Items }) => { + const [dropDown, setDropDown] = useState({ show: false, _id: 0 }); + return ( + + + +
+ + +
+ + + + + + + + + {nav_Items?.map((nav_Item, key) => + nav_Item.url ? ( +
+ { + setDropDown({ show: false, _id: 0 }); + }} + > + + + {nav_Item.label} + + + +
+ ) : ( +
+ { + if (dropDown._id === nav_Item.id) { + setDropDown({ show: false, _id: 0 }); + } else { + setDropDown({ show: true, _id: nav_Item.id }); + } + }} + > + + {nav_Item.label} + + + {nav_Item.sub_menus?.data?.length > 1 && ( + + + + )} + + + {dropDown._id === nav_Item.id && dropDown.show ? ( +
+ {nav_Item.sub_menus.data.map( + (item, key) => + ( + + + {nav_Item.attributes?.parent_id && nav_Item.sub_menus.data.map( + (subItem, key) => + subItem.attributes.parent_id === item.attributes.id && ( + + ) + )} + + ) + )} +
+ ) : ( + '' + )} +
+ ) + )} + + + + + + ); +}; + +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 ( + + + + + + + ); +}; + +const SidebarItem = () => { + + + useEffect(() => { + isUserLoggedIn = Cookies.get("hashmail") ? true : false; + }, []) + + return ( + +
+ + <> + {isUserLoggedIn && ( + + Click to Chat + + )} + {userCookie && ( +
+ + + + RC4Community Profile + + + Profile + + + + +
+ )} + + +
+ {hasAllRequiredCreds ? ( + + ) : ( + + )} +
+
+ ); +} + +export default function NewMenubar(props) { + return ( + + + + + ); +} diff --git a/app/styles/Menubar.module.css b/app/styles/Menubar.module.css index 1b06045e..05adc18f 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; @@ -14,7 +19,7 @@ background-color: #ff5050; color: transparent; width: 0%; - content: '.'; + content: "."; height: 2px; } @@ -22,6 +27,9 @@ width: 100%; } +.brand { + margin-right: 0px; +} .my-dropdown-toggle:after { display: none; } @@ -36,45 +44,47 @@ .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{ - content: ''; +.toggler_icon::before, +.toggler_icon::after { + content: ""; position: absolute; left: 0; width: inherit; @@ -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,16 +113,78 @@ 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 .link_heading { + padding: 1rem 1rem 0rem 2; + font-weight: 700; + color: #87898d; + width: 18rem; + margin-bottom: -1rem; + pointer-events: none; + cursor: default; + opacity: 0.7; +} + +.navbar_subitems_items { + padding: 1rem 1rem 1rem 2rem; + width: 18rem; + font-weight: lighter; + color: black; } +.subItemLinks { + cursor: pointer; + + text-decoration: none; + color: black; +} + +.subItemLinks:hover { + color: #3300ff; +} + +.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"; @@ -122,10 +194,9 @@ } .elipses:hover, -.elipses { - color: #87898d; - text-decoration-line: none !important; - +.elipses { + color: #87898d; + text-decoration-line: none !important; } .dropdown_menu { @@ -141,4 +212,12 @@ .dropdown_menu_item { color: black; text-decoration: none; -} \ No newline at end of file +} + +.link_heading_mobile { + font-weight: 700; + pointer-events: none; + cursor: default; + opacity: 0.6; + margin-bottom: -0.5rem; +}