AliceClass/_includes/layout/SideBar.html

<div class="SideBar full background is-flex is-flex-direction-column">
	<div>
		<div class="top-sidebar is-flex is-justify-content-center is-align-items-center">
			<img
				src="{{ site.baseurl }}/assets/images/AliceCastRed.png"
				class="image logo"
			/>
		</div>
	</div>
	
	<div>
		<aside class="menu"> 
			<ul class="menu-list">
				<li>
					<a class="item-menu has-text-white-ter" href="{{ site.baseurl }}{{ site.baseurl }}/index.html"> 
						<span class="menu-txt">Home</span>
						<i class="fa-solid fa-house mx-4"></i>
					</a>
				</li>
				<li>
					<a class="item-menu has-text-white-ter" href="{{ site.baseurl }}{{ site.baseurl }}/cursos.html"> 
						<span class="menu-txt">Cursos</span>
						<i class="fa-solid fa-house mx-4"></i>
					</a>
				</li>
			</ul>
		</aside>
	</div>
	
</div>

<style type="text/css">
	@media only screen and (min-width: 720px) {
		
		.SideBar {
			/* background-color: black; */
			height: 100%;
			width: 200px;
			z-index: 1000;
			overflow: hidden;
			padding-top: 10px;
		}
	}
	@media screen and (max-width: 1080px) {
		.SideBar {
			/* background-color: black; */
			height: 100vh;
			width: 70px;
			z-index: 1000;
			overflow: hidden;
			padding-top: 40px;
		}
		.menu-txt{
			display: none;
		}
	}
	.menu{
			margin-top: 20px;
		}
	.top-sidebar {
		/* height: 10px; */
		width: 100%;
	}
	.item-menu:hover {
		background-color: #b4f2ff;
	}
	.active {
		background-color: #5ce1f4;
	}
	.background {
		background-color: #0b1a33;
	}
	.logo{
		width: 50%;
		/* margin-top: 80px; */
	}

</style>