Skip to content

Instantly share code, notes, and snippets.

@dstroppolo
Last active August 21, 2021 12:42
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save dstroppolo/8747aa0b5843c7897c3d945fae76e098 to your computer and use it in GitHub Desktop.
Save dstroppolo/8747aa0b5843c7897c3d945fae76e098 to your computer and use it in GitHub Desktop.
Navigation component
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { observer, inject } from 'mobx-react';
import * as routes from '../common/routes';
import { Menu, Icon, Layout, Avatar, Dropdown, Button, Drawer } from 'antd';
import windowSize from 'react-window-size';
@inject('sessionStore')
@observer
class Navigation extends Component {
renderNavLinks = () => {
let { HOME, ACCOUNT, SIGN_IN, PROJECTS } = routes;
let { authUser, toggleMobileMenuOpen, isMobileMenu } = this.props.sessionStore;
let signedInUserId = authUser && authUser.uid;
if(signedInUserId){
return [
<Menu.Item key = {0}><Link onClick = { () => toggleMobileMenuOpen() } to={HOME.route}>{HOME.link}</Link></Menu.Item>,
<Menu.Item key = {1}><Link onClick = { () => toggleMobileMenuOpen() } to={`${ACCOUNT.route}/${signedInUserId}`}>{ACCOUNT.link}</Link></Menu.Item>,
<Menu.Item key = {2}><Link onClick = { () => toggleMobileMenuOpen() } to={`${PROJECTS.route}/tvF7OMS1g9omqcdHNvpo`}>{PROJECTS.link}</Link></Menu.Item>,
isMobileMenu && <Menu.Item key = {100}><Link onClick = { () => { /*Signout function*/; toggleMobileMenuOpen() }} to={`${HOME.route}`}>Sign out</Link></Menu.Item>
]
} else {
return (
<Menu.Item key = {3}><Link to={SIGN_IN.route}><Button ghost>{SIGN_IN.link}</Button></Link></Menu.Item>
)
}
}
renderUserLinks = () => {
return (
<Menu.Item style={{float:'right', display:'flex', justifyContent:"space-around", alignItems:'center', width:"180px"}}>
<a><Icon type="notification" style={{ fontSize: 20, color: 'white'}} /></a>
<a><Icon type="message" style={{ fontSize: 20, color: 'white'}} /></a>
{this.props.sessionStore.isMobileMenu ?
<Button onClick = { () => this.props.sessionStore.toggleMobileMenuOpen() } icon="bars" ghost /> :
<Avatar src = {this.props.sessionStore.authUser.photoURL/>
}
</Menu.Item>
)
}
renderDesktopNavbar = () => {
this.props.sessionStore.setIsMobileMenu(this.props.windowWidth);
return this.renderNavLinks();
}
renderMobileNavbar = () => {
this.props.sessionStore.setIsMobileMenu(this.props.windowWidth);
return this.props.sessionStore.authUser ? '' : this.renderNavLinks();
}
render(){
let { toggleMobileMenuOpen, mobileMenuOpen, authUser, tab } = this.props.sessionStore;
return (
<div>
<Drawer
title='StudentCon'
placement='left'
closable={false}
onClose = { () => toggleMobileMenuOpen() }
visible={ mobileMenuOpen }
>
<Menu>{this.renderNavLinks()}</Menu>
</Drawer>
<Layout.Header style={{ position: 'fixed', zIndex: 1, width: '100%', padding: this.props.sessionStore.isMobileMenu ? '0' : '0 10%'}}>
<Menu
theme="dark"
mode="horizontal"
style={{lineHeight: '64px'}}
selectedKeys={[tab.toString()]}
>
{this.props.windowWidth >= 768 ? this.renderDesktopNavbar() : this.renderMobileNavbar()}
{ authUser && this.renderUserLinks() }
</Menu>
</Layout.Header>
</div>
)
}
}
export default windowSize(Navigation);
@algosoftbd
Copy link

Can you please share the full source code of this project?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment