.itemNavigation {
	position: absolute;
	top: 15px;
	right: 0px;
	width: 185px;
	height: 60px;
	display: flex;
	justify-content: space-between;
	overflow: hidden;
}
.itemNavigation.active {
	position: absolute;
	top: 15px;
	right: 0px;
	width: 185px;
	height: 366px;
	transition: width 0.2s, height 0.2s;
	z-index: 2;
}
.plus {
	position: absolute;
	top: 15px;
	left: 200px;
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: space-between;
	overflow: hidden;
}
.btn-circle{
	width: 60px;
	height: 60px;	
}
.btn-circle ion-icon{
	font-size: 3em;
	color: var(--icone);
}
.plus.active {
	position: absolute;
	top: 15px;
	left: 200px;
	width: 260px;
	height: 800px;
	transition: width 0.5s, height 0.5s;
	z-index: 2;
}

.itemNavigation .userBx {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 60px;
	transition: 0.5s;
	transition-delay: 0.5s;
	color: var(--icone);
}

.itemNavigation .userBx ion-icon{
	font-size: 2em;
}

.itemNavigation.active .userBx {
	width: 100%;
	transition-delay: 0s;
}

.items ,.plus-items{
	position: absolute;
	width: 100%;
	margin-top: 75px;
	padding: 20px;
	overflow: auto;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	background: var(--primary);
}

.items li ,.plus-items li {
	list-style: none;
	margin: 10px 0;
}

.items li a ,.plus-items li a{
	display: inline-block;
	text-decoration: none;
	font-size: 1em;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px ;
	color: var(--icone);
}

.items li a:hover ,.plus-items li a:hover{
	color: var(--icone);
	background: var(--secondary);
	border-radius: 10% / 50%;
}

.items li a ion-icon,.plus-items li a ion-icon {
	font-size: 1.5em;
}
/*responsive */
@media (max-width:410px){
	.plus{
		top:50px;
		left : 147px;
	}
	.plus.active{
		top:50px;
		left : 147px;
	}
	.topbar{
		height: 160px;
	}
	.itemNavigation{
		top :100px;
	}
	.itemNavigation.active{
		top :100px;
	}
	.plus-items{
		margin-top : 110px;
	}
}