+
diff --git a/src/components/Header/styles.module.scss b/src/components/Header/styles.module.scss
index dfd2338..fc95614 100644
--- a/src/components/Header/styles.module.scss
+++ b/src/components/Header/styles.module.scss
@@ -1,10 +1,15 @@
// --------------------- Header Top --------------------- //
.header_top {
+ position: relative;
background: black;
- padding: 1.72vw 0;
+ padding: 25px 0;
color: white;
+ .aside_menu {
+ display: none;
+ }
+
.first_div {
display: flex;
align-items: center;
@@ -17,10 +22,6 @@
}
.search {
- width: 20.63vw;
- background: white;
- border-radius: 5px;
- border: 2px solid #f2f2f2;
position: relative;
display: flex;
align-items: center;
@@ -28,9 +29,13 @@
gap: 3.79%;
input {
+ padding-left: 16px;
+ width: 20.63vw;
+ background: white;
+ border-radius: 5px;
+ border: 2px solid #f2f2f2;
display: flex;
height: 32px;
- width: 77.27%;
border: 0;
font-size: 1.09vw;
@@ -43,7 +48,8 @@
cursor: pointer;
height: 1.41vw;
display: flex;
- position: relative;
+ position: absolute;
+ right: 16px;
}
}
@@ -93,6 +99,51 @@
}
}
+@media screen and (max-width: 1024px) {
+ .header_top {
+ .first_div {
+ .aside_menu {
+ display: flex;
+ padding-left: 16px;
+ background-color: black;
+ border: 0;
+ }
+ }
+ height: 139px;
+ .search {
+ position: absolute !important;
+ bottom: 25px !important;
+ left: 16px !important;
+ right: 16px !important;
+ input {
+ width: 100% !important;
+ font-size: 14px !important;
+ line-height: 16px !important;
+ }
+ img {
+ width: 18px !important;
+ }
+ }
+ .m3_logo {
+ width: 236px !important;
+ height: 25.86px !important;
+ padding: 0 !important;
+ }
+ .header_button {
+ .button_entrar {
+ display: none !important;
+ }
+ .cart_button {
+ img {
+ position: absolute !important;
+ width: 28px !important;
+ right: 16px !important;
+ }
+ }
+ }
+ }
+}
+
// --------------------- Header Bottom --------------------- //
.header_bottom {
@@ -113,3 +164,9 @@
cursor: pointer;
}
}
+
+@media screen and (max-width: 1024px) {
+ .header_bottom {
+ display: none;
+ }
+}
diff --git a/src/components/Home/styles.module.scss b/src/components/Home/styles.module.scss
index 5151d8e..af61382 100644
--- a/src/components/Home/styles.module.scss
+++ b/src/components/Home/styles.module.scss
@@ -110,3 +110,62 @@
}
}
}
+
+@media screen and (max-width: 1024px) {
+ .bread_crumb {
+ margin-left: 16px;
+
+ .bread_crumb_home {
+ height: 16px;
+ }
+
+ .bread_crumb_arrow {
+ height: 8px;
+ }
+
+ h2 {
+ font-size: 12px;
+ line-height: 14px;
+ }
+ }
+
+ .tab_title {
+ margin: 80px 0 40px;
+
+ h2 {
+ font-size: 24px;
+ }
+ }
+
+ .tab_layout {
+ display: flex;
+ flex-direction: column;
+ margin: 0 16px;
+
+ .tabs {
+ margin: 0;
+ border-right: none;
+ .tab_active {
+ width: 100% !important;
+ }
+
+ button {
+ width: 100% !important;
+ }
+ }
+ }
+
+ .tab_content {
+ margin-bottom: 81px;
+
+ h2 {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ p {
+ font-size: 12px;
+ line-height: 18px;
+ }
+ }
+}
diff --git a/src/contexts/asideMenuContext.tsx b/src/contexts/asideMenuContext.tsx
new file mode 100644
index 0000000..212460e
--- /dev/null
+++ b/src/contexts/asideMenuContext.tsx
@@ -0,0 +1,27 @@
+import React, { createContext, ReactNode, useContext, useState } from "react";
+
+interface AsideMenuContextProviderProps {
+ isAsideMenuOpen: boolean;
+ setAsideMenuOpen: React.Dispatch
>;
+}
+
+export const asideMenuContext = createContext(
+ {} as AsideMenuContextProviderProps
+);
+
+export function useAside() {
+ return useContext(asideMenuContext);
+}
+
+export function AsideMenuContextProvider({
+ children,
+}: {
+ children: ReactNode;
+}) {
+ const [isAsideMenuOpen, setAsideMenuOpen] = useState(false);
+ return (
+
+ {children}
+
+ );
+}