feat: Cria menu deskotp

src/arquivos/sass/partials/_header.scss

@@ -1,6 +1,7 @@
 .page-header {
 	background: $black-500;
 	padding: 28px 0 29px;
+	position: relative;
 
 	@include mq(lg, max) {
 		padding: 18px 0 0;
@@ -149,5 +150,9 @@
 	&__search-box {
 		margin-top: 18px;
 		border-top: 1px solid;
+
+		@include mq(lg, min) {
+			display: none;
+		}
 	}
 }

src/arquivos/sass/partials/_menu.scss

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

src/arquivos/sass/utils/_normalize.scss

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

src/controles-customizados/menuPrincipal.html

@@ -0,0 +1,78 @@
+<nav class="main-menu">
+	<ul class="main-menu__departments">
+		<li class="main-menu__department">
+			<a class="main-menu__department-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-right-arrow-icon"></i>
+					</a>
+				</div>
+			</div>
+		</li>
+		<li class="main-menu__department">
+			<a class="main-menu__department-link" href="#" title="LOREM IPSUM"
+				>LOREM IPSUM</a
+			>
+		</li>
+		<li class="main-menu__department">
+			<a class="main-menu__department-link" href="#" title="LOREM IPSUM"
+				>LOREM IPSUM</a
+			>
+		</li>
+	</ul>
+</nav>

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

@@ -6,7 +6,7 @@
 					<i class="sprite sprite-menu-icon"></i>
 				</button>
 
-				<nav class="main-menu"></nav>
+				<vtex.cmc:menuPrincipal />
 			</div>
 
 			<a href="/">