+ client: close sidebar menu on mobiles screen after choosing
This commit is contained in:
Artem Baskal
parent
eb6c4eb132
commit
8e30c69e4a
|
|
@ -8,6 +8,29 @@ 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,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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 +59,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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue