Update

Signed-off-by: Avior <github@avior.me>

.storybook/mockNextRouter.js

@@ -1,7 +1,9 @@
 import Router from 'next/router'
 
 Router.router = {
-	push: async () => {},
+	push: async (route) => {
+		console.log('Pushing router to', route)
+	},
 	replace: async () => {},
 	prefetch: () => {},
 	route: '/mock-route',

src/Box/Box.stories.tsx

@@ -12,7 +12,7 @@ export default {
 	}
 } as Meta
 
-export const Basic = (args: any) => (
+export const Box = (args: any) => (
 	<Component {...args}><Text>Test</Text></Component>
 )
 

src/Box/BoxHeader.stories.tsx

@@ -12,7 +12,7 @@ export default {
 	}
 } as Meta
 
-export const Basic = (args: any) => (
+export const BoxHeader = (args: any) => (
 	<Component titel="Test" {...args} />
 )
 

src/Button/Button.module.styl

@@ -127,8 +127,9 @@
 			@media (prefers-color-scheme dark)
 				border-color transparent transparent $darkGrayDark $darkGrayDark
 
-
-.textInner
+svg + .textInner
+	margin-left 8px
+.textInner + svg
 	margin-left 8px
 
 /**

src/Button/Button.stories.tsx

@@ -9,10 +9,11 @@ export default {
 	component: Component
 } as Meta
 
-export const Basic = (args: any) => <Box><Component {...args}>Button</Component></Box>
-Basic.args = {
+export const Button = (args: any) => <Box><Component {...args}>Button</Component></Box>
+Button.args = {
 	nomargintop: true,
 	icon: Zap,
+	iconLeft: Zap,
 	size: 'small',
 	block: true
 }

src/Button/index.tsx

@@ -13,6 +13,7 @@ interface Props {
 	color?: ColorType
 	children?: React.ReactNode
 	icon?: Icon | string
+	iconLeft?: Icon | string
 	size?: 'large' | 'small'
 	type?: 'outline' | 'ghost'
 	block?: boolean
@@ -29,18 +30,22 @@ export default class Button extends React.Component<Props> {
 
 		let inner: any = this.props.children
 
-		if (this.props.icon) {
-			const Icon = this.props.icon
+		if (this.props.icon || this.props.iconLeft) {
 			inner = (
 				<>
-					{typeof Icon === 'string' ? (
-						<Image imageProps={{src: Icon, width: 16, height: 16}} />
+					{this.props.icon && (typeof this.props.icon === 'string' ? (
+						<Image imageProps={{src: this.props.icon, width: 16, height: 16}} />
 					) : (
-						<Icon size={this.props.size === 'large' ? 20 : this.props.size === 'small' ? 14 : 16} />
-					)}
+						<this.props.icon size={this.props.size === 'large' ? 20 : this.props.size === 'small' ? 14 : 16} />
+					))}
 					{this.props.children && (
 						<span className={css.textInner}>{this.props.children}</span>
 					)}
+					{this.props.iconLeft && (typeof this.props.iconLeft === 'string' ? (
+						<Image imageProps={{src: this.props.iconLeft, width: 16, height: 16}} />
+					) : (
+						<this.props.iconLeft size={this.props.size === 'large' ? 20 : this.props.size === 'small' ? 14 : 16} />
+					))}
 				</>
 			)
 		}

src/Checkbox/Checkbox.stories.tsx

@@ -7,4 +7,4 @@ export default {
 	component: Checkbox
 } as Meta
 
-export const Basic = (args: any) => <Checkbox {...args} />
+export const Checkbox = (args: any) => <Checkbox {...args} />

src/Code/Code.stories.tsx

@@ -10,7 +10,7 @@ export default {
 	}
 } as Meta
 
-export const Basic = (args: any) => {
+export const Code = (args: any) => {
 	const content = args.content
 	delete args.content
 

src/Container/Container.stories.tsx

@@ -14,6 +14,6 @@ export default {
 	}
 } as Meta
 
-export const Basic = (args: any) => (
+export const Container = (args: any) => (
 	<Component {...args}><Text>Test</Text></Component>
 )

src/Link/Link.stories.tsx

@@ -13,4 +13,4 @@ export default {
 	}
 } as Meta
 
-export const Basic = (args: any) => <Component {...args}>{args.text}</Component>
+export const Link = (args: any) => <Component {...args}>{args.text}</Component>

src/Loader/Loader.stories.tsx

@@ -11,9 +11,9 @@ export default {
 	}
 } as Meta
 
-export const Basic: Story<any> = (args: any) => <Component {...args} />
+export const Loader: Story<any> = (args: any) => <Component {...args} />
 
-let tmp = Basic.bind({})
+let tmp = Loader.bind({})
 tmp.args = {
 	auto: {interval : [10, 100], increment: [0, 5]}
 }

src/Menu/Menu.stories.tsx

@@ -21,6 +21,6 @@ const list: Component['props']['items'] = [
 	{value: 'Menu item 10', icon: XOctagon}
 ]
 
-export const Basic = (args: any) => (
+export const Menu = (args: any) => (
 	<Component outline {...args} items={list} onClick={(_, index) => list[index].selected = !list[index].selected} />
 )

src/Menu/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Link } from '..'
 import Box from '../Box'
 import { Icon } from '../interfaces'
 import { buildClassName } from '../Util'
@@ -6,7 +7,7 @@ import { buildClassName } from '../Util'
 import css from './Menu.module.styl'
 
 interface Props {
-	items: Array<{display?: string, value: any, selected?: boolean, icon?: Icon}>
+	items: Array<{display?: string, value: any, selected?: boolean, icon?: Icon, href?: string}>
 	outline?: boolean
 	onClick?: (value: any, key: number) => void
 	className?: string
@@ -17,14 +18,28 @@ export default class Menu extends React.Component<Props> {
 	public render = () => (
 		<Box className={buildClassName(css.menu, this.props.className, [css.outline, this.props.outline], [css.hidden, this.props.hideWhenEmpty, this.props.items.length === 0])}>
 			<ul>
-				{this.props.items.map((item, key) => (
-					<li key={key} className={buildClassName([css.selected, item.selected])} onClick={() => this.props.onClick?.(item.value, key)}>
-						{item.icon && (
-							<item.icon size="24" />
-						)}
-						{item.display ?? item.value}
-					</li>
-				))}
+				{this.props.items.map((item, key) => {
+					const content = (
+						<>
+							{item.icon && (
+								<item.icon size="24" />
+							)}
+							{item.display ?? item.value}
+						</>
+					)
+					if (item.href) {
+						return (
+						<li key={key} className={buildClassName([css.selected, item.selected])}>
+							<Link noStyle href={item.href}>{content}</Link>
+						</li>
+						)
+					}
+					return (
+						<li key={key} className={buildClassName([css.selected, item.selected])} onClick={() => this.props.onClick?.(item.value, key)}>
+							{content}
+						</li>
+					)
+				})}
 			</ul>
 		</Box>
 	)

src/Navbar/Navbar.module.styl

@@ -1,228 +1,30 @@
 @import '../config'
 
-// $transition = 10s linear
-// $transitionTime = 10s
-// $transitionFunction = linear
-.body-sidebar
-		margin-left 300px
-		transition margin-left $transition
-		&.short
-			margin-left 56px
+$height = 76px
 
 .body-navbar
-		margin-top 70px
+		margin-top $height
 
 .navbar
-	background $foregroundLight
-	@media (prefers-color-scheme dark)
-		background $foregroundDark
 	position fixed
 	left 0
 	top 0
-	height 70px
+	height $height
 	width 100%
 	z-index 100
 	display flex
 	padding 16px
 
-	> ul, .userSpaceParent ul
+	> 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
@@ -230,7 +32,3 @@
 	&.shown
 		opacity 1
 		pointer-events initial
-
-.mainGradient
-	//WIP
-	fill $mainGradient

src/Navbar/Navbar.stories.tsx

@@ -12,33 +12,34 @@ export default {
 	}
 } as Meta
 
-export const Basic: Story<any> = (args: any) => <Component {...args} />
-Basic.args = {
-	type: 'navbar',
+export const Navbar: Story<any> = (args: any) => <Component {...args} />
+Navbar.args = {
 	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>)
-		}
+		menu: [{
+			path: '/logout',
+			value: 'Logout'
+		}, {
+			path: '/logout',
+			value: 'Logout'
+		}]
 	},
-	items: [{
-		path: '/dashboard',
+	menu: [{
 		name: 'Dasboard',
 		icon: Zap
+	}, {
+		name: 'With Childs',
+		icon: Zap,
+		subMenu: [{
+			name: 'Child 1'
+		}, {
+			name: 'Child with link',
+			path: '/dashboard'
+		}]
 	}, {
 		path: '/dashboard',
-		name: 'Dasboard',
+		name: 'Link',
 		icon: ZapOff
 	}],
 }

src/Navbar/index.tsx

@@ -2,8 +2,10 @@ import Router from 'next/router'
 
 import Image, { ImageProps } from 'next/image'
 import React from 'react'
-import { ChevronDown, ChevronsRight, Menu, X } from 'lucide-react'
+import { ChevronDown, ChevronsRight, Menu as LucideMenu, X } from 'lucide-react'
 import Text from '../Text'
+import Menu from '../Menu'
+import Sidebar from '../Sidebar'
 import Col from '../Col'
 import Row from '../Row'
 import Link from '../Link'
@@ -11,14 +13,17 @@ import { buildClassName } from '../Util'
 
 import css from './Navbar.module.styl'
 import { Icon } from '../interfaces'
+import { Button } from '..'
+import { objectEqual } from '@dzeio/object-util'
+
+interface MenuItem {
+	path?: string
+	icon?: Icon
+	name: string
+	subMenu?: Array<MenuItem>
+}
 
 interface Props {
-	/**
-	 * Type of Navbar
-	 * _note: when in mobile it is not listened_
-	 */
-	type: 'navbar' | 'sidebar'
-
 	/**
 	 * Logo to display
 	 */
@@ -39,39 +44,15 @@ interface Props {
 		 * 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
-		}
+		menu?: Array<MenuItem>
 	}
 	/**
 	 * Links to display
 	 */
