@import '../config'

// $transition = 10s linear
// $transitionTime = 10s
// $transitionFunction = linear
.sidebarBody
	margin-left 300px
	transition margin-left $transition
	&.short
		margin-left 56px

.sidebar
	background var(--theme-50)
	@media (prefers-color-scheme dark)
		background var(--gray-800)
	position fixed
	left 0
	top 0
	padding 24px
	height 100vh
	width 300px
	&.fullWidth
		width 100%
	z-index 100
	display flex
	flex-direction column
	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

	.userSpace
		cursor pointer
		div, p
			transition all $transition
		p
			overflow hidden
			white-space nowrap
		>div:last-child p
			padding 8px 8px 4px
			border-radius 8px
			&:hover
				color black
				background var(--theme-100)
				@media (prefers-color-scheme dark)
					color white
					background var(--gray-700)
			&:active
				color white
				background var(--theme-500)
	&.short
		width 88px
		.userSpace > div:not(:last-child)
		.header > div:first-child
			width 0
			max-width 0
			padding-left 0
		.header
			margin-left -16px
			> div:first-child
				padding-left 0 !important

		.header > div svg
		.header .imgContainer
		> ul
			span
			svg:last-child
				width 0
				padding-left 0
				padding-right 0
				margin 0 !important
				max-width 0
		svg line:first-child
			transform rotateX(0) !important



	.header
		margin-left -8px
		//min-height 70px
		svg
			margin-right 8px
			line:first-child
				transition transform $transition
				transform rotateZ(90deg)
				min-height 24px

	hr
		margin 0
	ul ul
		padding-left 40px
		max-height 0
		opacity 0
		overflow hidden
		transition all $transition
		position relative
		&::before
			content " "
			position absolute
			background black
			@media (prefers-color-scheme dark)
				background white
			border-radius 2px
			width 2px
			height 100%
			margin-top 8px
			left 18px
	li.activeMenu
		svg:last-child
			transform rotateX(180deg)
		ul
			opacity 1
			// not the best but IDK what is better
			max-height 100vh
	ul li
		margin-top 8px
		div
			width 100%
			cursor pointer
			border-radius 8px
			transition all $transition
			color black
			@media (prefers-color-scheme dark)
				color white
			&:first-child
				margin-top 0
			&:hover

				color black
				background var(--theme-100)
				@media (prefers-color-scheme dark)
					color white
					background var(--gray-700)
			&:active
				color white
				background var(--theme-500)

			padding 8px
			display flex
			align-items center
			z-index 111
			position relative

			svg
				transition color $transition, transform $transition
				&:first-child + span
					margin-left 16px

			span
				display inline-block
				white-space nowrap

			a
				width 100%
				display flex
				//max-height 24px

			&.link
				padding 0
				a
					padding 8px

		&.active > div
			color white
			background var(--theme-500)
	ul
		list-style none
		margin 0
		padding 0

.userMenu
	position fixed
	bottom 16px
	left 316px
	z-index 200

	&.short
		left 104px

	&.fullWidth
		left 16px
		width calc(100% - 32px)