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>

_includes/layout/TopBar.html

@@ -0,0 +1,60 @@
+<nav class="is-flex">
+    <div class="nav-item is-flex is-flex-grow-1 is-align-items-center ml-6">
+        <h5 class="is-size-1-mobile"><a class=" LinkName mr-2"></a>/<a class="ml-2">STREAM</a></h5>
+        <input class="input ml-6 mr-6" placeholder="Pesquisar" />
+    </div>
+    <div class="nav-item is-flex is-flex-grow-1 is-align-items-center is-justify-content-flex-end mr-6">
+        <h4 class="usuario is-size-6 mr-4">Bem vindo</h4>
+        <figure class="image is-32x32 ">
+            <img 
+                class="is-rounded"
+                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFqZMMWnIwg5s5uicldr-MVKpmu_2e1KWaIm2wNzp-Oqs4uyaqRGY8TFhBHIdWOMFMYPs&usqp=CAU" 
+            />
+        </figure>
+    </div>
+</nav>
+
+
+<style type="text/css">
+   @media only screen and (min-width: 720px) {
+        nav{
+            height: 100px;
+            /* width: 101rem; */
+            background-color: #0b1a33;
+        }
+    }
+    @media screen and (max-width: 1080px) {
+        nav{
+        height: 100px;
+        /* width: 101rem; */
+        background-color: #0b1a33;
+    }
+    }   
+    input{
+        width: 300px;
+        /* height: 40px; */
+        background-color: #0b1a33;
+        border-color: #5ce1f4;
+        color: #fff;
+        font-family: 'Roboto', sans-serif;
+        
+    }
+    input::placeholder{
+        color: #fff;
+        font-family: 'Roboto', sans-serif;
+        
+    }
+    .nav-item h5 a{
+        color: #fff;
+    }
+    .LinkName{
+        color: #5ce1f4 !important;
+    }
+    .visible{
+        display: none;
+    }
+    .usuario{
+        color: #fff;
+        font-family: 'Roboto', sans-serif;
+    }
+</style>