-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
36 changed files
with
719 additions
and
310 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
.container { | ||
max-width: var(--container-width); | ||
margin: 70px auto 0; | ||
margin: var(--row-height) auto 0; | ||
position: relative; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -11,10 +11,6 @@ | |
grid-template-columns: 250px 1fr; | ||
} | ||
|
||
.grid__left { | ||
|
||
} | ||
|
||
.grid__right { | ||
position: relative; | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
.breadcrumbs { | ||
&__list { | ||
display: flex; | ||
list-style: none; | ||
margin: 0; | ||
max-width: var(--container-width); | ||
padding: var(--spacing-large) max(calc((100vw - var(--container-width)) / 2), var(--spacing-large)); | ||
} | ||
|
||
&__list-item { | ||
display: flex; | ||
align-items: center; | ||
white-space: nowrap; | ||
} | ||
|
||
&__list-item > *[class*=icon], | ||
&__list-item > *[class*=Icon] { | ||
margin: 0 var(--spacing-medium); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,102 @@ | ||
import React from 'react'; | ||
import {Link, useLocation} from 'react-router-dom'; | ||
import ChevronRightOutlinedIcon from '@mui/icons-material/ChevronRightOutlined'; | ||
import {ROUTES} from "../../routes/routes"; | ||
import {iRoute} from "../../types/route"; | ||
import './Breadcrumbs.scss'; | ||
|
||
|
||
interface iBreadCrumb { | ||
part: string, | ||
path: string, | ||
route: iRoute, | ||
label?: string | ||
shouldRenderIcon?: boolean | ||
} | ||
|
||
|
||
/** | ||
* Returns the breadcrumbs based the current location and matched routes. | ||
* @return {JSX.Element} | ||
*/ | ||
export function Breadcrumbs() { | ||
const location = useLocation(); | ||
|
||
/** | ||
* Returns an iBreadCrumb[] based on the current location and matched routes. | ||
* @return {iBreadCrumb[]} | ||
*/ | ||
const getBreadCrumbs = () => { | ||
// Root required exception. | ||
if (location.pathname === '/') { | ||
const route = Object.values(ROUTES).find((route: iRoute) => route.path === `/`) | ||
|
||
if (!route) { | ||
return []; | ||
} | ||
return [{part: '', path: '/', route: route, shouldRenderIcon: true}] | ||
} | ||
|
||
// Recurse routes. | ||
const paths = location.pathname.split('/') | ||
.reduce((acc: iBreadCrumb[], part: string) => { | ||
const currentPath = acc.map((breadCrumb) => breadCrumb.part).join('/') | ||
const path = `${currentPath}/${part}`; | ||
let label = null; | ||
let route = Object.values(ROUTES).find((route: iRoute) => route.path === `/${part}`) | ||
|
||
if (!route) { | ||
route = Object.values(ROUTES).find((route: iRoute) => route.path.match(`${currentPath}/:[a-zA-Z-_]`)) | ||
|
||
if (typeof route?.label === 'function') { | ||
label = route.label(part); | ||
} | ||
} | ||
|
||
return [...acc, { | ||
part: part, | ||
label: label, | ||
path: path, | ||
route: route, | ||
shouldRenderIcon: path === '/' | ||
}] as iBreadCrumb[]; | ||
}, []) | ||
return paths | ||
} | ||
|
||
/** | ||
* Returns the label for the breadcrumb. | ||
* @param {iBreadCrumb} breadcrumb | ||
* @return {string} | ||
*/ | ||
const getBreadCrumbLabel = (breadcrumb: iBreadCrumb): string => { | ||
return breadcrumb.label || breadcrumb.route.label as string; | ||
} | ||
|
||
/** | ||
* Renders the breadcrumbs. | ||
* @return {JSX.Element} | ||
*/ | ||
const renderBreadCrumbs = () => getBreadCrumbs().map((breadCrumb: iBreadCrumb, index: number) => { | ||
const Icon = breadCrumb.route.icon; | ||
const linkClassName = (index === getBreadCrumbs().length - 1) ? 'link' : 'link link--active'; | ||
|
||
return ( | ||
<li key={index} className="breadcrumbs__list-item"> | ||
{index > 0 && <ChevronRightOutlinedIcon/>} | ||
<Link className={linkClassName} to={breadCrumb.path}> | ||
{breadCrumb.shouldRenderIcon && Icon && <Icon/>} | ||
{getBreadCrumbLabel(breadCrumb)} | ||
</Link> | ||
</li> | ||
); | ||
}); | ||
|
||
return ( | ||
<nav className="breadcrumbs"> | ||
<ul className="breadcrumbs__list"> | ||
{renderBreadCrumbs()} | ||
</ul> | ||
</nav> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
|
||
/// | ||
/// Header. | ||
/// | ||
|
||
.header { | ||
display: grid; | ||
grid-template-areas: "pad-before actions pad-after" | ||
"pad-before logo pad-after" | ||
"nav nav nav" | ||
"breadcrumbs breadcrumbs breadcrumbs"; | ||
grid-template-columns: var(--spacing-large) 1fr var(--spacing-large); | ||
grid-template-rows: auto auto auto auto; | ||
|
||
@media (min-width: 768px) { | ||
grid-template-areas: "pad-before logo actions pad-after" | ||
"nav nav nav nav" | ||
"breadcrumbs breadcrumbs breadcrumbs breadcrumbs"; | ||
grid-template-columns: max(calc((100vw - var(--container-width)) / 2), var(--spacing-large)) 1fr 1fr max(calc((100vw - var(--container-width)) / 2), var(--spacing-large)); | ||
grid-template-rows: auto auto auto; | ||
} | ||
|
||
/// Logo. | ||
.logo { | ||
grid-area: logo | ||
} | ||
|
||
/// Actions. | ||
&__actions { | ||
align-items: baseline; | ||
display: flex; | ||
grid-area: actions; | ||
justify-content: space-between; | ||
|
||
@media (min-width: 768px) { | ||
justify-content: flex-end; | ||
margin-top: var(--row-height); | ||
} | ||
|
||
} | ||
|
||
&__actions &__list { | ||
list-style: none; | ||
margin: 0; | ||
padding: 0; | ||
} | ||
|
||
&__actions &__list-item { | ||
display: inline; | ||
margin-left: var(--spacing-extra-large); | ||
} | ||
|
||
/// Primary navigation. | ||
.primary-navigation { | ||
grid-area: nav; | ||
} | ||
|
||
/// Breadcrumbs. | ||
.breadcrumbs { | ||
grid-area: breadcrumbs; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,81 @@ | ||
import React, {useContext} from 'react'; | ||
import {NavLink} from "react-router-dom"; | ||
import {logout} from '../../api/calls'; | ||
import {globalContext} from '../../store'; | ||
import {Breadcrumbs} from './Breadcrumbs'; | ||
import {Logo} from './Logo'; | ||
import PrimaryNavigation from './PrimaryNavigation'; | ||
import './Header.scss'; | ||
import './Link.scss'; | ||
|
||
|
||
/** | ||
* Renders the header including all the navigation. | ||
* @return {JSX.Element} | ||
*/ | ||
export function Header() { | ||
const {globalState, dispatch} = useContext(globalContext); | ||
|
||
/** | ||
* Logout. | ||
*/ | ||
async function handleLogout() { | ||
await logout(); | ||
await dispatch({type: 'PURGE_STATE'}); | ||
} | ||
|
||
/** | ||
* Returns the welcome message. | ||
* @return {JSX.Element} | ||
*/ | ||
const getWelcomeMessage = () => { | ||
return ( | ||
<p className="link"> | ||
{globalState.user && `Welkom ${globalState.user.firstName} ${globalState.user.lastName}`} | ||
{!globalState.user && 'Welkom'} | ||
</p> | ||
) | ||
}; | ||
|
||
/** | ||
* Returns the login/logout link(s). | ||
* @return {JSX.Element} | ||
*/ | ||
const getLoginLinks = () => { | ||
if (globalState.user) { | ||
return ( | ||
<ul className="header__list"> | ||
<li className="header__list-item"> | ||
<NavLink className="link" onClick={handleLogout} to="#">Uitloggen</NavLink> | ||
</li> | ||
</ul> | ||
); | ||
} | ||
|
||
return ( | ||
<ul className="header__list"> | ||
<li className="header__list-item"> | ||
<NavLink className="link" to="/register">Registreren</NavLink> | ||
</li> | ||
|
||
<li className="header__list-item"> | ||
<NavLink className="link link--primary" activeClassName="link--active" to="/login">Inloggen</NavLink> | ||
</li> | ||
</ul> | ||
); | ||
}; | ||
|
||
return ( | ||
<header className="header"> | ||
<Logo src="https://www.zwolle.nl/sites/all/themes/custom/zwolle_redesign/logo.png" alt="Logo van gemeente"/> | ||
|
||
<nav className="header__actions"> | ||
{getWelcomeMessage()} | ||
{getLoginLinks()} | ||
</nav> | ||
|
||
<PrimaryNavigation/> | ||
<Breadcrumbs/> | ||
</header> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
/// | ||
/// Navigation link. | ||
/// | ||
|
||
.link { | ||
color: var(--font-color-body); | ||
display: inline-flex; | ||
align-items: center; | ||
font-family: var(--font-family-body); | ||
font-size: var(--font-size-body); | ||
line-height: var(--font-line-height-body); | ||
text-decoration: none; | ||
|
||
&--active, | ||
&--primary, | ||
&:active, | ||
&:focus, | ||
&:hover { | ||
color: var(--color-primary); | ||
} | ||
|
||
&--active { | ||
text-decoration: underline; | ||
} | ||
|
||
&:hover { | ||
text-decoration: underline; | ||
} | ||
|
||
*[class*=icon], | ||
*[class*=Icon] { | ||
margin-right: var(--spacing-tiny) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import React from 'react'; | ||
import {Link} from 'react-router-dom'; | ||
|
||
interface LogoProps { | ||
src: string, | ||
alt: string, | ||
} | ||
|
||
export function Logo(props: LogoProps) { | ||
return ( | ||
<Link className="logo" to="/"> | ||
<img src={props.src} alt={props.alt}/> | ||
</Link> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
/// | ||
/// Primary navigation. | ||
/// | ||
|
||
.primary-navigation { | ||
position: relative; | ||
|
||
&:before { | ||
content: ''; | ||
|
||
border-bottom: var(--border-width) solid; | ||
border-image: var(--border-image); | ||
border-image-slice: 1; | ||
left: 0; | ||
position: absolute; | ||
bottom: 0; | ||
width: 100%; | ||
z-index: -1; | ||
} | ||
|
||
/// Top list. | ||
|
||
& > &__list { | ||
box-sizing: content-box; | ||
display: flex; | ||
list-style: none; | ||
margin: auto; | ||
max-width: var(--container-width); | ||
padding: 0 var(--spacing-large); | ||
width: 100%; | ||
} | ||
|
||
& > &__list > &__list-item { | ||
display: flex; | ||
align-items: center; | ||
height: var(--row-height); | ||
padding: var(--spacing-large); | ||
box-sizing: content-box; | ||
|
||
&:first-child { | ||
padding-left: 0; | ||
} | ||
|
||
&:last-child { | ||
padding-right: 0; | ||
} | ||
} | ||
|
||
/// Nested list. | ||
|
||
& > &__list > &__list-item > &__list { | ||
background-color: var(--color-accent); | ||
box-sizing: border-box; | ||
padding: var(--spacing-large) max(calc((100vw - var(--container-width)) / 2), var(--spacing-large)); | ||
position: absolute; | ||
left: 0; | ||
list-style: none; | ||
margin: 0; | ||
top: 100%; | ||
transform: scaleY(0); | ||
width: 100%; | ||
z-index: 100; | ||
|
||
@media (min-width: 768px) { | ||
column-count: 4; | ||
} | ||
} | ||
|
||
& > &__list > &__list-item > &__list > &__list-item { | ||
line-height: var(--row-height); | ||
} | ||
|
||
/// Interaction. | ||
|
||
& > &__list > &__list-item:focus &__list, | ||
& > &__list > &__list-item:focus-within &__list, | ||
& > &__list > &__list-item:hover &__list { | ||
transform: scaleY(1); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
import React, {useContext, useState} from 'react'; | ||
import {generatePath, Link} from 'react-router-dom'; | ||
import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined'; | ||
import {NAVIGATION} from '../../routes/navigation'; | ||
import {globalContext} from '../../store'; | ||
import {iMenuItem} from '../../types/menu-item'; | ||
import './Link.scss' | ||
import './PrimaryNavigation.scss' | ||
|
||
|
||
interface iPrimaryNavigationProps { | ||
menuItems: iMenuItem[], | ||
} | ||
|
||
/** | ||
* Renders the primary navigation. | ||
* Prop menuItems can be set to contains an iMenuItem[] (defaults to NAVIGATION). Children of top level menu items can | ||
* contain a "children" key containing either a nested iMenuItem[] or an async function returning a Promise for an | ||
* iMenuItem[] | ||
* | ||
* @return {JSX.Element} | ||
*/ | ||
export default function PrimaryNavigation(props: iPrimaryNavigationProps) { | ||
const {globalState} = useContext(globalContext); | ||
const [resolvedNavigation, setResolvedNavigation] = useState(props.menuItems); | ||
const [tick, setTick] = useState(0); | ||
|
||
// Run optionally async children function. | ||
props.menuItems.forEach(async (menuItem) => { | ||
if (!menuItem.children) { | ||
return; | ||
} | ||
|
||
if (typeof menuItem.children !== "function") { | ||
return; | ||
} | ||
|
||
menuItem.children = await menuItem.children() | ||
setResolvedNavigation(props.menuItems); | ||
setTick(tick + 1); | ||
}); | ||
|
||
|
||
/** | ||
* Renders menuItems as list. | ||
* @param {iMenuItem[]} menuItems | ||
* @param {boolean} shouldRenderIcons=true | ||
* @return JSX.Element | ||
*/ | ||
const renderMenuItems = (menuItems: iMenuItem[], shouldRenderIcons: boolean) => ( | ||
<ul className="primary-navigation__list"> | ||
{menuItems.filter && menuItems.filter((menuItem: iMenuItem) => globalState.user || !menuItem.route.loginRequired).map((menuItem: iMenuItem, index: number) => { | ||
const label = (menuItem.label) ? menuItem.label : menuItem.route.label; | ||
const to = (menuItem.routeParams) ? generatePath(menuItem.route.path, menuItem.routeParams) : menuItem.route.path; | ||
const Icon = menuItem.route.icon; | ||
|
||
return ( | ||
<li key={index} className="primary-navigation__list-item"> | ||
<Link className="link" to={to}> | ||
{shouldRenderIcons && Icon && <Icon/>} | ||
{label} | ||
{menuItem.children && <KeyboardArrowDownOutlinedIcon/>} | ||
</Link> | ||
{menuItem.children && renderMenuItems(menuItem.children as iMenuItem[], false)} | ||
</li> | ||
); | ||
})} | ||
</ul> | ||
) | ||
|
||
return ( | ||
<nav className="primary-navigation"> | ||
{renderMenuItems(resolvedNavigation, true)} | ||
</nav> | ||
); | ||
} | ||
|
||
PrimaryNavigation.defaultProps = { | ||
menuItems: NAVIGATION, | ||
} |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,15 @@ | ||
import React from 'react'; | ||
import { Grid } from '../Components/Container/Grid'; | ||
import SideMenu from '../Components/Menu/SideMenu'; | ||
import HeaderMenu from '../Components/Header/SideMenu'; | ||
|
||
export default function Home() { | ||
const getLeft = () => ( | ||
<SideMenu /> | ||
); | ||
const getRight = () => ( | ||
<> | ||
Home | ||
</> | ||
); | ||
|
||
return ( | ||
<Grid isLoggedIn fixedLeft left={getLeft()} right={getRight()} /> | ||
<Grid isLoggedIn right={getRight()} /> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import {getCategories} from '../api/calls'; | ||
import {iCategory} from '../types/pdc'; | ||
import {iMenuItem} from '../types/menu-item'; | ||
import {ROUTES} from './routes'; | ||
|
||
|
||
/** | ||
* Returns a promise for an iRoute[] based on the categories. | ||
* @return {Promise} | ||
*/ | ||
const getThemeNavigation = async () => { | ||
const categories = await getCategories(); | ||
return categories.map((category: iCategory): iMenuItem => ({ | ||
label: category.name, | ||
route: ROUTES.CATEGORY, | ||
routeParams: {slug: category.slug} | ||
})); | ||
} | ||
|
||
/** | ||
* The main navigation. | ||
*/ | ||
export const NAVIGATION: iMenuItem[] = [ | ||
{route: ROUTES.HOME}, | ||
{route: ROUTES.CATEGORIES, children: getThemeNavigation}, | ||
{route: ROUTES.PROFILE}, | ||
{route: ROUTES.INBOX}, | ||
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,105 @@ | ||
import AppsOutlinedIcon from "@mui/icons-material/AppsOutlined"; | ||
import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined"; | ||
import InboxOutlinedIcon from "@mui/icons-material/InboxOutlined"; | ||
import AccountCircleOutlinedIcon from "@mui/icons-material/AccountCircleOutlined"; | ||
import ArticleOutlinedIcon from '@mui/icons-material/ArticleOutlined'; | ||
import Home from "../pages/Home"; | ||
import {iRoute} from "../types/route"; | ||
import NotFoundPage from "../pages/NotFound"; | ||
import About from "../pages/About"; | ||
import ProductDetail from "../pages/Product/detail"; | ||
import ThemeDetail from "../pages/Themas/detail"; | ||
import Themas from "../pages/Themas"; | ||
import Register from "../pages/Register"; | ||
import Login from "../pages/Login"; | ||
|
||
|
||
/** | ||
* The routes for the application. | ||
*/ | ||
export const ROUTES: { [index: string]: iRoute } = { | ||
HOME: { | ||
component: Home, | ||
label: 'Home', | ||
path: '/', | ||
exact: true, | ||
icon: AppsOutlinedIcon, | ||
loginRequired: false, | ||
}, | ||
LOGIN: { | ||
component: Login, | ||
label: 'Inloggen', | ||
path: '/login', | ||
exact: true, | ||
icon: AccountCircleOutlinedIcon, | ||
loginRequired: false, | ||
}, | ||
REGISTER: { | ||
component: Register, | ||
label: 'Registreren', | ||
path: '/register', | ||
exact: true, | ||
icon: AccountCircleOutlinedIcon, | ||
loginRequired: false, | ||
}, | ||
PROFILE: { | ||
component: Home, // TODO | ||
label: 'Mijn profiel', | ||
path: '/account', | ||
exact: true, | ||
icon: AccountCircleOutlinedIcon, | ||
loginRequired: true | ||
}, | ||
INBOX: { | ||
component: Home, // TODO | ||
label: 'Mijn berichten', | ||
path: '/account/inbox', | ||
exact: true, | ||
icon: InboxOutlinedIcon, | ||
loginRequired: true | ||
}, | ||
CATEGORIES: { | ||
component: Themas, | ||
label: 'Thema\'s', | ||
path: '/themas', | ||
exact: true, | ||
icon: DescriptionOutlinedIcon, | ||
loginRequired: false, | ||
}, | ||
CATEGORY: { | ||
component: ThemeDetail, | ||
label: (slug: string): string => { | ||
if(!slug) { | ||
return 'Thema'; | ||
} | ||
const str = slug.replace(/[-_]/g, ' '); | ||
return str.split(' ').reduce((label: string, word: string): string => `${label} ${word[0].toUpperCase()}${word.slice(1)}`, ''); | ||
}, | ||
path: '/themas/:slug', | ||
exact: true, | ||
icon: ArticleOutlinedIcon, | ||
loginRequired: false, | ||
}, | ||
PRODUCT: { | ||
component: ProductDetail, | ||
label: 'Product', | ||
path: '/product/:slug', | ||
exact: true, | ||
loginRequired: false, | ||
}, | ||
ABOUT: { | ||
component: About, | ||
label: 'Over', | ||
path: '/about', | ||
exact: true, | ||
loginRequired: true, | ||
}, | ||
NOTFOUND: { | ||
component: NotFoundPage, | ||
label: '404', | ||
path: '*', | ||
loginRequired: false, | ||
}, | ||
} | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
export interface iBreadcrumb { | ||
icon: boolean, | ||
name: string, | ||
to: string, | ||
} | ||
// export interface iBreadcrumb { | ||
// icon: boolean, | ||
// name: string, | ||
// to: string, | ||
// } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import {iRoute} from "./route"; | ||
|
||
export interface iMenuItem { | ||
route: iRoute, | ||
routeParams?: {[index: string]: string}, | ||
children?: iMenuItem[] | Function, | ||
label?: string | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import {ComponentType} from "react"; | ||
|
||
export interface iRoute { | ||
component: ComponentType | ||
label: string|Function, | ||
path: string, | ||
exact?: boolean, | ||
icon?: ComponentType, | ||
loginRequired?: boolean | ||
meta?: Object, | ||
} |