responsive login buttton
This commit is contained in:
parent
ade7e71d74
commit
ba1ceb1af3
@ -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)
|
||||
|
||||
@ -22,8 +25,8 @@ 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,25 +39,37 @@ 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'} : ''}>
|
||||
<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'}
|
||||
/>
|
||||
<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>
|
||||
<input
|
||||
type="text"
|
||||
value={searchVal}
|
||||
onInput={onInput}
|
||||
placeholder="Yogyakarta, Pantai Cidaun ..."
|
||||
class="text-input-search"
|
||||
/>
|
||||
</label>
|
||||
</form>
|
||||
<button onClick={onDropdown} className={`dropdown-menu bg-secondary ${dropdown ? 'ml-auto' : ''}`} style={{ padding: 5, borderRadius: 10}}>
|
||||
<form onSubmit={onSearchSubmit} className={`search-input ${dropdown ? "search-input-dropdown" : ""}`}>
|
||||
<label>
|
||||
<input
|
||||
type="text"
|
||||
value={searchVal}
|
||||
onInput={onInput}
|
||||
placeholder="Yogyakarta, Pantai Cidaun ..."
|
||||
class="text-input-search"
|
||||
/>
|
||||
</label>
|
||||
</form>
|
||||
<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>
|
||||
)
|
||||
|
||||
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user