render() { const activeStyle = { color: 'blue' }; return ( <div> <div> <NavLink exact to="/" activeStyle={activeStyle}>Home</NavLink> {' | '} <NavLink to="/fuel-savings" activeStyle={activeStyle}>Demo App</NavLink> {' | '} <NavLink to="/about" activeStyle={activeStyle}>About</NavLink> </div> <Switch> <Route exact path="/" component={HomePage} /> <Route path="/fuel-savings" component={FuelSavingsPage} /> <Route path="/about" component={AboutPage} /> <Route component={NotFoundPage} /> </Switch> </div> ); }
const ProfileNavLink = ({ url, label }) => { return ( <li> <NavLink to={url} exact activeClassName="pro_nav_active" className="inst_nav" > {label} </NavLink> </li> ) }
const BannerAddTagsLink = ({ tags_len, id }) => ( <Fragment> {tags_len == 0 && Me(id) && ( <NavLink to="/edit-profile" className="add_tags"> add </NavLink> )} </Fragment> )
const BannerMapTags = ({ ud, tags }) => { let { id, username } = ud let map_tags = tags.map(t => ( <NavLink to="/" key={t.tag} className="tags"> {t.tag} </NavLink> )) return ( <Fragment> {tags.length != 0 ? map_tags : `${Me(id) ? 'You' : username} have no tags!!`} </Fragment> ) }
const HeaderTopLinks = () => { let id = uData('session') let username = uData('username') return ( <Fragment> <NavLink to="/notifications" activeClassName="ha_active" className="notification" > <span className="notification_span nav_icon"> <MaterialIcon icon="notifications_none" /> </span> <span className="links_span">Notifications</span> </NavLink> <NavLink to={`/profile/${username}`} activeClassName="ha_active" className="sp" > <img src={`/users/${id}/avatar.jpg`} alt="avatar" className="sp_img" /> <span className="sp_span">{username}</span> </NavLink> </Fragment> ) }
</a> ) : ( <NavLink to={`/admin-login?to=${location.pathname}`} className="m_n_a_admin"
const SettingsNav = ({ url }) => { let commonProps = { activeClassName: 'settings_nav_active', className: 'settings_nav', } return ( <div className="settings_nav_div"> <ul> <li> <NavLink to={`${url}`} exact {...commonProps}> Profile settings </NavLink> </li> <li> <NavLink to={`${url}/change-password`} {...commonProps}> Change password </NavLink> </li> <li> <NavLink to={`${url}/deactivate`} {...commonProps}> Deactivate </NavLink> </li> </ul> </div> ) }
const SidebarLink = ({ label, link, showNumbers, numbers }) => { return ( <li className="m_n_li"> <NavLink to={link} exact activeClassName="sidebar_active" className="m_n_a" > <span className="m_n_text">{label}</span> {showNumbers && numbers ? ( <span className="m_n_new">{numbers > 9 ? '+' : numbers}</span> ) : null} </NavLink> </li> ) }
const ExploreNav = ({ url }) => { let commonProps = { activeClassName: 'exp_nav_active', className: 'exp_nav_link', } return ( <Fragment> <ul> <li> <NavLink to={`${url}`} exact {...commonProps}> Users </NavLink> </li> <li> <NavLink to={`${url}/explore-photos`} {...commonProps}> Photos </NavLink> </li> <li> <NavLink to={`${url}/explore-groups`} {...commonProps}> Groups </NavLink> </li> </ul> </Fragment> ) }
renderList() { const posts = this.state.posts .slice(this.state.skip, this.state.skip + this.state.perPage) .map(this.renderPost); return <div className={classNames('mt-5', 'mx-auto', styles.postslist)}> <NavLink to="/posts/create" className="mb-3 text-dark d-inline-block"> Create new post <span className="fas fa-plus ml-2" /> </NavLink> {posts} </div> }
static item(link: LinkType): React$Node { return ( <li key={link.label} className={styles.navLink}> <NavLink to={link.to} exact activeClassName={styles.active}> <link.icon size="24px" className={styles.navLinkIcon} /> {link.label} </NavLink> </li> ); }
const navigationItem = ( props ) => ( <li className={classes.NavigationItem}> <NavLink to={props.link} exact={props.exact} activeClassName={classes.active}>{props.children}</NavLink> </li> )
const navigationItem = (props) => ( <li className="NavigationItem"> <NavLink to={props.link} exact={props.exact} activeClassName={"active"}>{props.children}</NavLink> </li> )