Admin nav
parent
fa0f6d28b0
commit
2e32f09042
@ -1,24 +1,30 @@
|
||||
import React from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import Link from 'next/link'
|
||||
import useIsAdminPage from '~/hooks/useIsAdminPage'
|
||||
|
||||
import styles from './adminNav.module.css'
|
||||
import NavItem from './navItem'
|
||||
|
||||
export default function AdminNav({}){
|
||||
const {asPath: fullpath} = useRouter()
|
||||
const withoutQuery = fullpath.split('?')[0]
|
||||
import styles from './adminNav.module.css'
|
||||
|
||||
const adminRoutes = new RegExp('^/admin(/.*|$)')
|
||||
export default function AdminNav({children}){
|
||||
const isAdminPage = useIsAdminPage()
|
||||
|
||||
if(!withoutQuery.match(adminRoutes))
|
||||
return null
|
||||
if(!isAdminPage)
|
||||
return children
|
||||
|
||||
return (
|
||||
<div className={styles.adminBar}>
|
||||
<Link href="/admin/items"><a>Items</a></Link>
|
||||
<Link href="/admin/categories"><a>Categories</a></Link>
|
||||
<Link href="/admin/users"><a>Users</a></Link>
|
||||
<Link href="/admin/shipping"><a>Shipping</a></Link>
|
||||
<div className={styles.navContainer}>
|
||||
<div className={styles.nav}>
|
||||
<NavItem icon="apps" href="/admin">Dashboard</NavItem>
|
||||
<NavItem icon="local_offer" href="/admin/items">Items</NavItem>
|
||||
<NavItem icon="category" href="/admin/categories">Categories</NavItem>
|
||||
<NavItem icon="shopping_cart" href="/admin/orders">Orders</NavItem>
|
||||
<NavItem icon="supervisor_account" href="/admin/users">Users</NavItem>
|
||||
<NavItem icon="local_shipping" href="/admin/shipments">Shipments</NavItem>
|
||||
<NavItem icon="payment" href="/admin/coupons">Coupons</NavItem>
|
||||
</div>
|
||||
<div className={styles.notNav}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,28 +1,66 @@
|
||||
.adminBar + header {
|
||||
position: relative;
|
||||
top: -40px;
|
||||
.navContainer {
|
||||
width: 100%;
|
||||
height: calc(100vh - 115px);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.adminBar + header::after {
|
||||
background: none;
|
||||
.nav {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
width: 200px;
|
||||
background: white;
|
||||
box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
|
||||
}
|
||||
|
||||
div.adminBar {
|
||||
position: relative;
|
||||
top: 100px;
|
||||
margin-top: 0;
|
||||
.notNav {
|
||||
flex: 1;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.navItem {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: #9c27b0;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: 200px;
|
||||
height: 42px;
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navItem:hover::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.navItem.selected {
|
||||
background: #e1bee7;
|
||||
}
|
||||
|
||||
a.navItem {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
a.navItem.selected {
|
||||
color: white;
|
||||
}
|
||||
|
||||
a.navItem :global(.rmwc-icon) {
|
||||
font-size: 18px;
|
||||
margin-right: 12px;
|
||||
width: 18px;
|
||||
overflow: hidden;
|
||||
color: #e1bee7;
|
||||
}
|
||||
|
||||
.adminBar > a {
|
||||
a.navItem.selected :global(.rmwc-icon) {
|
||||
color: white;
|
||||
font-family: 'Cormorant SC', serif;
|
||||
padding: 5px;
|
||||
margin: 0 25px;
|
||||
}
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
import React from 'react'
|
||||
import {useRouter} from 'next/router'
|
||||
import Link from 'next/link'
|
||||
import {Icon} from '@rmwc/icon'
|
||||
|
||||
import styles from './adminNav.module.css'
|
||||
|
||||
export default function NavItem({href, icon, children}) {
|
||||
const {asPath: fullpath} = useRouter()
|
||||
const withoutQuery = fullpath.split('?')[0]
|
||||
|
||||
const selected = (fullpath === href || (href !== '/admin' && fullpath.includes(href + '/')))
|
||||
|
||||
return (
|
||||
<Link href={href}>
|
||||
<a className={styles.navItem + (selected ? ' ' + styles.selected: '')}>
|
||||
<Icon icon={icon} />
|
||||
{children}
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
import {useRouter} from 'next/router'
|
||||
|
||||
export default function useIsAdminPage(){
|
||||
const {asPath: fullpath} = useRouter()
|
||||
const withoutQuery = fullpath.split('?')[0]
|
||||
|
||||
const adminRoutes = new RegExp('^/admin(/.*|$)')
|
||||
|
||||
return withoutQuery.match(adminRoutes)
|
||||
}
|
||||
Loading…
Reference in New Issue