responsive login buttton

src/components/Header/index.tsx

@@ -8,6 +8,9 @@ import { UserRootState } from "../../store/type";
 function Header() {
   const [searchVal, setSearchVal] = useState('');
   const [dropdown, setDropdown] = useState(false);
+  const [pageState, setPageState] = useState({
+    profileMenu: false
+  })
 
   const user = useSelector((state: UserRootState) => state.auth)
 
@@ -23,7 +26,7 @@ function Header() {
   const onDropdown = (): void => {
     document.body.style.overflow = "hidden"
 
-    if(dropdown) {
+    if (dropdown) {
       document.body.style.overflowX = "hidden";
       document.body.style.overflowY = "scroll";
     }
@@ -36,12 +39,24 @@ function Header() {
         <a href={"/"}>
           <h1 className={`title ${dropdown ? 'title-dropdown' : ""}`}>Hilingin</h1>
         </a>
-        <div className={'user-img self-center mr-5'} style={dropdown ? { display: 'none'} : ''}>
+        <div className={'user-img self-center mr-5'} style={dropdown ? { display: 'none' } : ''}>
+          <a href={user.username ? '#' : '/login'} onClick={() => user.username ? setPageState({ ...pageState, profileMenu: !pageState.profileMenu }) : ''}>
             <img
               loading={'lazy'}
               style={{ width: 40, borderRadius: 15 }}
               src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'}
             />
+          </a>
+          {user.username && 
+            <div className={'profile-dropdown-img bg-secondary text-left'} style={pageState.profileMenu ? { display: 'block'} : { display: 'none'}}>
+              <a href={'#'}><div className={'p-2'}>Profile</div></a>
+              <a href={'#'}><div className={'p-2'}>Feed</div></a>
+              <a href={'#'}><div className={'p-2'}>Add location</div></a>
+              <a href={'#'}><div className={'p-2'}>Logout</div></a>
+              {/* <div className={'p-2'}><a href={'#'}>Halo</a></div> */}
+              {/* <div className={'p-2'}><a href={'#'}>Halo</a></div> */}
+            </div>
+          }
         </div>
         <form onSubmit={onSearchSubmit} className={`search-input ${dropdown ? "search-input-dropdown" : ""}`}>
           <label>
@@ -54,7 +69,7 @@ function Header() {
             />
           </label>
         </form>
-        <button onClick={onDropdown} className={`dropdown-menu bg-secondary ${dropdown ? 'ml-auto' : ''}`} style={{ padding: 5, borderRadius: 10}}>
+        <button onClick={onDropdown} className={`dropdown-menu bg-secondary ${dropdown ? 'ml-auto' : ''}`} style={{ padding: 5, borderRadius: 10 }}>
           <svg xmlns="http://www.w3.org/2000/svg" height="30" fill="white" viewBox="0 -960 960 960" width="30"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg>
         </button>
       </div>
@@ -64,11 +79,22 @@ function Header() {
         }
         <a href="/best-places" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Top Places</a>
         <a href="/discover" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Discover</a>
-        <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Trending Places</a>
         <a href="/stories" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Stories</a>
         <a href="/news-events" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>News / Events</a>
         <a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Forum</a>
-        <a href={user.username ? '#' : '/login'} className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>{user.username ? user.username : 'Sign in'}</a>
+        <div className={'profile-container'}>
+          <a href={user.username ? '#' : '/login'} onClick={() => user.username ? setPageState({ ...pageState, profileMenu: !pageState.profileMenu }) : ''} className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>{user.username ? user.username : 'Sign in'}</a>
+          {user && screen.width > 600 &&
+            <div className={'profile-dropdown bg-secondary ml-6'} style={pageState.profileMenu ? { display: 'block' } : {display: 'none'}}>
+              <a href={'#'}><div className={'p-1'}>Profile</div></a>
+              <a href={'#'}><div className={'p-1'}>Feed</div></a>
+              <a href={'#'}><div className={'p-1'}>Add location</div></a>
+              <a href={'#'}><div className={'p-1'}>Logout</div></a>
+              {/* <div className={'p-2'}><a href={'#'}>Halo</a></div> */}
+              {/* <div className={'p-2'}><a href={'#'}>Halo</a></div> */}
+            </div>
+          }
+        </div>
       </div>
     </header>
   )

src/components/Header/style.css

@@ -1,3 +1,91 @@
+.dropdown-menu {
+  display: none;
+}
+
+
+label {
+  position: relative;
+}
+
+label:before {
+  content: "";
+  position: absolute;
+  left: 10px;
+  top: 0;
+  bottom: 0;
+  width: 18px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='18' height='18' viewBox='0 0 25 25' fill-rule='evenodd'%3E%3Cpath d='M16.036 18.455l2.404-2.405 5.586 5.587-2.404 2.404zM8.5 2C12.1 2 15 4.9 15 8.5S12.1 15 8.5 15 2 12.1 2 8.5 4.9 2 8.5 2zm0-2C3.8 0 0 3.8 0 8.5S3.8 17 8.5 17 17 13.2 17 8.5 13.2 0 8.5 0zM15 16a1 1 0 1 1 2 0 1 1 0 1 1-2 0'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.text-input-search {
+  padding: 12px 20px 12px 40px;
+  border-radius: 12px;
+  width: 325px; 
+  font-size: 1em; 
+  text-transform: lowercase;
+  background-color: #2f3136;
+}
+
+.title {
+  font-size: 32px;
+}
+
+.navLink {
+  padding: 0px 30px;
+  font-size: 0.8em;
+}
+
+.profile-dropdown {
+  display: block;
+  position: absolute;
+  padding: 5px;
+  width: 135px;
+  font-size: 13px;
+}
+
+.profile-dropdown a div:hover {
+  background-color: #a8adb3;
+  color: white;
+}
+
+.profile-dropdown-img {
+  position: absolute;
+  font-size: 13px;
+  padding: 5px;
+  margin-top: 5px;
+  right: 70px;
+  width: 130px;
+  z-index: 9999;
+}
+
+.profile-dropdown-img a div:hover {
+  background-color: #a8adb3;
+  color: white;
+}
+
+.nav-container {
+  background-color: #2f3136;
+  padding: 10px 0;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  /* display: 'inline-block'; 
+  max-width: '100%'; 
+  text-align: 'center'; */
+}
+
+.search-input {
+  margin-left: auto;
+}
+
+.user-img {
+  display: none;
+}
+
+
+
 @media screen and (max-width: 768px) {
   a.navLink {
     font-size: 12px;
@@ -15,6 +103,10 @@
     padding: 10px 0
   }
 
+  .profile-container {
+    display: none;
+  }
+
   div.nav-container {
     padding: 0 20px;
     height: 100vh;
@@ -59,6 +151,10 @@
     border-bottom-width: 1px;
     margin-bottom: 0px;
   }
+
+  .user-img .profile-dropdown-img {
+    display: block;
+  }
 }
 
 @media screen and (max-width: 390px){
@@ -66,62 +162,3 @@
     width: 230px;
   }
 }
-
-.dropdown-menu {
-  display: none;
-}
-
-
-label {
-  position: relative;
-}
-
-label:before {
-  content: "";
-  position: absolute;
-  left: 10px;
-  top: 0;
-  bottom: 0;
-  width: 18px;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='18' height='18' viewBox='0 0 25 25' fill-rule='evenodd'%3E%3Cpath d='M16.036 18.455l2.404-2.405 5.586 5.587-2.404 2.404zM8.5 2C12.1 2 15 4.9 15 8.5S12.1 15 8.5 15 2 12.1 2 8.5 4.9 2 8.5 2zm0-2C3.8 0 0 3.8 0 8.5S3.8 17 8.5 17 17 13.2 17 8.5 13.2 0 8.5 0zM15 16a1 1 0 1 1 2 0 1 1 0 1 1-2 0'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
-}
-
-.text-input-search {
-  padding: 12px 20px 12px 40px;
-  border-radius: 12px;
-  width: 325px; 
-  font-size: 1em; 
-  text-transform: lowercase;
-  background-color: #2f3136;
-}
-
-.title {
-  font-size: 32px;
-}
-
-.navLink {
-  padding: 0px 30px;
-  font-size: 0.8em;
-}
-
-
-.nav-container {
-  background-color: #2f3136;
-  padding: 10px 0;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  /* display: 'inline-block'; 
-  max-width: '100%'; 
-  text-align: 'center'; */
-}
-
-.search-input {
-  margin-left: auto;
-}
-
-.user-img {
-  display: none;
-}