Finalised Navbar

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

.storybook/mockNextRouter.js

@@ -0,0 +1,8 @@
+import Router from 'next/router';
+
+Router.router = {
+	push: async () => {},
+	replace: async () => {},
+	prefetch: () => {},
+	route: '/mock-route',
+	pathname: 'mock-path',};

.storybook/preview.js

@@ -1,4 +1,5 @@
 import '../src/dzeio/general.styl'
+import './mockNextRouter'
 
 export const parameters = {
   layout: 'centered'

src/dzeio/Navbar/Navbar.module.styl

@@ -1,11 +1,69 @@
 @import '../config'
 
-.body
-	margin-left 300px
-	transition margin-left $transition
+// $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
+		padding 16px
+		border-bottom-left-radius 4px
+		transform translateX(100%)
+		background inherit
+		transition transform $transition
+		&.menuActive
+			transform translateX(0%)
 
-	&.short
-		margin-left 56px
 
 .sidebar
 	background $foregroundLight
@@ -19,6 +77,11 @@
 	z-index 100
 	display flex
 	flex-direction column
+
+	&.mobile
+		width 100%
+		z-index 101
+
 	&
 		transition width $transition
 	.header
@@ -33,21 +96,42 @@
 	> 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 56px
+		min-height 86px
 		p
 			overflow hidden
+			white-space nowrap
 		p:last-child:not(:first-child)
 			margin-top 8px
 			font-style italic
@@ -65,11 +149,6 @@
 		max-height 0px
 		transition all $transition
 
-		ul
-			padding-bottom 16px
-			a
-				padding 16px 0
-
 		&.menuActive
 			// TODO find better way to animate this shit
 			max-height 100%
@@ -82,43 +161,73 @@
 		.userSpace
 		> ul span
 			width 0
-			padding 0
+			padding-left 0
+			padding-right 0
 			margin 0
 			max-width 0
 
+
 	.header
 		min-height 70px
-		> div
-			padding 0
-			&:first-child
-				padding 16px
-		p > div
+		padding 0
+		margin 0
+		> div p > div
+		> div:first-child
 			padding 16px
+		> div:last-child
+			padding 0
 
 	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
+				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
-					background-image $mainGradient
-					color white
+					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-bottom 16px
+		a
+			padding 16px 0
+
+
+.mobileMenu
+	opacity 0
+	transition opacity $transition
+	&.shown
+		opacity 1
+
+.mainGradient
+	//WIP
+	fill $mainGradient

src/dzeio/Navbar/Navbar.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react/types-6-0'
+import { Meta, Story } from '@storybook/react/types-6-0'
 import React from 'react'
 import Component from '.'
 
@@ -7,4 +7,24 @@ export default {
 	component: Component
 } as Meta
 
-export const Basic = (args: any) => <Component {...args} />
+export const Basic: Story<any> = (args: any) => <Component {...args} />
+Basic.args = {
+	items: [{
+		path: '/dashboard',
+		name: 'Dasboard'
+	}],
+	loginUrl: '/login',
+	registerUrl: '/register',
+	type: 'navbar',
+	user: {
+		name: 'Username',
+		description: 'User Description',
+		menu: {
+			links: [{
+				path: '/logout',
+				name: 'Logout'
+			}]
+		}
+	},
+	logo: {src: '/assets/logo.svg', width: 90, height: 38}
+}

src/dzeio/Navbar/index.tsx

@@ -2,7 +2,7 @@ import Router from 'next/router'
 
 import Image, { ImageProps } from 'next/image'
 import React, { FC } from 'react'
-import { ChevronDown, ChevronsRight, X } from 'react-feather'
+import { ChevronDown, ChevronsRight, Menu, X } from 'react-feather'
 import Text from '../Text'
 import Col from '../Col'
 import Row from '../Row'
@@ -12,117 +12,260 @@ import { buildClassName } from '../Util'
 import css from './Navbar.module.styl'
 
 interface Props {
+	/**
+	 * Type of Navbar
+	 * _note: when in mobile it is not listened_
+	 */
 	type: 'navbar' | 'sidebar'
-	logo: ImageProps
+
+	/**
+	 * 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
-		settings?: 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: FC
+		icon?: FC
 		name: string
 	}>
+	/**
+	 * Internal Usem don't use it !
+	 */
+	mobileMenu?: () => void
 }
 
 interface State {
 	path?: string
 	short: boolean
+	isMobile: boolean
 	menuActive: boolean
 }
 
+/**
+ * Navbar/Sidebar Component
+ * @version 1.0.0
+ */
 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})
-		Router.events.on('routeChangeComplete', () => {
-			this.setState({path: Router.asPath})
+		this.setState({
+			path: Router.asPath,
+			menuActive: !!this.props.mobileMenu
 		})
-		document.body.classList.add(css.body)
-		if (this.state.short) {
-			document.body.classList.add(css.short)
+		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.state.short) {
-			document.body.classList.add(css.short)
-		} else {
-			document.body.classList.remove(css.short)
-
+		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() {
-		document.body.classList.remove(css.body, css.short)
+		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.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} />
+		<>
+			<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">
+					<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>
 					)}
-				</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 && (
-				<>
+				</Row>
+				{this.getType() === 'sidebar' && (
+					<hr/>
+				)}
+				<ul>
+					{!this.state.isMobile && this.props.items.map((item) => (
+						<li key={item.path}><Link noStyle href={item.path}><a>
+							<Text className={buildClassName([css.active, this.state.path?.startsWith(item.path)])}>
+								{this.getType() === 'sidebar' && item.icon && (
+									<item.icon />
+								)}
+								<span>{item.name}</span>
+							</Text>
+						</a></Link></li>
+					))}
+				</ul>
+				<div style={{flex: 1}}></div>
+				{/* Spacer */}
+				{this.state.isMobile && (
 					<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])} />
+								<Menu size={38} className={css.mainGradient} />
 							</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>
+				)}
+				{!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>
 			)}
-		</nav>
+		</>
 	)
 }