Fix: Set full width to header menu links

Planet-NULLCAST · Jul 14, 2021 · 6593838 · 6593838
1 parent 8b82d6d
commit 6593838
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 15 deletions.
diff --git a/component/layout/Profile/Profile.js b/component/layout/Profile/Profile.js
@@ -54,7 +54,7 @@ export default function Profile({ onLogout, username }) {
         <ul>
           <li>
             <Link href={`/u/${userCookie.username}`}>
-              <a className="linkUnderline">
+              <a className="linkUnderline w-full">
                 Profile
                 <svg
                   className="ml-3"
@@ -74,18 +74,18 @@ export default function Profile({ onLogout, username }) {
           {isAdmin && (
             <li>
               <Link href="/admin">
-                <button className="linkUnderline">Admin Console</button>
+                <a className="linkUnderline w-full">Admin Console</a>
               </Link>
             </li>
           )}
           <li>
             <Link href="/settings">
-              <button className="linkUnderline">Settings</button>
+              <a className="linkUnderline w-full">Settings</a>
             </Link>
           </li>
           <li>
             {/* <a onClick={onLogout}>Logout</a> */}
-            <button onClick={onLogout} className="linkUnderline">
+            <button onClick={onLogout} className="linkUnderline w-full">
               Logout
             </button>
           </li>

diff --git a/component/layout/SiteHeader/SiteHeader.jsx b/component/layout/SiteHeader/SiteHeader.jsx
@@ -12,9 +12,9 @@ export default function HomeSpotlight() {
   // const ShowMenu = () => {
   //   setMenu(menu);
   // };
-  useEffect(() => {
-    document.body.classList.toggle("menuOpen", menu);
-  }, [menu]);
+  // useEffect(() => {
+  //   document.body.classList.toggle("menuOpen", menu);
+  // }, [menu]);
   const router = useRouter();
   // console.log("aspath", router.asPath);
   const currentPath = router.asPath;
@@ -109,13 +109,17 @@ export default function HomeSpotlight() {
                     <Link href="/posts">
                       <a onClick={() => setMenu(true)}>
                         Write
-                        <img src="/images/hand.png" className="ml-1" alt="" />
+                        <img
+                          src="/images/hand.png"
+                          className="ml-1"
+                          alt="hand"
+                        />
                       </a>
                     </Link>
                   </li>
                   <li>
                     {/*TO DO: add some menu blog, events, leaderboard drop down*/}
-                    <a onClick={() => setMenu(true)}>
+                    <a onClick={() => setMenu(true)} className="w-full">
                       Explore
                       <span className={styles.downArrow}>
                         <svg
@@ -133,12 +137,16 @@ export default function HomeSpotlight() {
                     <ul>
                       <li>
                         <Link href="/blog">
-                          <a onClick={() => setMenu(true)}>Blog</a>
+                          <a onClick={() => setMenu(true)} className="w-full">
+                            Blog
+                          </a>
                         </Link>
                       </li>
                       <li>
                         <Link href="/code-of-conduct">
-                          <a onClick={() => setMenu(true)}>Code of conduct</a>
+                          <a onClick={() => setMenu(true)} className="w-full">
+                            Code of conduct
+                          </a>
                         </Link>
                       </li>
                     </ul>

diff --git a/component/layout/SiteHeader/SiteHeader.module.scss b/component/layout/SiteHeader/SiteHeader.module.scss
@@ -153,7 +153,7 @@
           top: 100%;
         }
         @media (max-width: 991px) {
-          max-height: 1000px;
+          // max-height: 1000px;
         }
       }
     }
@@ -174,7 +174,7 @@
   }
 
   ul {
-    transition: all ease .3s;
+    transition: all ease 0.3s;
     @media (min-width: 992px) {
       @apply absolute top-1/2 right-0 lg:-right-5 w-52 px-5 py-3 opacity-0 pointer-events-none z-50;
       background: #fff;
@@ -193,7 +193,7 @@
     @media (max-width: 991px) {
       @apply max-h-0 overflow-hidden;
     }
-  
+
     li {
       @apply py-2 m-0;
       border-top: 1px solid #f3f3f3;
@@ -226,7 +226,6 @@
       fill: #fff;
     }
   }
-
 }
 
 .wrapBtn {