Fixed Navbar bugs

- Links having a <a> in a <a>
- UserMenu links eing squished together

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

src/dzeio/Navbar/Navbar.module.styl

@@ -56,7 +56,6 @@
 		position fixed
 		top 70px
 		right 0
-		padding 16px
 		border-bottom-left-radius 4px
 		transform translateX(100%)
 		background inherit
@@ -216,15 +215,20 @@
 		margin 0
 		padding 0
 
-.userMenu a
+.userMenu
-			padding 16px 0
+	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

src/dzeio/Navbar/Navbar.stories.tsx

@@ -1,6 +1,8 @@
 import { Meta, Story } from '@storybook/react/types-6-0'
 import React from 'react'
+import { Zap, ZapOff } from 'react-feather'
 import Component from '.'
+import Text from '../Text'
 
 export default {
 	title: 'DZEIO/Navbar',
@@ -9,13 +11,10 @@ export default {
 
 export const Basic: Story<any> = (args: any) => <Component {...args} />
 Basic.args = {
-	items: [{
+	type: 'navbar',
-		path: '/dashboard',
+	logo: {src: '/90-38.svg', width: 90, height: 38},
-		name: 'Dasboard'
-	}],
 	loginUrl: '/login',
 	registerUrl: '/register',
-	type: 'navbar',
 	user: {
 		name: 'Username',
 		description: 'User Description',
@@ -23,8 +22,20 @@ Basic.args = {
 			links: [{
 				path: '/logout',
 				name: 'Logout'
-			}]
+			}, {
+				path: '/logout',
+				name: 'Logout'
+			}],
+			informations: (<Text>Testing :D</Text>)
 		}
 	},
-	logo: {src: '/90-38.svg', width: 90, height: 38}
+	items: [{
+		path: '/dashboard',
+		name: 'Dasboard',
+		icon: Zap
+	}, {
+		path: '/dashboard',
+		name: 'Dasboard',
+		icon: ZapOff
+	}],
 }

src/dzeio/Navbar/index.tsx

@@ -82,7 +82,7 @@ interface State {
 
 /**
  * Navbar/Sidebar Component
- * @version 1.0.2
+ * @version 1.0.3
  */
 export default class Navbar extends React.Component<Props, State> {
 
@@ -186,14 +186,14 @@ export default class Navbar extends React.Component<Props, State> {
 				)}
 				<ul>
 					{!this.state.isMobile && this.props.items.map((item) => (
-						<li key={item.path}><Link noStyle href={item.path}><a>
+						<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>
-						</a></Link></li>
+						</Link></li>
 					))}
 				</ul>
 				<div style={{flex: 1}}></div>
@@ -224,7 +224,7 @@ export default class Navbar extends React.Component<Props, State> {
 							</div>
 						</div>
 						<div className={buildClassName(css.userMenu, [css.menuActive, !this.state.isMobile && this.state.menuActive])}>
-							<Row nomargin={this.getType() === 'navbar'}>
+							<Row nomargin>
 								{this.props.user.menu?.informations && (
 									<Col>{this.props.user.menu?.informations}</Col>
 								)}