mirror of
https://github.com/dzeiocom/components.git
synced 2025-08-05 03:01:57 +00:00
236
src/Navbar/Navbar.module.styl
Normal file
236
src/Navbar/Navbar.module.styl
Normal file
@@ -0,0 +1,236 @@
|
||||
@import '../config'
|
||||
|
||||
// $transition = 10s linear
|
||||
// $transitionTime = 10s
|
||||
// $transitionFunction = linear
|
||||
.body-sidebar
|
||||
margin-left 300px
|
||||
transition margin-left $transition
|
||||
&.short
|
||||
margin-left 56px
|
||||
|
||||
.body-navbar
|
||||
margin-top 70px
|
||||
|
||||
.navbar
|
||||
background $foregroundLight
|
||||
@media (prefers-color-scheme dark)
|
||||
background $foregroundDark
|
||||
position fixed
|
||||
left 0
|
||||
top 0
|
||||
height 70px
|
||||
width 100%
|
||||
z-index 100
|
||||
display flex
|
||||
padding 16px
|
||||
|
||||
> ul, .userSpaceParent ul
|
||||
display flex
|
||||
|
||||
li:first-child p
|
||||
margin-left 0
|
||||
|
||||
> ul p, .userSpaceParent > ul p
|
||||
padding 8px
|
||||
|
||||
margin-left 16px
|
||||
border-radius 4px
|
||||
|
||||
&.active
|
||||
background $mainGradient
|
||||
color $textOnMain
|
||||
|
||||
.userSpace
|
||||
|
||||
height 100%
|
||||
display flex
|
||||
align-items center
|
||||
cursor pointer
|
||||
user-select none
|
||||
svg
|
||||
margin-left 16px
|
||||
vertical-align top
|
||||
|
||||
.userMenu
|
||||
position fixed
|
||||
top 70px
|
||||
right 0
|
||||
border-bottom-left-radius 4px
|
||||
transform translateX(100%)
|
||||
background inherit
|
||||
transition transform $transition
|
||||
&.menuActive
|
||||
transform translateX(0%)
|
||||
|
||||
|
||||
.sidebar
|
||||
background $foregroundLight
|
||||
@media (prefers-color-scheme dark)
|
||||
background $foregroundDark
|
||||
position fixed
|
||||
left 0
|
||||
top 0
|
||||
height 100vh
|
||||
width 300px
|
||||
z-index 100
|
||||
display flex
|
||||
flex-direction column
|
||||
|
||||
&.mobile
|
||||
width 100%
|
||||
z-index 101
|
||||
|
||||
&
|
||||
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%
|
||||
.header p
|
||||
cursor pointer
|
||||
|
||||
.userSpaceParent
|
||||
background $backgroundLight
|
||||
@media (prefers-color-scheme dark)
|
||||
background $backgroundDark
|
||||
|
||||
> ul, .userSpaceParent ul
|
||||
display flex
|
||||
padding 16px
|
||||
justify-content center
|
||||
|
||||
li:first-child p
|
||||
margin-left 0
|
||||
|
||||
> ul p, .userSpaceParent > ul p
|
||||
padding 8px
|
||||
|
||||
margin-left 16px
|
||||
border-radius 4px
|
||||
|
||||
&.active
|
||||
background $mainGradient
|
||||
color $textOnMain
|
||||
|
||||
.userSpace
|
||||
cursor pointer
|
||||
user-select none
|
||||
padding 16px
|
||||
width 100%
|
||||
max-width 100%
|
||||
min-height 86px
|
||||
p
|
||||
overflow hidden
|
||||
white-space nowrap
|
||||
p:last-child:not(:first-child)
|
||||
margin-top 8px
|
||||
font-style italic
|
||||
font-size rem(14)
|
||||
|
||||
p:first-child
|
||||
font-weight 500
|
||||
svg
|
||||
vertical-align top
|
||||
transition transform $transition
|
||||
&.menuActive
|
||||
transform rotateX(180deg)
|
||||
|
||||
.userMenu
|
||||
max-height 0px
|
||||
transition all $transition
|
||||
|
||||
&.menuActive
|
||||
// TODO find better way to animate this shit
|
||||
max-height 100%
|
||||
|
||||
&.short
|
||||
width 88px
|
||||
.header > div
|
||||
padding 0
|
||||
.header .imgContainer
|
||||
.userSpace
|
||||
> ul span
|
||||
width 0
|
||||
padding-left 0
|
||||
padding-right 0
|
||||
margin 0
|
||||
max-width 0
|
||||
|
||||
|
||||
.header
|
||||
min-height 70px
|
||||
padding 0
|
||||
margin 0
|
||||
> div p > div
|
||||
> div:first-child
|
||||
padding 16px
|
||||
> div:last-child
|
||||
padding 0
|
||||
|
||||
hr
|
||||
margin 0
|
||||
|
||||
> ul li
|
||||
width 100%
|
||||
p
|
||||
padding 16px 0
|
||||
display flex
|
||||
align-items center
|
||||
z-index 111
|
||||
position relative
|
||||
|
||||
// Temporary fix the transition for linear-gradient
|
||||
&::before
|
||||
transition opacity $transition
|
||||
opacity 0
|
||||
width 100%
|
||||
height 100%
|
||||
content " "
|
||||
position absolute
|
||||
z-index -1
|
||||
background-image $mainGradient
|
||||
&:hover
|
||||
&.active
|
||||
color $textOnMain
|
||||
&::before
|
||||
opacity 1
|
||||
svg
|
||||
margin-left 16px
|
||||
span
|
||||
padding-left 16px
|
||||
height inherit
|
||||
|
||||
.navbar
|
||||
.sidebar
|
||||
ul
|
||||
list-style none
|
||||
margin 0
|
||||
padding 0
|
||||
|
||||
.userMenu
|
||||
padding 8px 16px
|
||||
a
|
||||
display inline-block
|
||||
padding-bottom 16px
|
||||
|
||||
|
||||
.mobileMenu
|
||||
opacity 0
|
||||
transition opacity $transition
|
||||
pointer-events none
|
||||
&.shown
|
||||
opacity 1
|
||||
pointer-events initial
|
||||
|
||||
.mainGradient
|
||||
//WIP
|
||||
fill $mainGradient
|
||||
44
src/Navbar/Navbar.stories.tsx
Normal file
44
src/Navbar/Navbar.stories.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { Meta, Story } from '@storybook/react/types-6-0'
|
||||
import React from 'react'
|
||||
import { Zap, ZapOff } from 'lucide-react'
|
||||
import Component from '.'
|
||||
import Text from '../Text'
|
||||
|
||||
export default {
|
||||
title: 'DZEIO/Navbar',
|
||||
component: Component,
|
||||
parameters: {
|
||||
layout: 'fullscreen'
|
||||
}
|
||||
} as Meta
|
||||
|
||||
export const Basic: Story<any> = (args: any) => <Component {...args} />
|
||||
Basic.args = {
|
||||
type: 'navbar',
|
||||
logo: {src: '/90-38.svg', width: 90, height: 38},
|
||||
loginUrl: '/login',
|
||||
registerUrl: '/register',
|
||||
user: {
|
||||
name: 'Username',
|
||||
description: 'User Description',
|
||||
menu: {
|
||||
links: [{
|
||||
path: '/logout',
|
||||
name: 'Logout'
|
||||
}, {
|
||||
path: '/logout',
|
||||
name: 'Logout'
|
||||
}],
|
||||
informations: (<Text>Testing :D</Text>)
|
||||
}
|
||||
},
|
||||
items: [{
|
||||
path: '/dashboard',
|
||||
name: 'Dasboard',
|
||||
icon: Zap
|
||||
}, {
|
||||
path: '/dashboard',
|
||||
name: 'Dasboard',
|
||||
icon: ZapOff
|
||||
}],
|
||||
}
|
||||
274
src/Navbar/index.tsx
Normal file
274
src/Navbar/index.tsx
Normal file
@@ -0,0 +1,274 @@
|
||||
import Router from 'next/router'
|
||||
|
||||
import Image, { ImageProps } from 'next/image'
|
||||
import React from 'react'
|
||||
import { ChevronDown, ChevronsRight, Menu, X } from 'lucide-react'
|
||||
import Text from '../Text'
|
||||
import Col from '../Col'
|
||||
import Row from '../Row'
|
||||
import Link from '../Link'
|
||||
import { buildClassName } from '../Util'
|
||||
|
||||
import css from './Navbar.module.styl'
|
||||
import { Icon } from '../interfaces'
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* Type of Navbar
|
||||
* _note: when in mobile it is not listened_
|
||||
*/
|
||||
type: 'navbar' | 'sidebar'
|
||||
|
||||
/**
|
||||
* Logo to display
|
||||
*/
|
||||
logo?: ImageProps & {height: number, width: number}
|
||||
/**
|
||||
* Login URL
|
||||
*/
|
||||
loginUrl?: string
|
||||
/**
|
||||
* Login URL
|
||||
*/
|
||||
registerUrl?: string
|
||||
/**
|
||||
* User Informations if loggedin
|
||||
*/
|
||||
user?: {
|
||||
/**
|
||||
* Username
|
||||
*/
|
||||
name: string
|
||||
/**
|
||||
* User Short description
|
||||
*/
|
||||
description?: string
|
||||
/**
|
||||
* User Menu
|
||||
*/
|
||||
menu?: {
|
||||
/**
|
||||
* Menu links
|
||||
*/
|
||||
links: Array<{
|
||||
path: string
|
||||
name: string
|
||||
}>
|
||||
/**
|
||||
* Custom informations shown next to the links
|
||||
*/
|
||||
informations?: JSX.Element
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Links to display
|
||||
*/
|
||||
items: Array<{
|
||||
path: string
|
||||
icon?: Icon
|
||||
name: string
|
||||
}>
|
||||
/**
|
||||
* Internal Use don't use it !
|
||||
*/
|
||||
mobileMenu?: () => void
|
||||
}
|
||||
|
||||
interface State {
|
||||
path?: string
|
||||
short: boolean
|
||||
isMobile: boolean
|
||||
menuActive: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Navbar/Sidebar Component
|
||||
* @version 1.0.3
|
||||
*/
|
||||
export default class Navbar extends React.Component<Props, State> {
|
||||
|
||||
public state: State = {
|
||||
short: false,
|
||||
isMobile: false,
|
||||
menuActive: false
|
||||
}
|
||||
|
||||
public componentDidMount() {
|
||||
this.setState({
|
||||
path: Router.asPath,
|
||||
menuActive: !!this.props.mobileMenu
|
||||
})
|
||||
Router.events.on('routeChangeComplete', () => {
|
||||
this.setState({path: Router.asPath, menuActive: false})
|
||||
})
|
||||
Router.events.on('routeChangeError', () => {
|
||||
this.setState({path: Router.asPath, menuActive: false})
|
||||
})
|
||||
if (!this.props.mobileMenu) {
|
||||
window.addEventListener('resize', this.onResize)
|
||||
this.onResize()
|
||||
}
|
||||
}
|
||||
|
||||
public onResize = () => {
|
||||
const isMobile = window.innerWidth <= 768
|
||||
if (this.state.isMobile !== isMobile) {
|
||||
this.setState({isMobile})
|
||||
}
|
||||
}
|
||||
|
||||
public componentDidUpdate() {
|
||||
if (!this.props.mobileMenu) {
|
||||
if (this.state.short) {
|
||||
document.body.classList.add(css.short)
|
||||
} else {
|
||||
document.body.classList.remove(css.short)
|
||||
}
|
||||
if (this.getType() === 'sidebar') {
|
||||
document.body.classList.add(css['body-sidebar'])
|
||||
document.body.classList.remove(css['body-navbar'])
|
||||
} else {
|
||||
document.body.classList.remove(css['body-sidebar'])
|
||||
document.body.classList.add(css['body-navbar'])
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public componentWillUnmount() {
|
||||
if (!this.props.mobileMenu) {
|
||||
document.body.classList.remove(css.short, css[`body-${this.getType()}`])
|
||||
window.removeEventListener('resize', this.onResize)
|
||||
}
|
||||
}
|
||||
|
||||
public onSidebarButton = () => {
|
||||
if (!this.props.mobileMenu) {
|
||||
this.setState({short: !this.state.short, menuActive: false})
|
||||
} else {
|
||||
this.props.mobileMenu()
|
||||
}
|
||||
}
|
||||
|
||||
public menuCloseCallback = () => {
|
||||
this.setState({menuActive: false})
|
||||
}
|
||||
|
||||
public getType(): 'sidebar' | 'navbar' {
|
||||
if (this.props.mobileMenu) {
|
||||
return 'sidebar'
|
||||
}
|
||||
return this.state.isMobile ? 'navbar' : this.props.type
|
||||
}
|
||||
|
||||
public render = () => (
|
||||
<>
|
||||
<nav className={buildClassName(css[this.getType()], [css.short, this.state.short && !this.props.mobileMenu], [css.mobile, this.props.mobileMenu])}>
|
||||
<Row nowrap className={css.header} align="center">
|
||||
{this.props.logo && (
|
||||
<Col className={css.imgContainer}>
|
||||
<Link href="/">
|
||||
<Image {...this.props.logo} height={34} width={this.props.logo.width*34/this.props.logo.height} />
|
||||
</Link>
|
||||
</Col>
|
||||
)}
|
||||
{this.getType() === 'sidebar' && (
|
||||
<Col nogrow><Text><div onClick={this.onSidebarButton}>
|
||||
{this.state.short ? (
|
||||
<ChevronsRight size={30} />
|
||||
) : (
|
||||
<X size={30} />
|
||||
)}
|
||||
</div></Text></Col>
|
||||
)}
|
||||
</Row>
|
||||
{this.getType() === 'sidebar' && (
|
||||
<hr/>
|
||||
)}
|
||||
<ul>
|
||||
{!this.state.isMobile && this.props.items.map((item) => (
|
||||
<li key={item.path}><Link noStyle href={item.path}>
|
||||
<Text className={buildClassName([css.active, this.state.path?.startsWith(item.path)])}>
|
||||
{this.getType() === 'sidebar' && item.icon && (
|
||||
<item.icon />
|
||||
)}
|
||||
<span>{item.name}</span>
|
||||
</Text>
|
||||
</Link></li>
|
||||
))}
|
||||
</ul>
|
||||
<div style={{flex: 1}}></div>
|
||||
{/* Spacer */}
|
||||
{this.state.isMobile && (
|
||||
<div className={css.userSpaceParent}>
|
||||
<div onClick={() => this.setState({menuActive: !this.state.menuActive})} className={css.userSpace}>
|
||||
<Text>
|
||||
<Menu size={38} className={css.mainGradient} />
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!this.state.isMobile && this.props.user ? (
|
||||
<>
|
||||
<div className={css.userSpaceParent}>
|
||||
{this.getType() === 'sidebar' && (
|
||||
<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.getType() === 'sidebar' && this.props.user.description && (
|
||||
<Text>{this.props.user.description}</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={buildClassName(css.userMenu, [css.menuActive, !this.state.isMobile && this.state.menuActive])}>
|
||||
<Row>
|
||||
{this.props.user.menu?.informations && (
|
||||
<Col>{this.props.user.menu?.informations}</Col>
|
||||
)}
|
||||
<Col>
|
||||
<ul>
|
||||
{this.props.user.menu?.links.map((l) => (
|
||||
<li key={l.path}><Text><Link noStyle href={l.path}>{l.name}</Link></Text></li>
|
||||
))}
|
||||
</ul>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</>
|
||||
) : !this.state.isMobile ? (
|
||||
<div className={css.userSpaceParent}>
|
||||
{this.getType() === 'sidebar' && (
|
||||
<hr/>
|
||||
)}
|
||||
<ul>
|
||||
{this.props.registerUrl && (
|
||||
<li><Link noStyle href={this.props.registerUrl}><a>
|
||||
<Text className={buildClassName(css.active)}>
|
||||
<span>Register</span>
|
||||
</Text>
|
||||
</a></Link></li>
|
||||
)}
|
||||
{this.props.loginUrl && (
|
||||
<li><Link noStyle href={this.props.loginUrl}><a>
|
||||
<Text>
|
||||
<span>Login</span>
|
||||
</Text>
|
||||
</a></Link></li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
) : undefined}
|
||||
</nav>
|
||||
|
||||
{!this.props.mobileMenu && this.state.isMobile && (
|
||||
<div className={buildClassName(css.mobileMenu, [css.shown, this.state.menuActive])}>
|
||||
<Navbar {...this.props} type="sidebar" mobileMenu={this.menuCloseCallback} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user