src/template/Header/index.module.scss

@@ -8,13 +8,13 @@ $containers: (
 );
 
 .header {
+	padding: 25px 0;
+
 	position: sticky;
 	top: 0;
 	left: 0;
 	z-index: 1000;
 
-	padding: 25px 0;
-
 	background-color: var(--clr-common-black);
 }
 
@@ -29,12 +29,12 @@ $containers: (
 }
 
 .content {
+	padding: 0px 16px;
+	margin-bottom: 27.14px;
+
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-
-	padding: 0px 16px;
-	margin-bottom: 27.14px;
 }
 
 .content {
@@ -73,14 +73,14 @@ $containers: (
 }
 
 .search {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
 	min-height: 36px;
 	border: 2px solid var(--clr-gray-150);
 	border-radius: 5px;
 
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
 	background-color: var(--clr-common-white);
 
 	input {
@@ -95,13 +95,13 @@ $containers: (
 
 .search {
 	button {
+		width: 36px;
+		height: 100%;
+
 		display: flex;
 		align-items: center;
 		justify-content: center;
 
-		width: 36px;
-		height: 100%;
-
 		background-color: var(--clr-common-white);
 	}
 }
@@ -183,13 +183,13 @@ $containers: (
 
 .menu {
 	@media only screen and (max-width: 1024px) {
+		width: 100vw;
+		height: 100vh;
+
 		position: fixed;
 		left: -100%;
 		top: 0;
 
-		width: 100vw;
-		height: 100vh;
-
 		background-color: transparent;
 		transition: 300ms ease;
 
@@ -257,10 +257,11 @@ $containers: (
 }
 
 .actions-bottom {
+	padding: 0 16px;
+
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 0 16px;
 }
 
 // styles for menu is active
@@ -275,20 +276,20 @@ $containers: (
 // menu styles for large devices 1025 > x
 .menu {
 	@media only screen and (min-width: 1025px) {
-		display: block;
-
 		width: 100%;
 
+		display: block;
+
 		.list {
+			width: function.fluid(map-get($containers, 'md'), 1280px);
+			padding: 14px 0;
+			margin: 0 auto;
+
 			display: flex;
 			align-items: center;
 			justify-content: flex-start;
 			gap: 55px;
 
-			width: function.fluid(map-get($containers, 'md'), 1280px);
-			padding: 14px 0;
-			margin: 0 auto;
-
 			background-color: var(--clr-common-black);
 
 			a {
@@ -349,9 +350,10 @@ $containers: (
 
 // added search bottom box for small devices, medium devices
 .search-bottom {
-	display: flex;
 	padding: 0 16px;
 
+	display: flex;
+
 	&-content {
 		width: 100%;
 	}

src/template/Header/index.tsx

@@ -21,6 +21,44 @@ export function Search({ ...props }: SearchProps) {
 	)
 }
 
+interface ContainerBottomProps {
+	isOpen: boolean
+	handleClose: () => void
+}
+
+const ContainerBottom = ({ isOpen, handleClose }: ContainerBottomProps) => {
+	return (
+		<div
+			className={`${css.menu} ${isOpen ? css.active : ''}`}
+			data-jsx="target"
+		>
+			<div className={css['menu-content']}>
+				<div className={css['actions-bottom']}>
+					<a href="/">Entrar</a>
+					<button
+						onClick={handleClose}
+						className={css.close}
+						type="button"
+						data-jsx="event"
+					>
+						<img src={closeIcon} alt="ícone do botão para fechar o menu" />
+					</button>
+				</div>
+
+				<ul className={css.list}>
+					{['Cursos', 'Saiba Mais', 'Institucionais'].map((item, index) => {
+						return (
+							<li key={'header-bottom-list-' + index}>
+								<a href="/">{item}</a>
+							</li>
+						)
+					})}
+				</ul>
+			</div>
+		</div>
+	)
+}
+
 export const Header = () => {
 	const [isOpenMenu, setIsOpenMenu] = useState(false)
 
@@ -75,36 +113,7 @@ export const Header = () => {
 					<Search className={`${css.search} ${css['search-bottom-content']}`} />
 				</div>
 
-				<div
-					className={`${css.menu} ${isOpenMenu ? css.active : ''}`}
-					data-jsx="target"
-				>
-					<div className={css['menu-content']}>
-						<div className={css['actions-bottom']}>
-							<a href="/">Entrar</a>
-							<button
-								onClick={handleClose}
-								className={css.close}
-								type="button"
-								data-jsx="event"
-							>
-								<img src={closeIcon} alt="ícone do botão para fechar o menu" />
-							</button>
-						</div>
-
-						<ul className={css.list}>
-							<li>
-								<a href="/">Cursos</a>
-							</li>
-							<li>
-								<a href="/">Saiba Mais</a>
-							</li>
-							<li>
-								<a href="/">Institucionais</a>
-							</li>
-						</ul>
-					</div>
-				</div>
+				<ContainerBottom isOpen={isOpenMenu} handleClose={handleClose} />
 			</nav>
 		</header>
 	)