Fixed Problems

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

src/dzeio/Navbar/Navbar.module.styl

@@ -39,6 +39,7 @@
 
 		&.active
 			background $mainGradient
+			color $textOnMain
 
 	.userSpace
 
@@ -119,6 +120,7 @@
 
 				&.active
 					background $mainGradient
+					color $textOnMain
 
 	.userSpace
 		cursor pointer
@@ -167,12 +169,13 @@
 
 	.header
 		min-height 70px
-		> div
-			padding 0
-			&:first-child
-				padding-left 16px
-		p > div
+		padding 0
+		margin 0
+		> div p > div
+		> div:first-child
 			padding 16px
+		> div:last-child
+			padding 0
 
 	hr
 		margin 0
@@ -198,7 +201,7 @@
 					background-image $mainGradient
 				&:hover
 				&.active
-					color white
+					color $textOnMain
 					&::before
 						opacity 1
 				svg
@@ -213,9 +216,7 @@
 		margin 0
 		padding 0
 
-.userMenu
-		padding-bottom 16px
-		a
+.userMenu a
 			padding 16px 0
 
 

src/dzeio/Navbar/index.tsx

@@ -30,7 +30,7 @@ interface Props {
 	}
 	items: Array<{
 		path: string
-		icon: FC
+		icon?: FC
 		name: string
 	}>
 	mobileMenu?: () => void
@@ -122,7 +122,7 @@ export default class Navbar extends React.Component<Props, State> {
 	public render = () => (
 		<>
 			<nav className={buildClassName(css[this.getType()], [css.short, this.state.short && !this.props.mobileMenu], [css.mobile, this.props.mobileMenu])}>
-				<Row nowrap nomargin={this.getType() === 'sidebar'} className={css.header} align="center">
+				<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}>
@@ -141,7 +141,7 @@ export default class Navbar extends React.Component<Props, State> {
 					{!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' && (
+								{this.getType() === 'sidebar' && item.icon && (
 									<item.icon />
 								)}
 								<span>{item.name}</span>
@@ -156,8 +156,6 @@ export default class Navbar extends React.Component<Props, State> {
 						<div onClick={() => this.setState({menuActive: !this.state.menuActive})} className={css.userSpace}>
 							<Text>
 								<Menu size={38} className={css.mainGradient} />
-								{/* {this.props.user.name} */}
-								{/* <ChevronDown className={buildClassName([css.menuActive, this.state.menuActive])} /> */}
 							</Text>
 						</div>
 					</div>
@@ -179,7 +177,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>
+							<Row>
 								{this.props.user.menu?.informations && (
 									<Col>{this.props.user.menu?.informations}</Col>
 								)}

src/dzeio/Row/Row.module.styl

@@ -3,14 +3,12 @@
 .row
 	display flex
 	flex-wrap wrap
+	margin (0 - $gapSize) 0 0 (0 - $gapSize)
+	padding $gapSize
 
-	&:not(.nomargin)
-		margin (0 - $gapSize) 0 0
-		padding 0 $gapSize * 2 0 $gapSize
-
-		.row:not(.nomargin)
-			padding 0
-			margin (0 - $gapSize) 0 0 (0 - $gapSize)
+	&.nomargin
+	.row
+		padding 0
 
 .nowrap
 	flex-wrap nowrap