mirror of
https://github.com/dzeiocom/components.git
synced 2025-04-22 10:52:16 +00:00
Updated Navbar Component
Signed-off-by: Florian BOUILLON <florian.bouillon@delta-wings.net>
This commit is contained in:
parent
803915999b
commit
60f0ec23fc
@ -1,49 +1,124 @@
|
||||
@import "../config"
|
||||
@import '../config'
|
||||
|
||||
.navbar
|
||||
width 100%
|
||||
height 70px
|
||||
padding 16px
|
||||
position absolute
|
||||
top 0
|
||||
.body
|
||||
margin-left 300px
|
||||
transition margin-left $transition
|
||||
|
||||
&.short
|
||||
margin-left 56px
|
||||
|
||||
.sidebar
|
||||
background $foregroundLight
|
||||
@media (prefers-color-scheme dark)
|
||||
background $foregroundDark
|
||||
position fixed
|
||||
left 0
|
||||
border-bottom 1px solid white
|
||||
top 0
|
||||
height 100vh
|
||||
width 300px
|
||||
z-index 100
|
||||
display flex
|
||||
flex-direction column
|
||||
&
|
||||
transition width $transition
|
||||
.header
|
||||
.userSpace
|
||||
.header .imgContainer
|
||||
> ul span
|
||||
// transition all $transition
|
||||
transition-property width, padding, margin, max-width
|
||||
transition-duration $transitionTime
|
||||
transition-timing-function $transitionFunction
|
||||
overflow hidden
|
||||
> ul span
|
||||
width calc(100% - 40px)
|
||||
max-width 100%
|
||||
|
||||
&.small
|
||||
padding-left 216px
|
||||
.userSpaceParent
|
||||
background $backgroundLight
|
||||
@media (prefers-color-scheme dark)
|
||||
background $backgroundDark
|
||||
|
||||
.alignRight
|
||||
text-align right
|
||||
.userSpace
|
||||
cursor pointer
|
||||
user-select none
|
||||
padding 16px
|
||||
width 100%
|
||||
max-width 100%
|
||||
min-height 56px
|
||||
p
|
||||
overflow hidden
|
||||
p:last-child:not(:first-child)
|
||||
margin-top 8px
|
||||
font-style italic
|
||||
font-size rem(14)
|
||||
|
||||
.favicon img
|
||||
height 38px
|
||||
border-radius 8px
|
||||
border 2px solid white
|
||||
padding 2px
|
||||
background white
|
||||
width 38px
|
||||
p:first-child
|
||||
font-weight 500
|
||||
svg
|
||||
vertical-align top
|
||||
transition transform $transition
|
||||
&.menuActive
|
||||
transform rotateX(180deg)
|
||||
|
||||
.userIcon img
|
||||
padding 0
|
||||
cursor pointer
|
||||
.userMenu
|
||||
max-height 0px
|
||||
transition all $transition
|
||||
|
||||
.text
|
||||
display inline-block
|
||||
margin 0
|
||||
height 38px
|
||||
line-height 1
|
||||
font-weight bold
|
||||
font-size rem(20)
|
||||
padding 7px 0 11px 16px
|
||||
text-decoration none
|
||||
color white
|
||||
cursor pointer
|
||||
ul
|
||||
padding-bottom 16px
|
||||
a
|
||||
padding 16px 0
|
||||
|
||||
.spacer
|
||||
height 70px
|
||||
&.menuActive
|
||||
// TODO find better way to animate this shit
|
||||
max-height 100%
|
||||
|
||||
.icon
|
||||
padding 7px 16px
|
||||
color white
|
||||
box-sizing content-box
|
||||
cursor pointer
|
||||
&.short
|
||||
width 56px
|
||||
.header > div
|
||||
padding 0
|
||||
.header .imgContainer
|
||||
.userSpace
|
||||
> ul span
|
||||
width 0
|
||||
padding 0
|
||||
margin 0
|
||||
max-width 0
|
||||
|
||||
.header
|
||||
min-height 70px
|
||||
> div
|
||||
padding 0
|
||||
&:first-child
|
||||
padding 16px
|
||||
p > div
|
||||
padding 16px
|
||||
|
||||
hr
|
||||
margin 0
|
||||
|
||||
ul
|
||||
list-style none
|
||||
margin 0
|
||||
padding 0
|
||||
|
||||
> ul li
|
||||
width 100%
|
||||
p
|
||||
padding 16px 0
|
||||
display flex
|
||||
align-items center
|
||||
// TODO Currently Gradient aren't supported by Transition
|
||||
// transition-property background-image, color
|
||||
// transition-duration $transitionTime
|
||||
// transition-timing-function $transitionFunction
|
||||
&:hover
|
||||
&.active
|
||||
background-image $mainGradient
|
||||
color white
|
||||
svg
|
||||
margin-left 16px
|
||||
span
|
||||
padding-left 16px
|
||||
height inherit
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
import css from './Navbar.module.styl'
|
||||
|
||||
export default class NavbarSpace extends React.Component {
|
||||
|
||||
public render = () => (
|
||||
<div className={css.spacer}></div>
|
||||
)
|
||||
|
||||
}
|
||||
@ -1,48 +1,128 @@
|
||||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
import Row from '../Row'
|
||||
import Router from 'next/router'
|
||||
|
||||
import Image, { ImageProps } from 'next/image'
|
||||
import React, { FC } from 'react'
|
||||
import { ChevronDown, ChevronsRight, X } from 'react-feather'
|
||||
import Text from '../Text'
|
||||
import Col from '../Col'
|
||||
import Image from '../Image'
|
||||
import Row from '../Row'
|
||||
import Link from '../Link'
|
||||
import { buildClassName } from '../Util'
|
||||
|
||||
import css from './Navbar.module.styl'
|
||||
|
||||
|
||||
interface Props {
|
||||
logo?: {
|
||||
link?: string
|
||||
label?: string
|
||||
src: string
|
||||
alt?: string
|
||||
type: 'navbar' | 'sidebar'
|
||||
logo: ImageProps
|
||||
user?: {
|
||||
name: string
|
||||
description?: string
|
||||
settings?: string
|
||||
menu?: {
|
||||
links: Array<{
|
||||
path: string
|
||||
name: string
|
||||
}>
|
||||
informations?: JSX.Element
|
||||
}
|
||||
}
|
||||
items: Array<{
|
||||
path: string
|
||||
icon: FC
|
||||
name: string
|
||||
}>
|
||||
}
|
||||
|
||||
export default class Navbar extends React.Component<Props> {
|
||||
interface State {
|
||||
path?: string
|
||||
short: boolean
|
||||
menuActive: boolean
|
||||
}
|
||||
|
||||
export default class Navbar extends React.Component<Props, State> {
|
||||
|
||||
public state: State = {
|
||||
short: false,
|
||||
menuActive: false
|
||||
}
|
||||
|
||||
public componentDidMount() {
|
||||
this.setState({path: Router.asPath})
|
||||
Router.events.on('routeChangeComplete', () => {
|
||||
this.setState({path: Router.asPath})
|
||||
})
|
||||
document.body.classList.add(css.body)
|
||||
if (this.state.short) {
|
||||
document.body.classList.add(css.short)
|
||||
}
|
||||
}
|
||||
|
||||
public componentDidUpdate() {
|
||||
if (this.state.short) {
|
||||
document.body.classList.add(css.short)
|
||||
} else {
|
||||
document.body.classList.remove(css.short)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
public componentWillUnmount() {
|
||||
document.body.classList.remove(css.body, css.short)
|
||||
}
|
||||
|
||||
public render = () => (
|
||||
<nav className={css.navbar}>
|
||||
<Row nomargin>
|
||||
{this.props.logo && (
|
||||
<Col>
|
||||
<Row align="center">
|
||||
<Link href={this.props.logo.link || '/'}>
|
||||
<a aria-label={this.props.logo.label || 'Homepage'}>
|
||||
<Image
|
||||
alt={this.props.logo.alt}
|
||||
src={this.props.logo.src}
|
||||
height={38}
|
||||
width={120}
|
||||
/>
|
||||
</a>
|
||||
</Link>
|
||||
</Row>
|
||||
</Col>
|
||||
)}
|
||||
|
||||
<Col>
|
||||
<Row justify="flex-end" align="center">
|
||||
{this.props.children}
|
||||
</Row>
|
||||
</Col>
|
||||
<nav className={buildClassName(css.sidebar, [css.short, this.state.short])}>
|
||||
<Row nomargin className={css.header} align="center">
|
||||
<Col className={css.imgContainer}><Link href="/"><Image {...this.props.logo} /></Link></Col>
|
||||
<Col nogrow><Text><div onClick={() => this.setState({short: !this.state.short, menuActive: false})}>
|
||||
{this.state.short ? (
|
||||
<ChevronsRight size={30} />
|
||||
) : (
|
||||
<X size={30} />
|
||||
)}
|
||||
</div></Text></Col>
|
||||
</Row>
|
||||
<hr/>
|
||||
<ul>
|
||||
{this.props.items.map((item) => (
|
||||
<li key={item.path}><Link href={item.path}><a>
|
||||
<Text className={buildClassName([css.active, this.state.path?.startsWith(item.path)])} >
|
||||
<item.icon />
|
||||
<span>{item.name}</span>
|
||||
</Text>
|
||||
</a></Link></li>
|
||||
))}
|
||||
</ul>
|
||||
<div style={{flex: 1}}></div>
|
||||
{/* Spacer */}
|
||||
{this.props.user && (
|
||||
<>
|
||||
<div className={css.userSpaceParent}>
|
||||
<hr/>
|
||||
<div onClick={() => this.setState({menuActive: !this.state.menuActive})} className={css.userSpace}>
|
||||
<Text>
|
||||
{this.props.user.name}
|
||||
<ChevronDown className={buildClassName([css.menuActive, this.state.menuActive])} />
|
||||
</Text>
|
||||
{this.props.user.description && (
|
||||
<Text>{this.props.user.description}</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={buildClassName(css.userMenu, [css.menuActive, this.state.menuActive])}>
|
||||
<Row nomargin>
|
||||
<Col></Col>
|
||||
<Col>
|
||||
<ul>
|
||||
{this.props.user.menu?.links.map((l) => (
|
||||
<li key={l.path}><Text><Link href={l.path}>{l.name}</Link></Text></li>
|
||||
))}
|
||||
</ul>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
@ -13,7 +13,6 @@ import Link from './dzeio/Link'
|
||||
import Loader from './dzeio/Loader'
|
||||
import Menu from './dzeio/Menu'
|
||||
import Navbar from './dzeio/Navbar'
|
||||
import NavbarSpace from './dzeio/Navbar/NavbarSpace'
|
||||
import Overflow from './dzeio/Overflow'
|
||||
import Popup from './dzeio/Popup'
|
||||
import Row from './dzeio/Row'
|
||||
@ -38,7 +37,6 @@ export {
|
||||
Loader,
|
||||
Menu,
|
||||
Navbar,
|
||||
NavbarSpace,
|
||||
Overflow,
|
||||
Popup,
|
||||
Row,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user