Skip to content

Commit

Permalink
fix menu responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@jbalde
jbalde committed Nov 27, 2017
1 parent b10df73 commit b90a0f5
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 110 deletions.
61 changes: 33 additions & 28 deletions assets/js/views/pages/admin.js
View file
Expand Up @@ -36,13 +36,44 @@ class Admin extends Component {


render() {
const menuData = [
{link: '/', name: 'Home'},
{link: '/contacts', name: 'Contacts'},
{link: '/business', name: 'Business'},
{link: '/leads', name: 'Leads'},
{link: '/oportunities', name: 'Oportunities'},
{link: '/projects', name: 'Projects'},
{link: '/tasks', name: 'Tasks'},
{link: '/calendar', name: 'Calendar'},
{link: '/reports', name: 'Reports'}
];
const menuCollapse = [];
const menuLateral = [];
let counter = 0;

menuData.forEach((item) => {
menuLateral.push(<li key={`menu-lateral-${counter}`} className="nav-item">
<Link to={item.link} className="nav-link text-white">{item.name}</Link>
</li>);

menuCollapse.push(<li key={`menu-collapse-${counter}`} className="nav-item">
<Link to={item.link} className="nav-link">{item.name}</Link>
</li>);

counter++;
});


return (
<div className="h-100">
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<Link to="/" className="navbar-brand">Home</Link>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto d-block d-sm-none">{menuCollapse}</ul>
</div>
{/*
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
Expand Down Expand Up @@ -75,35 +106,9 @@ class Admin extends Component {
</nav>
<div className="container-fluid h-100">
<div className="row h-100">
<div className="col-2 bg-dark text-white">
<div className="col-2 bg-dark text-white d-none d-sm-block">
<ul className="nav flex-column">
<li className="nav-item">
<Link to="/" className="nav-link text-white">Home</Link>
</li>
<li className="nav-item">
<Link to="/contacts" className="nav-link text-white">Contacts</Link>
</li>
<li className="nav-item">
<Link to="/business" className="nav-link text-white">Business</Link>
</li>
<li className="nav-item">
<Link to="/leads" className="nav-link text-white">Leads</Link>
</li>
<li className="nav-item">
<Link to="/oportunities" className="nav-link text-white">Oportunities</Link>
</li>
<li className="nav-item">
<Link to="/projects" className="nav-link text-white">Projects</Link>
</li>
<li className="nav-item">
<Link to="/tasks" className="nav-link text-white">Tasks</Link>
</li>
<li className="nav-item">
<Link to="/calendar" className="nav-link text-white">Calendar</Link>
</li>
<li className="nav-item">
<Link to="/reports" className="nav-link text-white">Reports</Link>
</li>
{menuLateral}
{/*<li className="nav-item">
<Link to="/invoices" className="nav-link text-white">Invoices</Link>
</li>*/}
Expand Down
122 changes: 40 additions & 82 deletions client/js/douscrm.js
View file
Expand Up @@ -44501,6 +44501,35 @@ class Admin extends __WEBPACK_IMPORTED_MODULE_0_react__["Component"] {
}

render() {
const menuData = [{ link: '/', name: 'Home' }, { link: '/contacts', name: 'Contacts' }, { link: '/business', name: 'Business' }, { link: '/leads', name: 'Leads' }, { link: '/oportunities', name: 'Oportunities' }, { link: '/projects', name: 'Projects' }, { link: '/tasks', name: 'Tasks' }, { link: '/calendar', name: 'Calendar' }, { link: '/reports', name: 'Reports' }];
const menuCollapse = [];
const menuLateral = [];
let counter = 0;

menuData.forEach(item => {
menuLateral.push(__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'li',
{ key: `menu-lateral-${counter}`, className: 'nav-item' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
__WEBPACK_IMPORTED_MODULE_1_react_router_dom__["a" /* Link */],
{ to: item.link, className: 'nav-link text-white' },
item.name
)
));

menuCollapse.push(__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'li',
{ key: `menu-collapse-${counter}`, className: 'nav-item' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
__WEBPACK_IMPORTED_MODULE_1_react_router_dom__["a" /* Link */],
{ to: item.link, className: 'nav-link' },
item.name
)
));

counter++;
});

return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'h-100' },
Expand All @@ -44516,6 +44545,15 @@ class Admin extends __WEBPACK_IMPORTED_MODULE_0_react__["Component"] {
'button',
{ className: 'navbar-toggler', type: 'button', 'data-toggle': 'collapse', 'data-target': '#navbarSupportedContent', 'aria-controls': 'navbarSupportedContent', 'aria-expanded': 'false', 'aria-label': 'Toggle navigation' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'navbar-toggler-icon' })
),
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'collapse navbar-collapse', id: 'navbarSupportedContent' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'ul',
{ className: 'navbar-nav mr-auto d-block d-sm-none' },
menuCollapse
)
)
),
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
Expand All @@ -44526,91 +44564,11 @@ class Admin extends __WEBPACK_IMPORTED_MODULE_0_react__["Component"] {
{ className: 'row h-100' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'div',
{ className: 'col-2 bg-dark text-white' },
{ className: 'col-2 bg-dark text-white d-none d-sm-block' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'ul',
{ className: 'nav flex-column' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'li',
{ className: 'nav-item' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
__WEBPACK_IMPORTED_MODULE_1_react_router_dom__["a" /* Link */],
{ to: '/', className: 'nav-link text-white' },
'Home'
)
),
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'li',
{ className: 'nav-item' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
__WEBPACK_IMPORTED_MODULE_1_react_router_dom__["a" /* Link */],
{ to: '/contacts', className: 'nav-link text-white' },
'Contacts'
)
),
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'li',
{ className: 'nav-item' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
__WEBPACK_IMPORTED_MODULE_1_react_router_dom__["a" /* Link */],
{ to: '/business', className: 'nav-link text-white' },
'Business'
)
),
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'li',
{ className: 'nav-item' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
__WEBPACK_IMPORTED_MODULE_1_react_router_dom__["a" /* Link */],
{ to: '/leads', className: 'nav-link text-white' },
'Leads'
)
),
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'li',
{ className: 'nav-item' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
__WEBPACK_IMPORTED_MODULE_1_react_router_dom__["a" /* Link */],
{ to: '/oportunities', className: 'nav-link text-white' },
'Oportunities'
)
),
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'li',
{ className: 'nav-item' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
__WEBPACK_IMPORTED_MODULE_1_react_router_dom__["a" /* Link */],
{ to: '/projects', className: 'nav-link text-white' },
'Projects'
)
),
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'li',
{ className: 'nav-item' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
__WEBPACK_IMPORTED_MODULE_1_react_router_dom__["a" /* Link */],
{ to: '/tasks', className: 'nav-link text-white' },
'Tasks'
)
),
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'li',
{ className: 'nav-item' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
__WEBPACK_IMPORTED_MODULE_1_react_router_dom__["a" /* Link */],
{ to: '/calendar', className: 'nav-link text-white' },
'Calendar'
)
),
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
'li',
{ className: 'nav-item' },
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
__WEBPACK_IMPORTED_MODULE_1_react_router_dom__["a" /* Link */],
{ to: '/reports', className: 'nav-link text-white' },
'Reports'
)
)
menuLateral
)
),
__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
Expand Down

0 comments on commit b90a0f5

Please sign in to comment.