melhorias de layout

juanfariasdev · May 11, 2022 · 6b1c8a3 · 6b1c8a3 · vercel · May 11, 2022
1 parent 52993a3
commit 6b1c8a3
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 32 deletions.
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -10,10 +10,16 @@ function Header(){
     return(
         <header className={styles.headerContainer}>
             <div className={styles.headerContent}>
-                <Link href={"/"}><a><Image src="/images/logo.svg" alt= "Logo IG.News" width='150px' height='300px' layout="raw"/></a></Link>
+                <Link href={"/"}><a><Image src="/images/logo.svg" alt= "Logo IG.News" width='150px' height='50px' layout="raw"/></a></Link>
                 <nav>
-                    <ActiveLink activeClassName={styles.active} href={"/"} prefetch={true}><a>Home</a></ActiveLink>
-                    <ActiveLink activeClassName={styles.active}  href={"/posts"} prefetch={true}><a>Posts</a></ActiveLink>
+                    <ul className={styles.nav_menu}>
+                        <li>
+                            <ActiveLink activeClassName={styles.active} href={"/"} prefetch={true}><a>Home</a></ActiveLink>
+                        </li>
+                        <li>
+                            <ActiveLink activeClassName={styles.active}  href={"/posts"} prefetch={true}><a>Posts</a></ActiveLink>
+                        </li>
+                    </ul>
                 </nav>
 
             <SignInButton />

diff --git a/src/components/Header/styles.module.scss b/src/components/Header/styles.module.scss
@@ -16,42 +16,59 @@
         margin-left: 5rem;
         height: 5rem;
 
-        a{
-            display: inline-block;
-            position: relative;
-            padding: 0 0.5rem;
-            height: 5rem;
-            line-height: 5rem;
-            color: var(--gray-300);
-
-            transition: color 0.2s;
-
-            & + a {
-                margin-left: 2rem;
-            }
-
-            &:hover {
-                color: var(--white);
-            }
+        ul{
+            list-style: none;
 
             &.active {
-                color: var(--white);
-                font-weight: bold;
+                height: auto;
             }
 
-            &.active::after {
-                content: '';
-                height: 3px;
-                border-radius: 3px 3px 0 0;
-                width: 100%;
-                position: absolute;
-                bottom: 1px;
-                left: 0;
-                background-color: var(--yellow-500);
-            }
+            li{
+                float: left;
+                @media(max-width: 767px){
+                    width: 100%;
+                }
+
+                a{
+                    display: inline-block;
+                    position: relative;
+                    padding: 0 0.5rem;
+                    height: 5rem;
+                    line-height: 5rem;
+                    color: var(--gray-300);
+
+                    transition: color 0.2s;
+
+                    & + a {
+                        margin-left: 2rem;
+                    }
+
+                    &:hover {
+                        color: var(--white);
+                    }
+
+                    &.active {
+                        color: var(--white);
+                        font-weight: bold;
+                    }
+
+                    &.active::after {
+                        content: '';
+                        height: 3px;
+                        border-radius: 3px 3px 0 0;
+                        width: 100%;
+                        position: absolute;
+                        bottom: 1px;
+                        left: 0;
+                        background-color: var(--yellow-500);
+                    }
+                }
         }
     }
 
+
+    }
+
     button {
         margin-left: auto;
     }

diff --git a/src/pages/home.module.scss b/src/pages/home.module.scss
@@ -1,6 +1,7 @@
 .contentContainer {
     height: calc(100vh - 5rem);
     min-height: 600px;
+    margin: 0 auto;
 
     display: flex;
     align-items: center;