Fist commit

_includes/layout/SideBar.html

@@ -0,0 +1,72 @@
+<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="../../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="/"> 
+						<span class="menu-txt">Home</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>