Updated Sidebar, NavigationBar components, Added layouts
• Updated: - Sidebar, NavigationBar components - file structures for both • Added: - layouts for compnents
This commit is contained in:
mgabdev
parent
147f7ed878
commit
d7cd258977
@ -1,124 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import { me } from '../initial_state'
|
||||
import SidebarSectionTitle from './sidebar_section_title'
|
||||
import SidebarSectionItem from './sidebar_section_item'
|
||||
import Heading from './heading'
|
||||
import LinkFooter from './link_footer'
|
||||
|
||||
class Sidebar extends React.PureComponent {
|
||||
|
||||
render() {
|
||||
const {
|
||||
intl,
|
||||
title,
|
||||
showLinkFooter,
|
||||
} = this.props
|
||||
|
||||
if (!!me) return null
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
title: 'Home',
|
||||
icon: 'home',
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
title: 'Search',
|
||||
icon: 'search-alt',
|
||||
to: '/search',
|
||||
},
|
||||
{
|
||||
title: 'Groups',
|
||||
icon: 'group',
|
||||
to: '/groups',
|
||||
},
|
||||
{
|
||||
title: 'News',
|
||||
icon: 'news',
|
||||
to: '/news',
|
||||
},
|
||||
]
|
||||
|
||||
const exploreItems = [
|
||||
{
|
||||
title: 'Apps',
|
||||
icon: 'apps',
|
||||
href: 'https://apps.gab.com',
|
||||
},
|
||||
{
|
||||
title: 'Shop',
|
||||
icon: 'shop',
|
||||
href: 'https://shop.dissenter.com',
|
||||
},
|
||||
{
|
||||
title: 'Trends',
|
||||
icon: 'trends',
|
||||
href: 'https://trends.gab.com',
|
||||
},
|
||||
{
|
||||
title: 'Dissenter',
|
||||
icon: 'dissenter',
|
||||
href: 'https://dissenter.com',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<header role='banner' className={[_s.d, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
|
||||
<div className={[_s.d, _s.w240PX].join(' ')}>
|
||||
<div className={[_s.d, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}>
|
||||
<div className={[_s.d, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
|
||||
<div className={[_s.d, _s.w100PC].join(' ')}>
|
||||
{
|
||||
!!title &&
|
||||
<div className={[_s.d, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
|
||||
<Heading size='h1'>
|
||||
{title}
|
||||
</Heading>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<nav aria-label='Primary' role='navigation' className={[_s.d, _s.w100PC, _s.mb15].join(' ')}>
|
||||
<SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
|
||||
{
|
||||
menuItems.map((menuItem, i) => {
|
||||
if (menuItem.hidden) return null
|
||||
|
||||
return (
|
||||
<SidebarSectionItem {...menuItem} key={`sidebar-item-menu-${i}`} />
|
||||
)
|
||||
})
|
||||
}
|
||||
<SidebarSectionTitle>{intl.formatMessage(messages.explore)}</SidebarSectionTitle>
|
||||
{
|
||||
exploreItems.map((exploreItem, i) => (
|
||||
<SidebarSectionItem {...exploreItem} key={`sidebar-item-explore-${i}`} />
|
||||
))
|
||||
}
|
||||
</nav>
|
||||
|
||||
{
|
||||
showLinkFooter && <LinkFooter noPadding />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const messages = defineMessages({
|
||||
explore: { id: 'explore', defaultMessage: 'Explore' },
|
||||
menu: { id: 'menu', defaultMessage: 'Menu' },
|
||||
})
|
||||
|
||||
Sidebar.propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
showLinkFooter: PropTypes.bool,
|
||||
title: PropTypes.string,
|
||||
}
|
||||
|
||||
export default injectIntl(Sidebar)
|
||||
@ -3,26 +3,26 @@ import PropTypes from 'prop-types'
|
||||
import { connect } from 'react-redux'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { openSidebar } from '../actions/sidebar'
|
||||
import { openPopover } from '../actions/popover'
|
||||
import { BREAKPOINT_EXTRA_SMALL } from '../constants'
|
||||
import { me } from '../initial_state'
|
||||
import { makeGetAccount } from '../selectors'
|
||||
import Responsive from '../features/ui/util/responsive_component'
|
||||
import { openSidebar } from '../../actions/sidebar'
|
||||
import { openPopover } from '../../actions/popover'
|
||||
import { BREAKPOINT_EXTRA_SMALL } from '../../constants'
|
||||
import { me } from '../../initial_state'
|
||||
import { makeGetAccount } from '../../selectors'
|
||||
import Responsive from '../../features/ui/util/responsive_component'
|
||||
import {
|
||||
CX,
|
||||
POPOVER_NAV_SETTINGS,
|
||||
} from '../constants'
|
||||
import Avatar from './avatar'
|
||||
import BackButton from './back_button'
|
||||
import Button from './button'
|
||||
import Heading from './heading'
|
||||
import Icon from './icon'
|
||||
import NavigationBarButton from './navigation_bar_button'
|
||||
import Search from './search'
|
||||
import Text from './text'
|
||||
} from '../../constants'
|
||||
import Avatar from '../avatar'
|
||||
import BackButton from '../back_button'
|
||||
import Button from '../button'
|
||||
import Heading from '../heading'
|
||||
import Icon from '../icon'
|
||||
import NavigationBarButton from '../navigation_bar_button'
|
||||
import Search from '../search'
|
||||
import Text from '../text'
|
||||
|
||||
class NavigationBar extends ImmutablePureComponent {
|
||||
class DefaultNavigationBar extends ImmutablePureComponent {
|
||||
|
||||
handleOnOpenNavSettingsPopover = () => {
|
||||
this.props.onOpenNavSettingsPopover(this.avatarNode)
|
||||
@ -86,6 +86,7 @@ class NavigationBar extends ImmutablePureComponent {
|
||||
<NavigationBarButton title='Home' icon='home' to='/home' />
|
||||
<NavigationBarButton title='Explore' icon='explore' to='/explore' />
|
||||
<NavigationBarButton title='News' icon='news' to='/news' />
|
||||
<NavigationBarButton title='TV' icon='gab-tv' href='https://tv.gab.com' />
|
||||
|
||||
<div className={[_s.d, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
|
||||
|
||||
@ -222,7 +223,7 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
}
|
||||
})
|
||||
|
||||
NavigationBar.propTypes = {
|
||||
DefaultNavigationBar.propTypes = {
|
||||
account: ImmutablePropTypes.map,
|
||||
actions: PropTypes.array,
|
||||
tabs: PropTypes.array,
|
||||
@ -234,4 +235,4 @@ NavigationBar.propTypes = {
|
||||
noSearch: PropTypes.bool,
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(NavigationBar)
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(DefaultNavigationBar)
|
||||
@ -1,12 +1,12 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { BREAKPOINT_EXTRA_SMALL } from '../constants'
|
||||
import Button from './button'
|
||||
import NavigationBarButton from './navigation_bar_button'
|
||||
import Search from './search'
|
||||
import Text from './text'
|
||||
import ResponsiveComponent from '../features/ui/util/responsive_component'
|
||||
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
|
||||
import { BREAKPOINT_EXTRA_SMALL } from '../../constants'
|
||||
import Button from '../button'
|
||||
import NavigationBarButton from '../navigation_bar_button'
|
||||
import Search from '../search'
|
||||
import Text from '../text'
|
||||
import ResponsiveComponent from '../../features/ui/util/responsive_component'
|
||||
import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
|
||||
|
||||
class LoggedOutNavigationBar extends React.PureComponent {
|
||||
|
||||
@ -46,6 +46,7 @@ class LoggedOutNavigationBar extends React.PureComponent {
|
||||
<NavigationBarButton title='Home' icon='home' href='/home' />
|
||||
<NavigationBarButton title='Explore' icon='explore' to='/explore' />
|
||||
<NavigationBarButton title='News' icon='news' to='/news' />
|
||||
<NavigationBarButton title='TV' icon='gab-tv' href='https://tv.gab.com' />
|
||||
</div>
|
||||
</ResponsiveComponent>
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import BackButton from '../back_button'
|
||||
import Heading from '../heading'
|
||||
|
||||
class ProfileNavigationBar extends React.PureComponent {
|
||||
|
||||
render() {
|
||||
const { titleHTML } = this.props
|
||||
|
||||
return (
|
||||
<div className={[_s.d, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}>
|
||||
<div className={[_s.d, _s.minH53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
|
||||
|
||||
<div className={[_s.d, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w100PC].join(' ')}>
|
||||
|
||||
<BackButton
|
||||
className={[_s.minH53PX, _s.pl10, _s.pr10].join(' ')}
|
||||
iconSize='18px'
|
||||
iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
|
||||
/>
|
||||
|
||||
<div className={[_s.d, _s.minH53PX, _s.jcCenter, _s.mrAuto].join(' ')}>
|
||||
<Heading size='h1'>
|
||||
<span className={[_s.textOverflowEllipsis, _s.colorNavigation].join(' ')}>
|
||||
<div dangerouslySetInnerHTML={{ __html: titleHTML }} />
|
||||
</span>
|
||||
</Heading>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ProfileNavigationBar.propTypes = {
|
||||
titleHTML: PropTypes.string,
|
||||
showBackBtn: PropTypes.bool,
|
||||
}
|
||||
|
||||
export default ProfileNavigationBar
|
||||
@ -1,96 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { connect } from 'react-redux'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import { me } from '../initial_state'
|
||||
import { makeGetAccount } from '../selectors'
|
||||
import SidebarSectionTitle from './sidebar_section_title'
|
||||
import SidebarSectionItem from './sidebar_section_item'
|
||||
import Heading from './heading'
|
||||
import BackButton from './back_button'
|
||||
|
||||
class Sidebar extends ImmutablePureComponent {
|
||||
|
||||
render() {
|
||||
const {
|
||||
intl,
|
||||
account,
|
||||
title,
|
||||
} = this.props
|
||||
|
||||
if (!me || !account) return null
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
title: intl.formatMessage(messages.blocks),
|
||||
to: '/settings/blocks',
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage(messages.mutes),
|
||||
to: '/settings/mutes',
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage(messages.preferences),
|
||||
href: '/settings/preferences',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<header role='banner' className={[_s.d, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
|
||||
<div className={[_s.d, _s.w240PX].join(' ')}>
|
||||
<div className={[_s.d, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}>
|
||||
<div className={[_s.d, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
|
||||
<div className={[_s.d, _s.w100PC].join(' ')}>
|
||||
<div className={[_s.d, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
|
||||
<BackButton
|
||||
icon='arrow-left'
|
||||
toHome
|
||||
/>
|
||||
<Heading size='h1'>
|
||||
{title}
|
||||
</Heading>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<nav aria-label='Primary' role='navigation' className={[_s.d, _s.w100PC, _s.mb15].join(' ')}>
|
||||
<SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
|
||||
{
|
||||
menuItems.map((menuItem, i) => {
|
||||
if (menuItem.hidden) return null
|
||||
|
||||
return (
|
||||
<SidebarSectionItem {...menuItem} key={`sidebar-item-menu-${i}`} />
|
||||
)
|
||||
})
|
||||
}
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const messages = defineMessages({
|
||||
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
|
||||
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
|
||||
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
|
||||
menu: { id: 'menu', defaultMessage: 'Menu' },
|
||||
})
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
account: makeGetAccount()(state, me),
|
||||
})
|
||||
|
||||
Sidebar.propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
account: ImmutablePropTypes.map,
|
||||
title: PropTypes.string,
|
||||
}
|
||||
|
||||
export default injectIntl(connect(mapStateToProps)(Sidebar))
|
||||
@ -1,357 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { connect } from 'react-redux'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import {
|
||||
BREAKPOINT_SMALL,
|
||||
} from '../constants'
|
||||
import Button from './button'
|
||||
import { closeSidebar } from '../actions/sidebar'
|
||||
import { openModal } from '../actions/modal'
|
||||
import { openPopover } from '../actions/popover'
|
||||
import { fetchShortcuts } from '../actions/shortcuts'
|
||||
import { me } from '../initial_state'
|
||||
import { makeGetAccount } from '../selectors'
|
||||
import Responsive from '../features/ui/util/responsive_component'
|
||||
import SidebarSectionTitle from './sidebar_section_title'
|
||||
import SidebarSectionItem from './sidebar_section_item'
|
||||
import Heading from './heading'
|
||||
import BackButton from './back_button'
|
||||
import Pills from './pills'
|
||||
import Text from './text'
|
||||
|
||||
class Sidebar extends ImmutablePureComponent {
|
||||
|
||||
state = {
|
||||
hoveringShortcuts: false,
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.props.onFetchShortcuts()
|
||||
}
|
||||
|
||||
handleOpenComposeModal = () => {
|
||||
this.props.onOpenComposeModal()
|
||||
}
|
||||
|
||||
handleOpenSidebarMorePopover = () => {
|
||||
this.props.openSidebarMorePopover({
|
||||
targetRef: this.moreBtnRef,
|
||||
position: 'top',
|
||||
})
|
||||
}
|
||||
|
||||
handleMouseEnterShortcuts = () => {
|
||||
this.setState({ hoveringShortcuts: true })
|
||||
}
|
||||
|
||||
handleMouseLeaveShortcuts = () => {
|
||||
this.setState({ hoveringShortcuts: false })
|
||||
}
|
||||
|
||||
setMoreButtonRef = n => {
|
||||
this.moreBtnRef = n
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
intl,
|
||||
account,
|
||||
notificationCount,
|
||||
homeItemsQueueCount,
|
||||
moreOpen,
|
||||
actions,
|
||||
tabs,
|
||||
title,
|
||||
showBackBtn,
|
||||
shortcuts,
|
||||
} = this.props
|
||||
const { hoveringShortcuts } = this.state
|
||||
|
||||
if (!me || !account) return null
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
title: 'Home',
|
||||
icon: 'home',
|
||||
to: '/home',
|
||||
count: homeItemsQueueCount,
|
||||
},
|
||||
{
|
||||
title: 'Notifications',
|
||||
icon: 'notifications',
|
||||
to: '/notifications',
|
||||
count: notificationCount,
|
||||
},
|
||||
{
|
||||
title: 'Search',
|
||||
icon: 'search-alt',
|
||||
to: '/search',
|
||||
hidden: true, // : todo : show only when search on top is not visible
|
||||
},
|
||||
{
|
||||
title: 'Groups',
|
||||
icon: 'group',
|
||||
to: '/groups',
|
||||
},
|
||||
{
|
||||
title: 'Lists',
|
||||
icon: 'list',
|
||||
to: '/lists',
|
||||
},
|
||||
{
|
||||
title: 'Explore',
|
||||
icon: 'explore',
|
||||
to: '/explore',
|
||||
},
|
||||
{
|
||||
title: 'Pro Feed',
|
||||
icon: 'explore',
|
||||
to: '/timeline/pro',
|
||||
},
|
||||
{
|
||||
title: 'News',
|
||||
icon: 'news',
|
||||
to: '/news',
|
||||
},
|
||||
{
|
||||
title: 'More',
|
||||
icon: 'more',
|
||||
onClick: this.handleOpenSidebarMorePopover,
|
||||
buttonRef: this.setMoreButtonRef,
|
||||
active: moreOpen,
|
||||
},
|
||||
]
|
||||
|
||||
let shortcutItems = []
|
||||
if (!!shortcuts) {
|
||||
shortcuts.forEach((s) => {
|
||||
shortcutItems.push({
|
||||
to: s.get('to'),
|
||||
title: s.get('title'),
|
||||
image: s.get('image'),
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const exploreItems = [
|
||||
{
|
||||
title: 'Apps',
|
||||
icon: 'apps',
|
||||
href: 'https://apps.gab.com',
|
||||
},
|
||||
{
|
||||
title: 'Shop',
|
||||
icon: 'shop',
|
||||
href: 'https://shop.dissenter.com',
|
||||
},
|
||||
{
|
||||
title: 'Trends',
|
||||
icon: 'trends',
|
||||
href: 'https://trends.gab.com',
|
||||
},
|
||||
{
|
||||
title: 'Dissenter',
|
||||
icon: 'dissenter',
|
||||
href: 'https://dissenter.com',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<header role='banner' className={[_s.d, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
|
||||
<div className={[_s.d, _s.w240PX].join(' ')}>
|
||||
<div className={[_s.d, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}>
|
||||
<div className={[_s.d, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
|
||||
<div className={[_s.d, _s.w100PC].join(' ')}>
|
||||
{
|
||||
!!title &&
|
||||
<div className={[_s.d, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
|
||||
{
|
||||
showBackBtn &&
|
||||
<BackButton
|
||||
icon='arrow-left'
|
||||
/>
|
||||
}
|
||||
<Heading size='h1'>
|
||||
{title}
|
||||
</Heading>
|
||||
{
|
||||
!!actions &&
|
||||
<div className={[_s.d, _s.bgTransparent, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.mlAuto].join(' ')}>
|
||||
{
|
||||
actions.map((action, i) => (
|
||||
<Button
|
||||
isNarrow
|
||||
backgroundColor='none'
|
||||
color='primary'
|
||||
onClick={action.onClick ? () => action.onClick() : undefined}
|
||||
to={action.to}
|
||||
key={`action-btn-${i}`}
|
||||
className={[_s.ml5, _s.px5].join(' ')}
|
||||
icon={action.icon}
|
||||
iconClassName={_s.cPrimary}
|
||||
iconSize='14px'
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
{
|
||||
!!tabs &&
|
||||
<div className={[_s.d, _s.mt10, _s.pb15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
|
||||
<Pills pills={tabs} />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<nav aria-label='Primary' role='navigation' className={[_s.d, _s.w100PC, _s.mb15].join(' ')}>
|
||||
<SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
|
||||
{
|
||||
menuItems.map((menuItem, i) => {
|
||||
if (menuItem.hidden) return null
|
||||
|
||||
return (
|
||||
<SidebarSectionItem {...menuItem} key={`sidebar-item-menu-${i}`} />
|
||||
)
|
||||
})
|
||||
}
|
||||
{
|
||||
!!shortcutItems.length > 0 &&
|
||||
<React.Fragment>
|
||||
<SidebarSectionTitle>
|
||||
<div
|
||||
className={[_s.displayFlex, _s.aiCenter, _s.flexRow].join(' ')}
|
||||
onMouseEnter={this.handleMouseEnterShortcuts}
|
||||
onMouseLeave={this.handleMouseLeaveShortcuts}
|
||||
>
|
||||
<span>
|
||||
{intl.formatMessage(messages.shortcuts)}
|
||||
</span>
|
||||
<Button
|
||||
isText
|
||||
to='/shortcuts'
|
||||
color='brand'
|
||||
backgroundColor='none'
|
||||
className={_s.mlAuto}
|
||||
>
|
||||
{
|
||||
hoveringShortcuts &&
|
||||
<Text color='inherit' size='small' weight='medium' align='right'>
|
||||
{intl.formatMessage(messages.all)}
|
||||
</Text>
|
||||
}
|
||||
</Button>
|
||||
</div>
|
||||
</SidebarSectionTitle>
|
||||
{
|
||||
shortcutItems.map((shortcutItem, i) => (
|
||||
<SidebarSectionItem {...shortcutItem} key={`sidebar-item-shortcut-${i}`} />
|
||||
))
|
||||
}
|
||||
</React.Fragment>
|
||||
}
|
||||
<SidebarSectionTitle>{intl.formatMessage(messages.explore)}</SidebarSectionTitle>
|
||||
{
|
||||
exploreItems.map((exploreItem, i) => (
|
||||
<SidebarSectionItem {...exploreItem} key={`sidebar-item-explore-${i}`} />
|
||||
))
|
||||
}
|
||||
</nav>
|
||||
|
||||
<Responsive min={BREAKPOINT_SMALL}>
|
||||
<Button
|
||||
isBlock
|
||||
onClick={this.handleOpenComposeModal}
|
||||
className={[_s.py15, _s.fs15PX, _s.fw600].join(' ')}
|
||||
>
|
||||
Gab
|
||||
</Button>
|
||||
</Responsive>
|
||||
|
||||
<Responsive max={BREAKPOINT_SMALL}>
|
||||
<Button
|
||||
onClick={this.handleOpenComposeModal}
|
||||
className={_s.py15}
|
||||
icon='pencil'
|
||||
/>
|
||||
</Responsive>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const messages = defineMessages({
|
||||
followers: { id: 'account.followers', defaultMessage: 'Followers' },
|
||||
follows: { id: 'account.follows', defaultMessage: 'Following' },
|
||||
profile: { id: 'account.profile', defaultMessage: 'Profile' },
|
||||
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
|
||||
follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
|
||||
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
|
||||
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
|
||||
filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
|
||||
logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
|
||||
lists: { id: 'column.lists', defaultMessage: 'Lists' },
|
||||
apps: { id: 'tabs_bar.apps', defaultMessage: 'Apps' },
|
||||
more: { id: 'sidebar.more', defaultMessage: 'More' },
|
||||
explore: { id: 'explore', defaultMessage: 'Explore' },
|
||||
news: { id: 'news', defaultMessage: 'News' },
|
||||
menu: { id: 'menu', defaultMessage: 'Menu' },
|
||||
pro: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
|
||||
trends: { id: 'promo.trends', defaultMessage: 'Trends' },
|
||||
search: { id: 'tabs_bar.search', defaultMessage: 'Search' },
|
||||
shop: { id: 'tabs_bar.shop', defaultMessage: 'Store - Buy Merch' },
|
||||
donate: { id: 'tabs_bar.donate', defaultMessage: 'Make a Donation' },
|
||||
shortcuts: { id: 'navigation_bar.shortcuts', defaultMessage: 'Shortcuts' },
|
||||
all: { id: 'all', defaultMessage: 'All' },
|
||||
edit: { id: 'edit', defaultMessage: 'Edit' },
|
||||
})
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
account: makeGetAccount()(state, me),
|
||||
shortcuts: state.getIn(['shortcuts', 'items']),
|
||||
moreOpen: state.getIn(['popover', 'popoverType']) === 'SIDEBAR_MORE',
|
||||
notificationCount: state.getIn(['notifications', 'unread']),
|
||||
homeItemsQueueCount: state.getIn(['timelines', 'home', 'totalQueuedItemsCount']),
|
||||
})
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onClose() {
|
||||
dispatch(closeSidebar())
|
||||
},
|
||||
openSidebarMorePopover(props) {
|
||||
dispatch(openPopover('SIDEBAR_MORE', props))
|
||||
},
|
||||
onOpenComposeModal() {
|
||||
dispatch(openModal('COMPOSE'))
|
||||
},
|
||||
onFetchShortcuts() {
|
||||
dispatch(fetchShortcuts())
|
||||
},
|
||||
})
|
||||
|
||||
Sidebar.propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
account: ImmutablePropTypes.map,
|
||||
moreOpen: PropTypes.bool,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
onOpenComposeModal: PropTypes.func.isRequired,
|
||||
onFetchShortcuts: PropTypes.func.isRequired,
|
||||
openSidebarMorePopover: PropTypes.func.isRequired,
|
||||
notificationCount: PropTypes.number.isRequired,
|
||||
homeItemsQueueCount: PropTypes.number.isRequired,
|
||||
actions: PropTypes.array,
|
||||
tabs: PropTypes.array,
|
||||
title: PropTypes.string,
|
||||
showBackBtn: PropTypes.bool,
|
||||
shortcuts: ImmutablePropTypes.list,
|
||||
}
|
||||
|
||||
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Sidebar))
|
||||
@ -3,12 +3,12 @@ import PropTypes from 'prop-types'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import { me } from '../initial_state'
|
||||
import SidebarSectionTitle from './sidebar_section_title'
|
||||
import SidebarSectionItem from './sidebar_section_item'
|
||||
import Heading from './heading'
|
||||
import BackButton from './back_button'
|
||||
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
|
||||
import { me } from '../../initial_state'
|
||||
import SidebarSectionTitle from '../sidebar_section_title'
|
||||
import SidebarSectionItem from '../sidebar_section_item'
|
||||
import Heading from '../heading'
|
||||
import BackButton from '../back_button'
|
||||
import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
|
||||
|
||||
class AboutSidebar extends ImmutablePureComponent {
|
||||
|
||||
177
app/javascript/gabsocial/components/sidebar/default_sidebar.js
Normal file
177
app/javascript/gabsocial/components/sidebar/default_sidebar.js
Normal file
@ -0,0 +1,177 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { connect } from 'react-redux'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import { openPopover } from '../../actions/popover'
|
||||
import { fetchShortcuts } from '../../actions/shortcuts'
|
||||
import { me } from '../../initial_state'
|
||||
import Responsive from '../../features/ui/util/responsive_component'
|
||||
import Button from '../button'
|
||||
import Text from '../text'
|
||||
import SidebarSectionTitle from '../sidebar_section_title'
|
||||
import SidebarSectionItem from '../sidebar_section_item'
|
||||
import SidebarLayout from './sidebar_layout'
|
||||
|
||||
class DefaultSidebar extends ImmutablePureComponent {
|
||||
|
||||
state = {
|
||||
hoveringShortcuts: false,
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.props.onFetchShortcuts()
|
||||
}
|
||||
|
||||
handleOpenSidebarMorePopover = () => {
|
||||
this.props.openSidebarMorePopover({
|
||||
targetRef: this.moreBtnRef,
|
||||
position: 'top',
|
||||
})
|
||||
}
|
||||
|
||||
handleMouseEnterShortcuts = () => {
|
||||
this.setState({ hoveringShortcuts: true })
|
||||
}
|
||||
|
||||
handleMouseLeaveShortcuts = () => {
|
||||
this.setState({ hoveringShortcuts: false })
|
||||
}
|
||||
|
||||
setMoreButtonRef = n => {
|
||||
this.moreBtnRef = n
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
intl,
|
||||
notificationCount,
|
||||
homeItemsQueueCount,
|
||||
moreOpen,
|
||||
actions,
|
||||
tabs,
|
||||
title,
|
||||
showBackBtn,
|
||||
shortcuts,
|
||||
} = this.props
|
||||
const { hoveringShortcuts } = this.state
|
||||
|
||||
if (!me) return null
|
||||
|
||||
let shortcutItems = []
|
||||
if (!!shortcuts) {
|
||||
shortcuts.forEach((s) => {
|
||||
shortcutItems.push({
|
||||
to: s.get('to'),
|
||||
title: s.get('title'),
|
||||
image: s.get('image'),
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<SidebarLayout
|
||||
title={title}
|
||||
showBackBtn={showBackBtn}
|
||||
actions={actions}
|
||||
tabs={tabs}
|
||||
>
|
||||
<SidebarSectionTitle>
|
||||
{intl.formatMessage(messages.menu)}
|
||||
</SidebarSectionTitle>
|
||||
<SidebarSectionItem title='Home' icon='home' to='/home' count={homeItemsQueueCount} />
|
||||
<SidebarSectionItem title='Notifications' icon='notifications' to='/notifications' count={notificationCount} />
|
||||
<SidebarSectionItem title='Groups' icon='group' to='/groups' />
|
||||
<SidebarSectionItem title='Lists' icon='list' to='/lists' />
|
||||
<SidebarSectionItem title='Explore' icon='explore' to='/explore' />
|
||||
<SidebarSectionItem title='Pro Feed' icon='explore' to='/timeline/pro' />
|
||||
<SidebarSectionItem title='News' icon='news' to='/news' />
|
||||
<SidebarSectionItem title='More' icon='more' onClick={this.handleOpenSidebarMorePopover} buttonRef={this.setMoreButtonRef} active={moreOpen} />
|
||||
|
||||
{
|
||||
shortcutItems.length > 0 &&
|
||||
<React.Fragment>
|
||||
<SidebarSectionTitle>
|
||||
<div
|
||||
className={[_s.displayFlex, _s.aiCenter, _s.flexRow].join(' ')}
|
||||
onMouseEnter={this.handleMouseEnterShortcuts}
|
||||
onMouseLeave={this.handleMouseLeaveShortcuts}
|
||||
>
|
||||
<span>
|
||||
{intl.formatMessage(messages.shortcuts)}
|
||||
</span>
|
||||
<Button
|
||||
isText
|
||||
to='/shortcuts'
|
||||
color='brand'
|
||||
backgroundColor='none'
|
||||
className={_s.mlAuto}
|
||||
>
|
||||
{
|
||||
hoveringShortcuts &&
|
||||
<Text color='inherit' size='small' weight='medium' align='right'>
|
||||
{intl.formatMessage(messages.all)}
|
||||
</Text>
|
||||
}
|
||||
</Button>
|
||||
</div>
|
||||
</SidebarSectionTitle>
|
||||
{
|
||||
shortcutItems.map((shortcutItem, i) => (
|
||||
<SidebarSectionItem {...shortcutItem} key={`sidebar-item-shortcut-${i}`} />
|
||||
))
|
||||
}
|
||||
</React.Fragment>
|
||||
}
|
||||
|
||||
<SidebarSectionTitle>{intl.formatMessage(messages.explore)}</SidebarSectionTitle>
|
||||
<SidebarSectionItem title='Apps' icon='apps' href='https://apps.gab.com' />
|
||||
<SidebarSectionItem title='Shop' icon='shop' href='https://shop.dissenter.com' />
|
||||
<SidebarSectionItem title='Trends' icon='trends' href='https://trends.gab.com' />
|
||||
<SidebarSectionItem title='Dissenter' icon='dissenter' href='https://dissenter.com' />
|
||||
|
||||
</SidebarLayout>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const messages = defineMessages({
|
||||
explore: { id: 'explore', defaultMessage: 'Explore' },
|
||||
menu: { id: 'menu', defaultMessage: 'Menu' },
|
||||
shortcuts: { id: 'navigation_bar.shortcuts', defaultMessage: 'Shortcuts' },
|
||||
all: { id: 'all', defaultMessage: 'All' },
|
||||
})
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
shortcuts: state.getIn(['shortcuts', 'items']),
|
||||
moreOpen: state.getIn(['popover', 'popoverType']) === 'SIDEBAR_MORE',
|
||||
notificationCount: state.getIn(['notifications', 'unread']),
|
||||
homeItemsQueueCount: state.getIn(['timelines', 'home', 'totalQueuedItemsCount']),
|
||||
})
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
openSidebarMorePopover(props) {
|
||||
dispatch(openPopover('SIDEBAR_MORE', props))
|
||||
},
|
||||
onFetchShortcuts() {
|
||||
dispatch(fetchShortcuts())
|
||||
},
|
||||
})
|
||||
|
||||
DefaultSidebar.propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
moreOpen: PropTypes.bool,
|
||||
onFetchShortcuts: PropTypes.func.isRequired,
|
||||
openSidebarMorePopover: PropTypes.func.isRequired,
|
||||
notificationCount: PropTypes.number.isRequired,
|
||||
homeItemsQueueCount: PropTypes.number.isRequired,
|
||||
actions: PropTypes.array,
|
||||
tabs: PropTypes.array,
|
||||
title: PropTypes.string,
|
||||
showBackBtn: PropTypes.bool,
|
||||
shortcuts: ImmutablePropTypes.list,
|
||||
}
|
||||
|
||||
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(DefaultSidebar))
|
||||
@ -0,0 +1,45 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import { me } from '../../initial_state'
|
||||
import SidebarSectionTitle from '../sidebar_section_title'
|
||||
import SidebarSectionItem from '../sidebar_section_item'
|
||||
import SidebarLayout from './sidebar_layout'
|
||||
|
||||
class LoggedOutSidebar extends React.PureComponent {
|
||||
|
||||
render() {
|
||||
const { intl, title } = this.props
|
||||
|
||||
if (!!me) return null
|
||||
|
||||
return (
|
||||
<SidebarLayout title={title}>
|
||||
<SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
|
||||
<SidebarSectionItem title='Home' icon='home' to='/home' />
|
||||
<SidebarSectionItem title='Search' icon='search-alt' to='/search' />
|
||||
<SidebarSectionItem title='Groups' icon='group' to='/groups' />
|
||||
<SidebarSectionItem title='News' icon='news' to='/news' />
|
||||
|
||||
<SidebarSectionTitle>{intl.formatMessage(messages.explore)}</SidebarSectionTitle>
|
||||
<SidebarSectionItem title='Apps' icon='apps' href='https://apps.gab.com' />
|
||||
<SidebarSectionItem title='Shop' icon='shop' href='https://shop.dissenter.com' />
|
||||
<SidebarSectionItem title='Trends' icon='trends' href='https://trends.gab.com' />
|
||||
<SidebarSectionItem title='Dissenter' icon='dissenter' href='https://dissenter.com' />
|
||||
</SidebarLayout>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const messages = defineMessages({
|
||||
explore: { id: 'explore', defaultMessage: 'Explore' },
|
||||
menu: { id: 'menu', defaultMessage: 'Menu' },
|
||||
})
|
||||
|
||||
LoggedOutSidebar.propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
title: PropTypes.string,
|
||||
}
|
||||
|
||||
export default injectIntl(LoggedOutSidebar)
|
||||
@ -0,0 +1,43 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import { me } from '../../initial_state'
|
||||
import SidebarSectionTitle from '../sidebar_section_title'
|
||||
import SidebarSectionItem from '../sidebar_section_item'
|
||||
import SidebarLayout from './sidebar_layout'
|
||||
|
||||
class SettingsSidebar extends React.PureComponent {
|
||||
|
||||
render() {
|
||||
const { intl, title } = this.props
|
||||
|
||||
if (!me) return null
|
||||
|
||||
return (
|
||||
<SidebarLayout
|
||||
showBackBtn
|
||||
title={title}
|
||||
>
|
||||
<SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
|
||||
<SidebarSectionItem title={intl.formatMessage(messages.blocks)} to='/settings/blocks' />
|
||||
<SidebarSectionItem title={intl.formatMessage(messages.mutes)} to='/settings/mutes' />
|
||||
<SidebarSectionItem title={intl.formatMessage(messages.preferences)} to='/settings/preferences' />
|
||||
</SidebarLayout>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const messages = defineMessages({
|
||||
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
|
||||
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
|
||||
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
|
||||
menu: { id: 'menu', defaultMessage: 'Menu' },
|
||||
})
|
||||
|
||||
SettingsSidebar.propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
title: PropTypes.string,
|
||||
}
|
||||
|
||||
export default injectIntl(SettingsSidebar)
|
||||
122
app/javascript/gabsocial/components/sidebar/sidebar_layout.js
Normal file
122
app/javascript/gabsocial/components/sidebar/sidebar_layout.js
Normal file
@ -0,0 +1,122 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { connect } from 'react-redux'
|
||||
import {
|
||||
BREAKPOINT_SMALL,
|
||||
} from '../../constants'
|
||||
import Button from '../button'
|
||||
import { openModal } from '../../actions/modal'
|
||||
import Responsive from '../../features/ui/util/responsive_component'
|
||||
import Heading from '../heading'
|
||||
import BackButton from '../back_button'
|
||||
import Pills from '../pills'
|
||||
|
||||
class SidebarLayout extends React.PureComponent {
|
||||
|
||||
handleOpenComposeModal = () => {
|
||||
this.props.onOpenComposeModal()
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
actions,
|
||||
tabs,
|
||||
title,
|
||||
showBackBtn,
|
||||
children,
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
<header role='banner' className={[_s.d, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
|
||||
<div className={[_s.d, _s.w240PX].join(' ')}>
|
||||
<div className={[_s.d, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}>
|
||||
<div className={[_s.d, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
|
||||
<div className={[_s.d, _s.w100PC].join(' ')}>
|
||||
{
|
||||
!!title &&
|
||||
<div className={[_s.d, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
|
||||
{
|
||||
showBackBtn &&
|
||||
<BackButton
|
||||
icon='arrow-left'
|
||||
/>
|
||||
}
|
||||
<Heading size='h1'>
|
||||
{title}
|
||||
</Heading>
|
||||
{
|
||||
!!actions &&
|
||||
<div className={[_s.d, _s.bgTransparent, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.mlAuto].join(' ')}>
|
||||
{
|
||||
actions.map((action, i) => (
|
||||
<Button
|
||||
isNarrow
|
||||
backgroundColor='none'
|
||||
color='primary'
|
||||
onClick={action.onClick ? () => action.onClick() : undefined}
|
||||
to={action.to}
|
||||
key={`action-btn-${i}`}
|
||||
className={[_s.ml5, _s.px5].join(' ')}
|
||||
icon={action.icon}
|
||||
iconClassName={_s.cPrimary}
|
||||
iconSize='14px'
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
{
|
||||
!!tabs &&
|
||||
<div className={[_s.d, _s.mt10, _s.pb15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
|
||||
<Pills pills={tabs} />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<nav aria-label='Primary' role='navigation' className={[_s.d, _s.w100PC, _s.mb15].join(' ')}>
|
||||
{children}
|
||||
</nav>
|
||||
|
||||
<Responsive min={BREAKPOINT_SMALL}>
|
||||
<Button
|
||||
isBlock
|
||||
onClick={this.handleOpenComposeModal}
|
||||
className={[_s.py15, _s.fs15PX, _s.fw600].join(' ')}
|
||||
>
|
||||
Gab
|
||||
</Button>
|
||||
</Responsive>
|
||||
|
||||
<Responsive max={BREAKPOINT_SMALL}>
|
||||
<Button
|
||||
onClick={this.handleOpenComposeModal}
|
||||
className={_s.py15}
|
||||
icon='pencil'
|
||||
/>
|
||||
</Responsive>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onOpenComposeModal() {
|
||||
dispatch(openModal('COMPOSE'))
|
||||
},
|
||||
})
|
||||
|
||||
SidebarLayout.propTypes = {
|
||||
onOpenComposeModal: PropTypes.func.isRequired,
|
||||
actions: PropTypes.array,
|
||||
tabs: PropTypes.array,
|
||||
title: PropTypes.string,
|
||||
showBackBtn: PropTypes.bool,
|
||||
}
|
||||
|
||||
export default connect(null, mapDispatchToProps)(SidebarLayout)
|
||||
@ -5,8 +5,8 @@ import {
|
||||
BREAKPOINT_EXTRA_SMALL,
|
||||
} from '../constants'
|
||||
import { me } from '../initial_state'
|
||||
import NavigationBar from '../components/navigation_bar'
|
||||
import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
|
||||
import DefaultNavigationBar from '../components/navigation_bar/default_navigation_bar'
|
||||
import LoggedOutNavigationBar from '../components/navigation_bar/logged_out_navigation_bar'
|
||||
import FooterBar from '../components/footer_bar'
|
||||
import Responsive from '../features/ui/util/responsive_component'
|
||||
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
|
||||
@ -79,7 +79,7 @@ class SettingsLayout extends React.PureComponent {
|
||||
|
||||
{
|
||||
me &&
|
||||
<NavigationBar title={title} noSearch />
|
||||
<DefaultNavigationBar title={title} noSearch />
|
||||
}
|
||||
{
|
||||
!me &&
|
||||
|
||||
@ -6,11 +6,11 @@ import {
|
||||
BREAKPOINT_EXTRA_SMALL,
|
||||
} from '../constants'
|
||||
import { me } from '../initial_state'
|
||||
import LoggedOutSidebar from '../components/logged_out_sidebar'
|
||||
import Sidebar from '../components/sidebar'
|
||||
import LoggedOutSidebar from '../components/sidebar/logged_out_sidebar'
|
||||
import DefaultSidebar from '../components/sidebar/default_sidebar'
|
||||
import SidebarPanelGroup from '../components/sidebar_panel_group'
|
||||
import NavigationBar from '../components/navigation_bar'
|
||||
import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
|
||||
import DefaultNavigationBar from '../components/navigation_bar/default_navigation_bar'
|
||||
import LoggedOutNavigationBar from '../components/navigation_bar/logged_out_navigation_bar'
|
||||
import FooterBar from '../components/footer_bar'
|
||||
import FloatingActionButton from '../components/floating_action_button'
|
||||
import Responsive from '../features/ui/util/responsive_component'
|
||||
@ -58,7 +58,7 @@ class Layout extends React.PureComponent {
|
||||
|
||||
{
|
||||
me &&
|
||||
<NavigationBar
|
||||
<DefaultNavigationBar
|
||||
actions={actions}
|
||||
tabs={tabs}
|
||||
title={title}
|
||||
@ -76,7 +76,7 @@ class Layout extends React.PureComponent {
|
||||
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
|
||||
{
|
||||
!!me &&
|
||||
<Sidebar
|
||||
<DefaultSidebar
|
||||
actions={actions}
|
||||
showBackBtn={showBackBtn}
|
||||
tabs={tabs}
|
||||
|
||||
@ -6,12 +6,12 @@ import { BREAKPOINT_EXTRA_SMALL } from '../constants'
|
||||
import Sticky from 'react-stickynode'
|
||||
import { me } from '../initial_state'
|
||||
import { CX } from '../constants'
|
||||
import NavigationBar from '../components/navigation_bar'
|
||||
import DefaultNavigationBar from '../components/navigation_bar/default_navigation_bar'
|
||||
import FooterBar from '../components/footer_bar'
|
||||
import ProfileHeader from '../components/profile_header'
|
||||
import FloatingActionButton from '../components/floating_action_button'
|
||||
import ProfileNavigationBar from '../components/profile_navigation_bar'
|
||||
import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
|
||||
import ProfileNavigationBar from '../components/navigation_bar/profile_navigation_bar'
|
||||
import LoggedOutNavigationBar from '../components/navigation_bar/logged_out_navigation_bar'
|
||||
import Responsive from '../features/ui/util/responsive_component'
|
||||
import Divider from '../components/divider'
|
||||
import WrappedBundle from '../features/ui/util/wrapped_bundle'
|
||||
@ -91,7 +91,7 @@ class ProfileLayout extends ImmutablePureComponent {
|
||||
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
|
||||
{
|
||||
me &&
|
||||
<NavigationBar />
|
||||
<DefaultNavigationBar />
|
||||
}
|
||||
{
|
||||
!me &&
|
||||
|
||||
@ -5,11 +5,11 @@ import {
|
||||
BREAKPOINT_EXTRA_SMALL,
|
||||
} from '../constants'
|
||||
import { me } from '../initial_state'
|
||||
import NavigationBar from '../components/navigation_bar'
|
||||
import DefaultNavigationBar from '../components/navigation_bar/default_navigation_bar'
|
||||
import FooterBar from '../components/footer_bar'
|
||||
import Responsive from '../features/ui/util/responsive_component'
|
||||
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
|
||||
import SettingsSidebar from '../components/settings_sidebar'
|
||||
import SettingsSidebar from '../components/sidebar/settings_sidebar'
|
||||
import WrappedBundle from '../features/ui/util/wrapped_bundle'
|
||||
import {
|
||||
SidebarXS,
|
||||
@ -37,7 +37,7 @@ class SettingsLayout extends React.PureComponent {
|
||||
<WrappedBundle component={SidebarXS} />
|
||||
</Responsive>
|
||||
|
||||
<NavigationBar
|
||||
<DefaultNavigationBar
|
||||
title={title}
|
||||
noSearch
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user