mirror of
https://github.com/jambonz/jambonz-webapp.git
synced 2026-07-23 20:42:19 +00:00
Refactor side menu out of internal template into a separate file
This commit is contained in:
user
+38
-32
@@ -21,6 +21,7 @@ import InvalidRoute from './components/pages/InvalidRoute';
|
||||
|
||||
import Notification from './components/blocks/Notification';
|
||||
import Nav from './components/blocks/Nav';
|
||||
import SideMenu from './components/blocks/SideMenu';
|
||||
|
||||
function App() {
|
||||
const notifications = useContext(NotificationStateContext);
|
||||
@@ -36,41 +37,46 @@ function App() {
|
||||
<Route exact path="/configure-sip-trunk"><ConfigureSipTrunk /></Route>
|
||||
<Route exact path="/setup-complete"><SetupComplete /></Route>
|
||||
|
||||
<Route exact path="/internal/accounts"><AccountsList /></Route>
|
||||
<Route exact path="/internal/applications"><ApplicationsList /></Route>
|
||||
<Route exact path="/internal/sip-trunks"><SipTrunksList /></Route>
|
||||
<Route exact path="/internal/phone-numbers"><PhoneNumbersList /></Route>
|
||||
<Route path="/internal">
|
||||
<div style={{ display: "flex" }}>
|
||||
<SideMenu />
|
||||
<Route exact path="/internal/accounts"><AccountsList /></Route>
|
||||
<Route exact path="/internal/applications"><ApplicationsList /></Route>
|
||||
<Route exact path="/internal/sip-trunks"><SipTrunksList /></Route>
|
||||
<Route exact path="/internal/phone-numbers"><PhoneNumbersList /></Route>
|
||||
|
||||
<Route exact path={[
|
||||
"/internal/accounts/add",
|
||||
"/internal/accounts/:account_sid/edit"
|
||||
]}>
|
||||
<AccountsAddEdit />
|
||||
<Route exact path={[
|
||||
"/internal/accounts/add",
|
||||
"/internal/accounts/:account_sid/edit"
|
||||
]}>
|
||||
<AccountsAddEdit />
|
||||
</Route>
|
||||
|
||||
<Route exact path={[
|
||||
"/internal/applications/add",
|
||||
"/internal/applications/:application_sid/edit"
|
||||
]}>
|
||||
<ApplicationsAddEdit />
|
||||
</Route>
|
||||
|
||||
<Route exact path={[
|
||||
"/internal/sip-trunks/add",
|
||||
"/internal/sip-trunks/:voip_carrier_sid/edit"
|
||||
]}>
|
||||
<SipTrunksAddEdit />
|
||||
</Route>
|
||||
|
||||
<Route exact path={[
|
||||
"/internal/phone-numbers/add",
|
||||
"/internal/phone-numbers/:phone_number_sid/edit"
|
||||
]}>
|
||||
<PhoneNumbersAddEdit />
|
||||
</Route>
|
||||
|
||||
<Route exact path="/internal/settings"><Settings /></Route>
|
||||
</div>
|
||||
</Route>
|
||||
|
||||
<Route exact path={[
|
||||
"/internal/applications/add",
|
||||
"/internal/applications/:application_sid/edit"
|
||||
]}>
|
||||
<ApplicationsAddEdit />
|
||||
</Route>
|
||||
|
||||
<Route exact path={[
|
||||
"/internal/sip-trunks/add",
|
||||
"/internal/sip-trunks/:voip_carrier_sid/edit"
|
||||
]}>
|
||||
<SipTrunksAddEdit />
|
||||
</Route>
|
||||
|
||||
<Route exact path={[
|
||||
"/internal/phone-numbers/add",
|
||||
"/internal/phone-numbers/:phone_number_sid/edit"
|
||||
]}>
|
||||
<PhoneNumbersAddEdit />
|
||||
</Route>
|
||||
|
||||
<Route exact path="/internal/settings"><Settings /></Route>
|
||||
|
||||
<Route><InvalidRoute /></Route>
|
||||
</Switch>
|
||||
</Router>
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
import React, { useContext } from 'react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import styled from 'styled-components/macro';
|
||||
import { ModalStateContext } from '../../contexts/ModalContext';
|
||||
import { ReactComponent as AccountsIcon } from '../../images/AccountsIcon.svg';
|
||||
import { ReactComponent as ApplicationsIcon } from '../../images/ApplicationsIcon.svg';
|
||||
import { ReactComponent as SipTrunksIcon } from '../../images/SipTrunksIcon.svg';
|
||||
import { ReactComponent as PhoneNumbersIcon } from '../../images/PhoneNumbersIcon.svg';
|
||||
import { ReactComponent as SettingsIcon } from '../../images/SettingsIcon.svg';
|
||||
|
||||
const StyledSideMenu = styled.div`
|
||||
width: 15rem;
|
||||
flex-shrink: 0;
|
||||
height: calc(100vh - 4rem);
|
||||
overflow: auto;
|
||||
background: #FFF;
|
||||
padding-top: 3.25rem;
|
||||
`;
|
||||
|
||||
const activeClassName = 'nav-item-active';
|
||||
|
||||
const StyledNavLink = styled(NavLink).attrs({ activeClassName })`
|
||||
height: 2.75rem;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: #565656;
|
||||
fill: #565656;
|
||||
|
||||
&.${activeClassName} {
|
||||
box-shadow: inset 3px 0 0 0 #D91C5C;
|
||||
color: #D91C5C;
|
||||
fill: #D91C5C;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 3px #D91C5C;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: RGBA(217, 28, 92, 0.1);
|
||||
color: #C0134D;
|
||||
fill: #C0134D;
|
||||
}
|
||||
&.${activeClassName}:hover {
|
||||
color: #D91C5C;
|
||||
fill: #D91C5C;
|
||||
}
|
||||
`;
|
||||
|
||||
const IconContainer = styled.span`
|
||||
width: 3rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
outline: 0;
|
||||
`;
|
||||
|
||||
const MenuText = styled.span`
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
outline: 0;
|
||||
`;
|
||||
|
||||
const MenuLink = props => {
|
||||
const modalOpen = useContext(ModalStateContext);
|
||||
return (
|
||||
<StyledNavLink
|
||||
to={props.to}
|
||||
activeClassName={activeClassName}
|
||||
tabIndex={modalOpen ? '-1' : ''}
|
||||
>
|
||||
<IconContainer tabIndex="-1">
|
||||
{props.icon}
|
||||
</IconContainer>
|
||||
<MenuText tabIndex="-1">
|
||||
{props.name}
|
||||
</MenuText>
|
||||
</StyledNavLink>
|
||||
);
|
||||
};
|
||||
|
||||
const SideMenu = () => {
|
||||
return (
|
||||
<StyledSideMenu>
|
||||
<MenuLink to="/internal/accounts" name="Accounts" icon={<AccountsIcon />} />
|
||||
<MenuLink to="/internal/applications" name="Applications" icon={<ApplicationsIcon />} />
|
||||
<MenuLink to="/internal/sip-trunks" name="SIP Trunks" icon={<SipTrunksIcon />} />
|
||||
<MenuLink to="/internal/phone-numbers" name="Phone Numbers" icon={<PhoneNumbersIcon />} />
|
||||
<MenuLink to="/internal/settings" name="Settings" icon={<SettingsIcon />} />
|
||||
</StyledSideMenu>
|
||||
);
|
||||
};
|
||||
|
||||
export default SideMenu;
|
||||
@@ -1,79 +1,11 @@
|
||||
import React, { useEffect, useContext } from 'react';
|
||||
import { NavLink, useHistory } from 'react-router-dom';
|
||||
import { ModalStateContext } from '../../contexts/ModalContext';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { NotificationDispatchContext } from '../../contexts/NotificationContext';
|
||||
import styled from 'styled-components/macro';
|
||||
import H1 from '../elements/H1';
|
||||
import { ReactComponent as AccountsIcon } from '../../images/AccountsIcon.svg';
|
||||
import { ReactComponent as ApplicationsIcon } from '../../images/ApplicationsIcon.svg';
|
||||
import { ReactComponent as SipTrunksIcon } from '../../images/SipTrunksIcon.svg';
|
||||
import { ReactComponent as PhoneNumbersIcon } from '../../images/PhoneNumbersIcon.svg';
|
||||
import { ReactComponent as SettingsIcon } from '../../images/SettingsIcon.svg';
|
||||
import AddButton from '../elements/AddButton';
|
||||
import Breadcrumbs from '../blocks/Breadcrumbs';
|
||||
|
||||
const PageContainer = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const SideMenu = styled.div`
|
||||
width: 15rem;
|
||||
flex-shrink: 0;
|
||||
height: calc(100vh - 4rem);
|
||||
overflow: auto;
|
||||
background: #FFF;
|
||||
padding-top: 3.25rem;
|
||||
`;
|
||||
|
||||
const activeClassName = 'nav-item-active';
|
||||
|
||||
const StyledNavLink = styled(NavLink).attrs({ activeClassName })`
|
||||
height: 2.75rem;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: #565656;
|
||||
fill: #565656;
|
||||
|
||||
&.${activeClassName} {
|
||||
box-shadow: inset 3px 0 0 0 #D91C5C;
|
||||
color: #D91C5C;
|
||||
fill: #D91C5C;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 3px #D91C5C;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: RGBA(217, 28, 92, 0.1);
|
||||
color: #C0134D;
|
||||
fill: #C0134D;
|
||||
}
|
||||
&.${activeClassName}:hover {
|
||||
color: #D91C5C;
|
||||
fill: #D91C5C;
|
||||
}
|
||||
`;
|
||||
|
||||
const IconContainer = styled.span`
|
||||
width: 3rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
outline: 0;
|
||||
`;
|
||||
|
||||
const MenuText = styled.span`
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
outline: 0;
|
||||
`;
|
||||
|
||||
const PageMain = styled.main`
|
||||
height: calc(100vh - 4rem);
|
||||
width: calc(100% - 15rem);
|
||||
@@ -102,24 +34,6 @@ const ContentContainer = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const MenuLink = props => {
|
||||
const modalOpen = useContext(ModalStateContext);
|
||||
return (
|
||||
<StyledNavLink
|
||||
to={props.to}
|
||||
activeClassName={activeClassName}
|
||||
tabIndex={modalOpen ? '-1' : ''}
|
||||
>
|
||||
<IconContainer tabIndex="-1">
|
||||
{props.icon}
|
||||
</IconContainer>
|
||||
<MenuText tabIndex="-1">
|
||||
{props.name}
|
||||
</MenuText>
|
||||
</StyledNavLink>
|
||||
);
|
||||
};
|
||||
|
||||
const InternalTemplate = props => {
|
||||
const history = useHistory();
|
||||
const dispatch = useContext(NotificationDispatchContext);
|
||||
@@ -136,36 +50,27 @@ const InternalTemplate = props => {
|
||||
}, [history, dispatch]);
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<SideMenu>
|
||||
<MenuLink to="/internal/accounts" name="Accounts" icon={<AccountsIcon />} />
|
||||
<MenuLink to="/internal/applications" name="Applications" icon={<ApplicationsIcon />} />
|
||||
<MenuLink to="/internal/sip-trunks" name="SIP Trunks" icon={<SipTrunksIcon />} />
|
||||
<MenuLink to="/internal/phone-numbers" name="Phone Numbers" icon={<PhoneNumbersIcon />} />
|
||||
<MenuLink to="/internal/settings" name="Settings" icon={<SettingsIcon />} />
|
||||
</SideMenu>
|
||||
<PageMain>
|
||||
{props.breadcrumbs && (
|
||||
<Breadcrumbs breadcrumbs={props.breadcrumbs} />
|
||||
)}
|
||||
<H1>{props.title}</H1>
|
||||
{props.addButtonText && (
|
||||
<AddButton
|
||||
addButtonText={props.addButtonText}
|
||||
to={props.addButtonLink}
|
||||
/>
|
||||
)}
|
||||
{typeof props.subtitle === 'object'
|
||||
? props.subtitle
|
||||
: <P>{props.subtitle}</P>
|
||||
}
|
||||
<ContentContainer
|
||||
type={props.type}
|
||||
>
|
||||
{props.children}
|
||||
</ContentContainer>
|
||||
</PageMain>
|
||||
</PageContainer>
|
||||
<PageMain>
|
||||
{props.breadcrumbs && (
|
||||
<Breadcrumbs breadcrumbs={props.breadcrumbs} />
|
||||
)}
|
||||
<H1>{props.title}</H1>
|
||||
{props.addButtonText && (
|
||||
<AddButton
|
||||
addButtonText={props.addButtonText}
|
||||
to={props.addButtonLink}
|
||||
/>
|
||||
)}
|
||||
{typeof props.subtitle === 'object'
|
||||
? props.subtitle
|
||||
: <P>{props.subtitle}</P>
|
||||
}
|
||||
<ContentContainer
|
||||
type={props.type}
|
||||
>
|
||||
{props.children}
|
||||
</ContentContainer>
|
||||
</PageMain>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user