initial

static/assets/scss/volt/layout/_sidenav.scss

@@ -0,0 +1,191 @@
+/*
+ * Sidebar
+*/
+.sidebar {
+	display: block;
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 100;
+	max-height: 100%;
+	overflow-y: auto;
+	width: 100%;
+	@include transition(max-width .1s);
+	
+	@include media-breakpoint-up(md) {
+		width: 100%;
+		max-width: 260px;
+	}
+
+	.nav {
+		white-space: nowrap;
+	}
+
+	.nav-item {
+		&.active {
+			& > .nav-link {
+				color: $gray-100;
+				background-color: $gray-700;
+			}
+		}
+		.nav-link {
+			color: $white;
+			cursor: pointer;
+			&:hover {
+				color: $gray-100;
+				background-color: $gray-700;
+			}
+		}
+		margin-bottom: .2rem;
+	}
+
+	.nav-link + .multi-level {
+		margin-top: .2rem;
+	}
+
+	.nav-link {
+		font-size: $font-size-base;
+		vertical-align: middle;
+		padding: 0.55rem 0.75rem;
+		@include border-radius($border-radius);
+
+		.sidebar-icon {
+			margin-right: .5rem;
+			color: $gray-400;
+		}
+
+		.link-arrow{
+			font-size: $font-size-sm;
+		}
+
+		&[data-bs-toggle=collapse][aria-expanded=true] .link-arrow{
+			@include transform(rotate(90deg));
+			transition: $transition-base;
+		}
+	}
+	.nav-link.active {
+		color: $gray-100;
+	}
+
+	.multi-level{
+		.nav-link{
+			padding-left: 53px;
+		}
+	}
+
+	.sidebar-text,
+	.link-arrow,
+	.badge,
+	.notification-count {
+		opacity: 1;
+	}
+
+	.sidebar-text-contracted {
+		display: none;
+	}
+
+	&.contracted {
+		.sidebar-text,
+		.link-arrow,
+		.badge {
+			opacity: 0;
+		}
+
+		.notification-count {
+			opacity: 1;
+			position: absolute;
+			top: 0;
+			left: 40px;
+			width: 18px;
+			height: 18px;
+			border-radius: 50%;
+			font-size: .7rem;
+			padding: .2rem;
+		}
+
+		.nav-item {
+			position: relative;
+			&.active {
+				& > .nav-link {
+					background-color: #363c54;
+					width: 44px;
+				}
+			}
+			.nav-link {
+				&:hover {
+					background-color: $primary;
+				}
+			}
+		}
+
+		.sidebar-text-contracted {
+			display: inline;
+		}
+
+		.multi-level .nav-link {
+			padding-left: 17px;
+		}
+
+		.nav-item {
+			white-space: nowrap;
+		}
+
+		.sidebar-icon {
+			text-align: center;
+		}
+
+
+		@include media-breakpoint-up(md) {
+			& + .content {
+				margin-left: 95px;
+				
+			}
+		}
+
+		max-width: 95px;
+	}
+}
+
+.sidebar-inner {
+	position: relative;
+	overflow-y: hidden;
+}
+
+.sidebar-heading {
+	font-size: .75rem;
+	text-transform: uppercase;
+}
+
+.user-card{
+	border-bottom: 0.0625rem solid #2e3650;
+}
+
+@include media-breakpoint-down(sm) {
+	.sidebar {
+		width: 100%;
+	}
+}
+
+.content {
+
+	overflow: hidden;
+	padding: 0 $spacer 0 $spacer;
+	@include transition(all .3s);
+
+	@include media-breakpoint-up(lg) {
+		margin-left: 260px;
+	}
+}
+
+.sidebar-toggle {
+	font-size: 1.3rem;
+
+	&:hover,
+	&:focus {
+		outline: none;
+		box-shadow: none;
+		background: $gray-300;
+	}
+
+}