feat: Cria o menu desktop

src/arquivos/sass/partials/_header.scss

@@ -1,4 +1,5 @@
 .page-header {
+	position: relative;
 	padding: 28px 0;
 	background: $black-500;
 

src/arquivos/sass/partials/_menu.scss

@@ -1,4 +1,6 @@
 .menu {
+	align-self: stretch;
+
 	&__button {
 		padding: 0;
 		border: 0;
@@ -11,6 +13,118 @@
 	}
 
 	.main-menu {
-		display: none;
+		height: 100%;
+
+		&__departaments {
+			display: flex;
+			height: 100%;
+			margin: 0;
+		}
+
+		&__departament {
+			display: flex;
+			align-items: center;
+			margin-right: 40px;
+
+			&:hover {
+				.main-menu__departament-link {
+					text-decoration: underline;
+					font-weight: 700;
+					color: $blue-500;
+				}
+
+				.submenu {
+					top: 100%;
+					opacity: 1;
+					pointer-events: all;
+				}
+			}
+		}
+
+		&__departament-link {
+			line-height: 15px;
+			font-size: 12px;
+			color: $white-500;
+
+			@include mq(lg, min) {
+				&::after {
+					content: attr(title);
+					display: block;
+					height: 0;
+					overflow: hidden;
+					font-weight: bold;
+					visibility: hidden;
+				}
+			}
+		}
+	}
+
+	.submenu {
+		position: absolute;
+		top: calc(100% + 32px);
+		left: 0;
+		width: 100%;
+		z-index: map-get($z-index , Level-4);
+		padding: 31px 0 43px;
+		background: rgba($white-500, 0.95);
+		box-shadow: 0px 4px 4px rgba($black-500, 0.02);
+		opacity: 0;
+		pointer-events: none;
+		transition: all .2s ease-in-out;
+
+		&::before {
+			content: "";
+			position: absolute;
+			left: 0;
+			bottom: 100%;
+			width: 100%;
+			height: 28px;
+			background: transparent;
+		}
+
+		&__title {
+			margin: 0 0 8px;
+			line-height: 24px;
+			font-size: 20px;
+		}
+
+		&__categories-wrapper {
+			display: flex;
+			margin-bottom: 8px;
+		}
+
+		&__categories {
+			margin-right: 30px;
+		}
+
+		&__category {
+			padding: 8px 0;
+		}
+
+		&__category-link {
+			line-height: 15px;
+			font-size: 12px;
+			color: $black-500;
+			transition: color .2s linear;
+
+			@include mq(lg, min) {
+				&:hover {
+					color: $blue-500;
+				}
+			}
+		}
+
+		&__see-all {
+			display: flex;
+			align-items: center;
+			line-height: 15px;
+			font-size: 12px;
+			font-weight: 700;
+			color: $black-500;
+
+			i {
+				margin-left: 9px;
+			}
+		}
 	}
 }

src/arquivos/sass/utils/_normalize.scss

@@ -23,7 +23,7 @@ html {
    */
 
 body {
-	color: #142032;
+	color: $black-500;
 	margin: 0;
 }
 

src/controles-customizados/menuPrincipal.html

@@ -0,0 +1,64 @@
+<nav class="main-menu">
+	<ul class="main-menu__departaments">
+		<li class="main-menu__departament">
+			<a class="main-menu__departament-link" href="#" title="LOREM IPSUM">LOREM IPSUM</a>
+
+			<div class="submenu">
+				<div class="container">
+					<h2 class="submenu__title">LOREM IPSUM</h2>
+
+					<div class="submenu__categories-wrapper">
+						<ul class="submenu__categories">
+							<li class="submenu__category">
+								<a class="submenu__category-link" href="#">Lorem Ipsum</a>
+							</li>
+
+							<li class="submenu__category">
+								<a class="submenu__category-link" href="#">Lorem Ipsum</a>
+							</li>
+
+							<li class="submenu__category">
+								<a class="submenu__category-link" href="#">Lorem Ipsum</a>
+							</li>
+
+							<li class="submenu__category">
+								<a class="submenu__category-link" href="#">Lorem Ipsum</a>
+							</li>
+						</ul>
+
+						<ul class="submenu__categories">
+							<li class="submenu__category">
+								<a class="submenu__category-link" href="#">Lorem Ipsum</a>
+							</li>
+
+							<li class="submenu__category">
+								<a class="submenu__category-link" href="#">Lorem Ipsum</a>
+							</li>
+
+							<li class="submenu__category">
+								<a class="submenu__category-link" href="#">Lorem Ipsum</a>
+							</li>
+
+							<li class="submenu__category">
+								<a class="submenu__category-link" href="#">Lorem Ipsum</a>
+							</li>
+						</ul>
+					</div>
+
+					<a class="submenu__see-all" href="#">
+						VER TODOS
+						<i class="sprite sprite-arrow-icon"></i>
+					</a>
+				</div>
+			</div>
+		</li>
+
+		<li class="main-menu__departament">
+			<a class="main-menu__departament-link" href="#"  title="LOREM IPSUM">LOREM IPSUM</a>
+		</li>
+
+		<li class="main-menu__departament">
+			<a class="main-menu__departament-link" href="#"  title="LOREM IPSUM">LOREM IPSUM</a>
+		</li>
+	</ul>
+</nav>

src/template-pagina/sub-templates/sabrinamiranda-header.html

@@ -5,8 +5,8 @@
 				<button class="menu__button">
 					<i class="sprite sprite-menu-icon"></i>
 				</button>
-				
+
-				<nav class="main-menu"></nav>
+				<vtex.cmc:menuPrincipal />
 			</div>