-
Notifications
You must be signed in to change notification settings - Fork 68
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: Irfan Asif <irfan_2020bece060@nitsri.net>
- Loading branch information
1 parent
7241ded
commit 9dd8006
Showing
9 changed files
with
19,340 additions
and
5,498 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,287 @@ | ||
import { useEffect, useRef, useState } from 'react'; | ||
import { Navbar, Nav, Container, Col, Row, Offcanvas } from 'react-bootstrap'; | ||
import styles from '../../styles/Menubar.module.css'; | ||
import { DummyLoginButton } from '../auth/dummy'; | ||
import BrandLogo from '../brandlogo'; | ||
import NFTProfilePicture from './nftProfilePicture'; | ||
|
||
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, nft }) => { | ||
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 | ||
brandLink={'/'} | ||
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) => | ||
item.attributes.parent_id === null && ( | ||
<> | ||
<div className='p-2 fw-medium' key={item.id}> | ||
<a | ||
href={item.attributes.url} | ||
className={styles.subItemLinks} | ||
> | ||
{item.attributes.label} | ||
</a> | ||
</div> | ||
{nav_Item.sub_menus.data.map( | ||
(subItem) => | ||
subItem.attributes.parent_id === item.attributes.id && ( | ||
<div className='px-4 py-1 fw-light' key={subItem.id}> | ||
<a | ||
href={subItem.attributes.url} | ||
className={styles.subItemLinks} | ||
> | ||
{subItem.attributes.label} | ||
</a> | ||
</div> | ||
) | ||
)} | ||
</> | ||
) | ||
)} | ||
</div> | ||
</div> | ||
) : ( | ||
'' | ||
)} | ||
</div> | ||
) | ||
)} | ||
</Offcanvas.Body> | ||
</Navbar.Offcanvas> | ||
<Navbar.Brand className={styles.brand}> | ||
{nft ? <NFTProfilePicture id='img2' /> : <DummyLoginButton />} | ||
</Navbar.Brand> | ||
</Container> | ||
</Navbar> | ||
); | ||
}; | ||
|
||
const DesktopNav = ({ nav_Items, nft }) => { | ||
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 | ||
brandLink={'/'} | ||
logoLink={ | ||
'https://global-uploads.webflow.com/611a19b9853b7414a0f6b3f6/611bbb87319adfd903b90f24_logoRC.svg' | ||
} | ||
imageTitle={'Rocket.Chat'} | ||
brandName={'Rocket.Chat Community'} | ||
height={32} | ||
width={132} | ||
/> | ||
<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) => | ||
item.attributes.parent_id < 1 && ( | ||
<div className={`${styles.navbar_subitems_items}`}> | ||
<div> | ||
<a | ||
href={item.attributes.url} | ||
className={styles.subItemLinks} | ||
> | ||
{item.attributes.label} | ||
</a> | ||
</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> | ||
) | ||
)} | ||
</div> | ||
)} | ||
</div> | ||
</span> | ||
) : ( | ||
<Nav.Link | ||
key={key} | ||
className={`${styles.navbar_item_hover} text-muted mx-3`} | ||
> | ||
{nav_item.label} | ||
</Nav.Link> | ||
) | ||
)} | ||
</Nav> | ||
<div> | ||
{nft ? <NFTProfilePicture id='img1' /> : <DummyLoginButton />} | ||
</div> | ||
</Navbar> | ||
); | ||
}; | ||
|
||
export default function NewMenubar(props) { | ||
let pfpIsNFT = false | ||
return ( | ||
<Container fluid> | ||
<MobileNav nav_Items={props.menu?.data?.attributes?.body} nft={pfpIsNFT} /> | ||
<DesktopNav nav_Items={props.menu?.data?.attributes?.body} nft={pfpIsNFT} /> | ||
</Container> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import React from 'react'; | ||
import styles from '../../styles/Menubar.module.css'; | ||
|
||
const NFTProfilePicture = ({ id }) => { | ||
return ( | ||
<div className={styles.nft_pfp}> | ||
<svg | ||
viewBox='0 0 200 200' | ||
fill='none' | ||
xmlns='http://www.w3.org/2000/svg' | ||
width='100%' | ||
height='100%' | ||
> | ||
<defs> | ||
<pattern id={id} width='100%' height='100%'> | ||
{/* replace the href with the nft link */} | ||
<image | ||
preserveAspectRatio='xMidYMid slice' | ||
href='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrD7zIqb5fsmcu_fSnnHkpQqzMccAHzX2reg&usqp=CAU' | ||
height='100%' | ||
width='100%' | ||
/> | ||
</pattern> | ||
</defs> | ||
<path | ||
d='M17.7489 147.583C7.23743 128.104 1.9817 118.365 0.54522 107.946C-0.18174 102.674 -0.18174 97.3261 0.54522 92.0535C1.9817 81.6349 7.23744 71.8956 17.7489 52.4171L20.3577 47.5829C29.3372 30.9433 33.8269 22.6235 40.1654 16.4407C46.6753 10.0908 54.5842 5.36561 63.2527 2.64704C71.6932 0 81.1288 0 100 0C118.871 0 128.307 0 136.747 2.64704C145.416 5.36561 153.325 10.0908 159.835 16.4407C166.173 22.6235 170.663 30.9433 179.642 47.5829L182.251 52.4171C192.763 71.8956 198.018 81.6349 199.455 92.0535C200.182 97.3261 200.182 102.674 199.455 107.946C198.018 118.365 192.763 128.104 182.251 147.583L179.642 152.417C170.663 169.057 166.173 177.377 159.835 183.559C153.325 189.909 145.416 194.634 136.747 197.353C128.307 200 118.871 200 100 200C81.1288 200 71.6932 200 63.2527 197.353C54.5842 194.634 46.6753 189.909 40.1654 183.559C33.8269 177.377 29.3372 169.057 20.3577 152.417L17.7489 147.583Z' | ||
fill={`url(#${id})`} | ||
/> | ||
</svg> | ||
</div> | ||
); | ||
}; | ||
|
||
export default NFTProfilePicture; |
Oops, something went wrong.