diff --git a/src/App.js b/src/App.js
index 282ac3a..a6844fc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -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() {
-
-
-
-
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/blocks/SideMenu.js b/src/components/blocks/SideMenu.js
new file mode 100644
index 0000000..b20ed54
--- /dev/null
+++ b/src/components/blocks/SideMenu.js
@@ -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 (
+
+
+ {props.icon}
+
+
+ {props.name}
+
+
+ );
+};
+
+const SideMenu = () => {
+ return (
+
+ } />
+ } />
+ } />
+ } />
+ } />
+
+ );
+};
+
+export default SideMenu;
diff --git a/src/components/templates/InternalTemplate.js b/src/components/templates/InternalTemplate.js
index da6d5bc..f7a3581 100644
--- a/src/components/templates/InternalTemplate.js
+++ b/src/components/templates/InternalTemplate.js
@@ -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 (
-
-
- {props.icon}
-
-
- {props.name}
-
-
- );
-};
-
const InternalTemplate = props => {
const history = useHistory();
const dispatch = useContext(NotificationDispatchContext);
@@ -136,36 +50,27 @@ const InternalTemplate = props => {
}, [history, dispatch]);
return (
-
-
- } />
- } />
- } />
- } />
- } />
-
-
- {props.breadcrumbs && (
-
- )}
- {props.title}
- {props.addButtonText && (
-
- )}
- {typeof props.subtitle === 'object'
- ? props.subtitle
- : {props.subtitle}
- }
-
- {props.children}
-
-
-
+
+ {props.breadcrumbs && (
+
+ )}
+ {props.title}
+ {props.addButtonText && (
+
+ )}
+ {typeof props.subtitle === 'object'
+ ? props.subtitle
+ : {props.subtitle}
+ }
+
+ {props.children}
+
+
);
};