-	items: Array<{
-		path: string
-		icon?: Icon
-		name: string
-	}>
-	/**
-	 * Internal Use don't use it !
-	 */
-	mobileMenu?: () => void
+	menu: Array<MenuItem>
 }
 
 interface State {
@@ -79,10 +60,14 @@ interface State {
 	short: boolean
 	isMobile: boolean
 	menuActive: boolean
+	subMenu?: {
+		x: number
+		menu: Menu['props']['items']
+	}
 }
 
 /**
- * Navbar/Sidebar Component
+ * Navbar Component
  * @version 1.0.3
  */
 export default class Navbar extends React.Component<Props, State> {
@@ -96,7 +81,7 @@ export default class Navbar extends React.Component<Props, State> {
 	public componentDidMount() {
 		this.setState({
 			path: Router.asPath,
-			menuActive: !!this.props.mobileMenu
+			menuActive: false
 		})
 		Router.events.on('routeChangeComplete', () => {
 			this.setState({path: Router.asPath, menuActive: false})
@@ -104,10 +89,10 @@ export default class Navbar extends React.Component<Props, State> {
 		Router.events.on('routeChangeError', () => {
 			this.setState({path: Router.asPath, menuActive: false})
 		})
-		if (!this.props.mobileMenu) {
-			window.addEventListener('resize', this.onResize)
-			this.onResize()
-		}
+		document.body.classList.add(css['body-navbar'])
+		document.body.addEventListener('click', this.onBodyClick)
+		window.addEventListener('resize', this.onResize)
+		this.onResize()
 	}
 
 	public onResize = () => {
@@ -117,53 +102,20 @@ export default class Navbar extends React.Component<Props, State> {
 		}
 	}
 
-	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()
-		}
+		document.body.classList.remove(css['body-sidebar'])
+		document.body.removeEventListener('click', this.onBodyClick)
+		window.removeEventListener('resize', this.onResize)
 	}
 
 	public menuCloseCallback = () => {
 		this.setState({menuActive: false})
-	}
-
-	public getType(): 'sidebar' | 'navbar' {
-		if (this.props.mobileMenu) {
-			return 'sidebar'
-		}
-		return this.state.isMobile ? 'navbar' : this.props.type
+		return true
 	}
 
 	public render = () => (
 		<>
-			<nav className={buildClassName(css[this.getType()], [css.short, this.state.short && !this.props.mobileMenu], [css.mobile, this.props.mobileMenu])}>
+			<nav className={css.navbar}>
 				<Row nowrap className={css.header} align="center">
 					{this.props.logo && (
 						<Col className={css.imgContainer}>
@@ -172,103 +124,70 @@ export default class Navbar extends React.Component<Props, State> {
 							</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 */}
+				<div style={{flex: 1}}></div>
+
+				{/* Menu */}
+				{!this.state.isMobile && (
+					<ul>
+						{!this.state.isMobile && this.props.menu.map((item) => (
+							<li key={item.path}><Button nomargintop type="ghost" href={item.path} icon={item.icon} onClick={item.subMenu ? this.onClick(item.subMenu) : undefined}>{item.name}</Button></li>
+						))}
+						{this.props.user && (
+							<li>
+								<Button nomargintop type="ghost" iconLeft={ChevronDown} onClick={this.props.user.menu ? this.onClick(this.props.user.menu) : undefined}>{this.props.user.name}</Button>
+							</li>
+						)}
+					</ul>
+				)}
+
+				{/* Menu Icon */}
 				{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} />
+								<LucideMenu 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 && (
+			{this.state.isMobile && (
 				<div className={buildClassName(css.mobileMenu, [css.shown, this.state.menuActive])}>
-					<Navbar {...this.props} type="sidebar" mobileMenu={this.menuCloseCallback} />
+					<Sidebar fullWidth {...this.props} onClose={this.menuCloseCallback} menu={this.props.menu} />
+				</div>
+			)}
+			{this.state.subMenu && (
+				<div style={{position: 'fixed', top: 76, right: this.state.subMenu.x}}>
+					<Menu outline items={this.state.subMenu.menu} />
 				</div>
 			)}
 		</>
 	)
+
+	private onBodyClick = () => {
+		this.setState({subMenu: undefined})
+	}
+
+	private onClick = (subMenu?: Array<MenuItem>) => (ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => {
+		ev.stopPropagation()
+		const x = window.innerWidth - (ev.currentTarget.offsetLeft + ev.currentTarget.offsetWidth)
+		if (subMenu && (!this.state.subMenu || x !== this.state.subMenu?.x)) {
+			console.log(ev)
+			this.setState({
+				subMenu: {
+					x,
+					menu: subMenu.map((v) => ({
+						display: v.name,
+						value: v.path,
+						href: v.path
+					}))
+				}
+			})
+		} else {
+			this.setState({subMenu: undefined})
+		}
+	}
 }

src/NotificationManager/NotificationManager.stories.tsx

@@ -8,11 +8,11 @@ export default {
 	component: Component
 } as Meta
 
-export const Basic = (args: any) => <Component {...args} />
-Basic.args = {
+export const NotificationManager = (args: any) => <Component {...args} />
+NotificationManager.args = {
 	ttl: 999999999999,
 	notifications: [
 		'Test',
 		'LArge text lorem ipsum dolor sit amet, i dont know what to type yolo :D'
 	]
-}
+}

src/Popup/Popup.stories.tsx

@@ -8,6 +8,6 @@ export default {
 	component: Component
 } as Meta
 
-export const Basic = (args: any) => (
+export const Popup = (args: any) => (
 	<Component><Text>Test</Text></Component>
 )

src/Sidebar/Sidebar.module.styl

@@ -19,6 +19,8 @@
 	padding 24px
 	height 100vh
 	width 300px
+	&.fullWidth
+		width 100%
 	z-index 100
 	display flex
 	flex-direction column
@@ -71,6 +73,8 @@
 				padding-right 0
 				margin 0 !important
 				max-width 0
+		svg line:first-child
+			transform rotateX(0) !important
 
 
 
@@ -79,6 +83,10 @@
 		//min-height 70px
 		svg
 			margin-right 8px
+			line:first-child
+				transition transform $transition
+				transform rotateZ(90deg)
+				min-height 24px
 
 	hr
 		margin 0
@@ -137,7 +145,7 @@
 			position relative
 
 			svg
-				transition color $transition
+				transition color $transition, transform $transition
 				&:first-child + span
 					margin-left 16px
 
@@ -149,29 +157,7 @@
 				width 100%
 				display flex
 				//max-height 24px
-
-.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

src/Sidebar/Sidebar.stories.tsx

@@ -31,9 +31,10 @@ Sidebar.args = {
 		name: 'With Childs',
 		icon: Zap,
 		subMenu: [{
-			name: 'With Childs'
+			name: 'Child 1'
 		}, {
-			name: 'With Childs'
+			name: 'Child with link',
+			path: '/dashboard'
 		}]
 	}, {
 		path: '/dashboard',

src/Sidebar/index.tsx

@@ -12,7 +12,6 @@ import { buildClassName } from '../Util'
 import css from './Sidebar.module.styl'
 import { Icon } from '../interfaces'
 import { Menu } from '..'
-import Router from 'next/router'
 
 interface MenuItem {
 		path?: string
@@ -38,16 +37,17 @@ interface Props {
 		/**
 		 * User Menu
 		 */
-		menu?: Menu['props']['items']
+		menu?: Array<MenuItem>
 	}
 	/**
 	 * Links to display
 	 */
 	menu: Array<MenuItem>
-	/**
-	 * Internal Use don't use it !
-	 */
-	onClose?: () => void
+
+	onClose?: () => boolean
+
+	fullWidth?: boolean
+
 }
 
 interface State {
@@ -88,7 +88,9 @@ export default class Navbar extends React.Component<Props, State> {
 		Router.events.on('routeChangeError', () => {
 			this.setState({path: Router.asPath, open: false})
 		})
-		document.body.classList.add(css.sidebarBody)
+		if (!this.props.fullWidth) {
+			document.body.classList.add(css.sidebarBody)
+		}
 		document.body.addEventListener('click', this.onBodyClick)
 	}
 
@@ -118,7 +120,8 @@ export default class Navbar extends React.Component<Props, State> {
 					y: (ev.currentTarget as HTMLElement).offsetTop,
 					menu: subMenu.map((v) => ({
 						display: v.name,
-						value: v.path
+						value: v.path,
+						href: v.path
 					}))
 				}
 			})
@@ -131,7 +134,8 @@ export default class Navbar extends React.Component<Props, State> {
 		<>
 			<nav className={buildClassName(
 				css.sidebar,
-				[css.short, !this.state.open]
+				[css.short, !this.state.open],
+				[css.fullWidth, this.props.fullWidth]
 			)}>
 				<Row nowrap justify="space-between" className={css.header} align="center">
 					{this.props.logo && (
@@ -142,11 +146,7 @@ export default class Navbar extends React.Component<Props, State> {
 						</Col>
 					)}
 					<Col nogrow><Text tag="div">
-						{this.state.open ? (
-							<Minus size={24} onClick={() => this.setState({open: false, activeMenu: undefined})} />
-						) : (
-							<Plus size={24} onClick={() => this.setState({open: true})} />
-						)}
+						<Plus size={24} onClick={this.onCloseOpenClick} />
 					</Text></Col>
 				</Row>
 				<ul>
@@ -162,8 +162,12 @@ export default class Navbar extends React.Component<Props, State> {
 				)}
 			</nav>
 			{this.props.user?.menu && this.state.userMenu && (
-				<div style={{position: 'absolute', bottom: 16, left: this.state.open ? 316 : 104}}>
-					<Menu onClick={this.onMenuClick} outline items={this.props.user.menu} />
+				<div style={{position: 'absolute', bottom: 16, left: this.props.fullWidth ? 16 : this.state.open ? 316 : 104}}>
+					<Menu onClick={this.onMenuClick} outline items={this.props.user.menu.map((v) => ({
+						display: v.name,
+						value: v.path,
+						href: v.path
+					}))} />
 				</div>
 			)}
 			{this.state.subMenu && (
@@ -174,6 +178,14 @@ export default class Navbar extends React.Component<Props, State> {
 		</>
 	)
 
+	private onCloseOpenClick = () => {
+		let willBeOpen = !this.state.open
+		if (this.props.onClose && !willBeOpen) {
+			willBeOpen = this.props.onClose()
+		}
+		this.setState(!willBeOpen ? {open: false, activeMenu: undefined} : {open: true})
+	}
+
 	private onMenuClick = (value?: string) => {
 		this.setState({userMenu: false, subMenu: undefined})
 		if (value) {

src/Table/Table.stories.tsx

@@ -9,7 +9,7 @@ export default {
 	component: Component
 } as Meta
 
-export const Basic = (args: any) => (
+export const Table = (args: any) => (
 	<Box icon={Settings} title="Storage">
 		<Component {...args}>
 			<thead>

src/Text/Text.stories.tsx

@@ -7,7 +7,7 @@ export default {
 	component: Component
 } as Meta
 
-export const Basic = (args: any) => (
+export const Text = (args: any) => (
 	<>
 		<Component {...args}>TExt</Component>
 		<Component {...args}>TExt</Component>