Updated Navbar Component

Signed-off-by: Florian BOUILLON <florian.bouillon@delta-wings.net>

src/dzeio/Navbar/Navbar.module.styl

@@ -1,49 +1,124 @@
-@import "../config"
+@import '../config'
 
-.navbar
+.body
-	width 100%
+	margin-left 300px
-	height 70px
+	transition margin-left $transition
-	padding 16px
+
-	position absolute
+	&.short
-	top 0
+		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
+	.userSpaceParent
-		padding-left 216px
+		background $backgroundLight
+		@media (prefers-color-scheme dark)
+			background $backgroundDark
 
-.alignRight
+	.userSpace
-	text-align right
+		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
+		p:first-child
-	height 38px
+			font-weight 500
-	border-radius 8px
+			svg
-	border 2px solid white
+				vertical-align top
-	padding 2px
+				transition transform $transition
-	background white
+				&.menuActive
-	width 38px
+					transform rotateX(180deg)
 
-.userIcon img
+	.userMenu
-	padding 0
+		max-height 0px
-	cursor pointer
+		transition all $transition
 
-.text
+		ul
-	display inline-block
+			padding-bottom 16px
-	margin 0
+			a
-	height 38px
+				padding 16px 0
-	line-height 1
-	font-weight bold
-	font-size rem(20)
-	padding 7px 0 11px 16px
-	text-decoration none
-	color white
-	cursor pointer
 
-.spacer
+		&.menuActive
-	height 70px
+			// TODO find better way to animate this shit
+			max-height 100%
 
-.icon
+	&.short
-	padding 7px 16px
+		width 56px
-	color white
+		.header > div
-	box-sizing content-box
+			padding 0
-	cursor pointer
+		.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

src/dzeio/Navbar/NavbarSpace.tsx

@@ -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>
-	)
-
-}

src/dzeio/Navbar/index.tsx

@@ -1,48 +1,128 @@
-import React from 'react'
+import Router from 'next/router'
-import Link from 'next/link'
+
-import Row from '../Row'
+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?: {
+	type: 'navbar' | 'sidebar'
-		link?: string
+	logo: ImageProps
-		label?: string
+	user?: {
-		src: string
+		name: string
-		alt?: 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}>
+		<nav className={buildClassName(css.sidebar, [css.short, this.state.short])}>
-			<Row nomargin>
+			<Row nomargin className={css.header} align="center">
-				{this.props.logo && (
+				<Col className={css.imgContainer}><Link href="/"><Image {...this.props.logo} /></Link></Col>
-					<Col>
+				<Col nogrow><Text><div onClick={() => this.setState({short: !this.state.short, menuActive: false})}>
-						<Row align="center">
+					{this.state.short ? (
-							<Link href={this.props.logo.link || '/'}>
+						<ChevronsRight size={30} />
-								<a aria-label={this.props.logo.label || 'Homepage'}>
+					) : (
-									<Image
+						<X size={30} />
-										alt={this.props.logo.alt}
+					)}
-										src={this.props.logo.src}
+				</div></Text></Col>
-										height={38}
-										width={120}
-									/>
-								</a>
-							</Link>
-						</Row>
-					</Col>
-				)}
-
-				<Col>
-					<Row justify="flex-end" align="center">
-						{this.props.children}
-					</Row>
-				</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>
 	)
 }

src/index.ts

@@ -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,