a
/
badguardhome
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge + client: close sidebar menu on mobiles screen after choosing 

Close #1318

* commit '2c6e3d0e91af59304128e7a94b1f13362b4b4117':
  + client: add comment about order of settings dropdown order
  + client: close sidebar menu on mobiles screen after choosing
This commit is contained in:
Artem Baskal 2020-01-17 11:34:48 +03:00
parent e5a1026de1 2c6e3d0e91
commit 2bc2b342eb
2 changed files with 48 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
client/src/components/Header/Menu.js
View File

@ -8,6 +8,32 @@ import { Trans, withNamespaces } from 'react-i18next';
import { SETTINGS_URLS } from '../../helpers/constants'; import { SETTINGS_URLS } from '../../helpers/constants';
import Dropdown from '../ui/Dropdown'; import Dropdown from '../ui/Dropdown';
const MENU_ITEMS = [
{
route: '', exact: true, xlinkHref: 'dashboard', text: 'dashboard', order: 0,
},
// Settings dropdown should have visual order 1
{
route: 'filters', xlinkHref: 'filters', text: 'filters', order: 2,
},
{
route: 'logs', xlinkHref: 'log', text: 'query_log', order: 3,
},
{
route: 'guide', xlinkHref: 'setup', text: 'setup_guide', order: 4,
},
];
const DROPDOWN_ITEMS = [
{ route: 'settings', text: 'general_settings' },
{ route: 'dns', text: 'dns_settings' },
{ route: 'encryption', text: 'encryption_settings' },
{ route: 'clients', text: 'client_settings' },
{ route: 'dhcp', text: 'dhcp_settings' },
];
class Menu extends Component { class Menu extends Component {
handleClickOutside = () => { handleClickOutside = () => {
this.props.closeMenu(); this.props.closeMenu();
@ -36,70 +62,31 @@ class Menu extends Component {
<Fragment> <Fragment>
<div className={menuClass}> <div className={menuClass}>
<ul className="nav nav-tabs border-0 flex-column flex-lg-row flex-nowrap"> <ul className="nav nav-tabs border-0 flex-column flex-lg-row flex-nowrap">
<li className="nav-item border-bottom d-lg-none" onClick={this.toggleMenu}> {MENU_ITEMS.map(({
<div className="nav-link nav-link--back"> route, text, exact, xlinkHref, order,
<svg className="nav-icon"> }) => (
<use xlinkHref="#back" /> <li className={`nav-item order-${order}`} key={text} onClick={this.toggleMenu}>
</svg> <NavLink to={`/${route}`} exact={exact || false} className="nav-link">
<Trans>back</Trans> <svg className="nav-icon">
</div> <use xlinkHref={`#${xlinkHref}`} />
</li> </svg>
<li className="nav-item"> <Trans>{text}</Trans>
<NavLink to="/" exact={true} className="nav-link"> </NavLink>
<svg className="nav-icon"> </li>
<use xlinkHref="#dashboard" /> ))}
</svg>
<Trans>dashboard</Trans>
</NavLink>
</li>
<Dropdown <Dropdown
label={this.props.t('settings')} label={this.props.t('settings')}
baseClassName="dropdown nav-item" baseClassName="dropdown nav-item order-1"
controlClassName={dropdownControlClass} controlClassName={dropdownControlClass}
icon="settings" icon="settings"
> >
<Fragment> {DROPDOWN_ITEMS.map(({ route, text }) => (
<NavLink to="/settings" className="dropdown-item"> <NavLink to={`/${route}`} className="dropdown-item" key={text}
<Trans>general_settings</Trans> onClick={this.toggleMenu}>
<Trans>{text}</Trans>
</NavLink> </NavLink>
<NavLink to="/dns" className="dropdown-item"> ))}
<Trans>dns_settings</Trans>
</NavLink>
<NavLink to="/encryption" className="dropdown-item">
<Trans>encryption_settings</Trans>
</NavLink>
<NavLink to="/clients" className="dropdown-item">
<Trans>client_settings</Trans>
</NavLink>
<NavLink to="/dhcp" className="dropdown-item">
<Trans>dhcp_settings</Trans>
</NavLink>
</Fragment>
</Dropdown> </Dropdown>
<li className="nav-item">
<NavLink to="/filters" className="nav-link">
<svg className="nav-icon">
<use xlinkHref="#filters" />
</svg>
<Trans>filters</Trans>
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/logs" className="nav-link">
<svg className="nav-icon">
<use xlinkHref="#log" />
</svg>
<Trans>query_log</Trans>
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/guide" className="nav-link">
<svg className="nav-icon">
<use xlinkHref="#setup" />
</svg>
<Trans>setup_guide</Trans>
</NavLink>
</li>
</ul> </ul>
</div> </div>
</Fragment> </Fragment>

8
client/src/components/Header/index.js
View File

@ -38,7 +38,7 @@ class Header extends Component {
className="header-toggler d-lg-none ml-lg-0 collapsed" className="header-toggler d-lg-none ml-lg-0 collapsed"
onClick={this.toggleMenuOpen} onClick={this.toggleMenuOpen}
> >
<span className="header-toggler-icon"></span> <span className="header-toggler-icon" />
</div> </div>
<div className="header__column"> <div className="header__column">
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
@ -61,9 +61,9 @@ class Header extends Component {
<div className="header__column"> <div className="header__column">
<div className="header__right"> <div className="header__right">
{!dashboard.processingProfile && dashboard.name && {!dashboard.processingProfile && dashboard.name &&
<a href="/control/logout" className="btn btn-sm btn-outline-secondary"> <a href="/control/logout" className="btn btn-sm btn-outline-secondary">
<Trans>sign_out</Trans> <Trans>sign_out</Trans>
</a> </a>
} }
</div> </div>
</div> </div>