moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'reorder-nav' into 'develop' 

Rearrange navigation

See merge request soapbox-pub/soapbox-fe!818
This commit is contained in:
Alex Gleason 2021-10-23 19:43:31 +00:00
parent 1edfb0206a 47c68014d0
commit d677ef7cdf
4 changed files with 42 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/soapbox/components/primary_navigation.js
View File

@ -63,6 +63,14 @@ class PrimaryNavigation extends React.PureComponent {
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' /> <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
</NavLink> </NavLink>
<NavLink key='search' className='btn grouped' to='/search'>
<Icon
src={require('@tabler/icons/icons/search.svg')}
className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/search' })}
/>
<FormattedMessage id='navigation.search' defaultMessage='Search' />
</NavLink>
{account && ( {account && (
<NavLink key='notifications' className='btn grouped' to='/notifications' data-preview-title-id='column.notifications'> <NavLink key='notifications' className='btn grouped' to='/notifications' data-preview-title-id='column.notifications'>
<IconWithCounter <IconWithCounter
@ -98,14 +106,6 @@ class PrimaryNavigation extends React.PureComponent {
) )
)} )}
<NavLink key='search' className='btn grouped' to='/search'>
<Icon
src={require('@tabler/icons/icons/search.svg')}
className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/search' })}
/>
<FormattedMessage id='navigation.search' defaultMessage='Search' />
</NavLink>
{(account && isStaff(account)) && ( {(account && isStaff(account)) && (
<NavLink key='dashboard' className='btn grouped' to='/admin' data-preview-title-id='tabs_bar.dashboard'> <NavLink key='dashboard' className='btn grouped' to='/admin' data-preview-title-id='tabs_bar.dashboard'>
<IconWithCounter <IconWithCounter

20
app/soapbox/components/thumb_navigation.js
View File

@ -56,6 +56,16 @@ class ThumbNavigation extends React.PureComponent {
</span> </span>
</NavLink> </NavLink>
<NavLink to='/search' className='thumb-navigation__link'>
<Icon
src={require('@tabler/icons/icons/search.svg')}
className={classNames({ 'svg-icon--active': location.pathname === '/search' })}
/>
<span>
<FormattedMessage id='navigation.search' defaultMessage='Search' />
</span>
</NavLink>
{account && ( {account && (
<NavLink to='/notifications' className='thumb-navigation__link'> <NavLink to='/notifications' className='thumb-navigation__link'>
<IconWithCounter <IconWithCounter
@ -97,16 +107,6 @@ class ThumbNavigation extends React.PureComponent {
) )
)} )}
<NavLink to='/search' className='thumb-navigation__link'>
<Icon
src={require('@tabler/icons/icons/search.svg')}
className={classNames({ 'svg-icon--active': location.pathname === '/search' })}
/>
<span>
<FormattedMessage id='navigation.search' defaultMessage='Search' />
</span>
</NavLink>
{(account && isStaff(account)) && ( {(account && isStaff(account)) && (
<NavLink key='dashboard' to='/admin' className='thumb-navigation__link'> <NavLink key='dashboard' to='/admin' className='thumb-navigation__link'>
<IconWithCounter <IconWithCounter

2
app/soapbox/features/ui/components/tabs_bar.js
View File

@ -143,7 +143,7 @@ class TabsBar extends React.PureComponent {
</button> </button>
</> </>
) : ( ) : (
<div className='flex'> <div className='tabs-bar__unauthenticated'>
<Link className='tabs-bar__button button' to='/auth/sign_in'> <Link className='tabs-bar__button button' to='/auth/sign_in'>
<FormattedMessage id='account.login' defaultMessage='Log In' /> <FormattedMessage id='account.login' defaultMessage='Log In' />
</Link> </Link>

23
app/styles/components/tabs-bar.scss
View File

@ -47,6 +47,29 @@
} }
} }
@media screen and (max-width: 450px) {
// Move Profile menu to the left on mobile
&__split--right {
margin: 0;
order: -1;
width: 100%;
}
&__profile {
margin-left: 0;
}
&__unauthenticated {
display: flex;
justify-content: space-between;
width: 100%;
.tabs-bar__button {
margin: 0;
}
}
}
&__search-container { &__search-container {
display: block; display: block;
width: 351px; width: 351px;