aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2025-12-26 10:44:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

update: navigation component on mobile

Browse Source
This commit is contained in:
MTG2000
2022-08-10 14:06:45 +03:00
parent 2e369d4b3c
commit 4c50bfbdad
1 changed files with 58 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/Components/Navbar/NavMobile.tsx
View File

@@ -90,44 +90,47 @@ export default function NavMobile() {
</div>
<div className="flex-1 flex justify-end">
{curUser !== undefined &&
(curUser &&
<Menu
menuClassName='!p-8 !rounded-12'
menuButton={<MenuButton ><Avatar src={curUser.avatar} width={32} /> </MenuButton>}>
<MenuItem
href={createRoute({ type: 'profile', id: curUser.id, username: curUser.name })}
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name }));
}}
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
>
👾 Profile
</MenuItem>
<MenuItem
href="/edit-profile"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/edit-profile");
}}
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
>
⚙️ Settings
</MenuItem>
<MenuItem
href="/logout"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/logout");
}}
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
>
👋 Logout
</MenuItem>
</Menu>
{curUser ?
<Menu
menuClassName='!p-8 !rounded-12'
menuButton={<MenuButton ><Avatar src={curUser.avatar} width={32} /> </MenuButton>}>
<MenuItem
href={createRoute({ type: 'profile', id: curUser.id, username: curUser.name })}
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name }));
}}
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
>
👾 Profile
</MenuItem>
<MenuItem
href="/edit-profile"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/edit-profile");
}}
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
>
⚙️ Settings
</MenuItem>
<MenuItem
href="/logout"
onClick={(e) => {
e.syntheticEvent.preventDefault();
navigate("/logout");
}}
className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
>
👋 Logout
</MenuItem>
</Menu>
:
<Button size="sm" color="none" className="!text-body5 whitespace-nowrap" href="/login">
Connect ⚡
</Button>
)
}</div>
</div>
@@ -149,25 +152,16 @@ export default function NavMobile() {
<div className="flex flex-col gap-16 py-16">
<Search onResultClick={() => toggleDrawerOpen(false)} />
{
curUser ?
<Button
color="gray"
fullWidth
className="!py-16 px-40 rounded-12 "
href='/logout'
onClick={() => toggleDrawerOpen()}
>
Logout
</Button> :
<Button
color="primary"
fullWidth
className="!py-16 px-40 rounded-12 "
href='/login'
onClick={() => toggleDrawerOpen()}
>
Connect your lightning wallet ⚡️
</Button>
!curUser &&
<Button
color="primary"
fullWidth
className="!py-16 px-40 rounded-12 "
href='/login'
onClick={() => toggleDrawerOpen()}
>
Connect your lightning wallet ⚡️
</Button>
}
</div>
<ul className="px-32 flex flex-col py-16 gap-32 border-t">
@@ -270,6 +264,14 @@ export default function NavMobile() {
Donate
</Link>
</li>
<li className="relative">
<Link
to={'/logout'}
onClick={() => toggleDrawerOpen(false)}
className='text-body4 font-bold hover:text-primary-600'>
Logout 👋
</Link>
</li>
</ul>
<ul className="px-16 py-16 pb-32 flex flex-wrap gap-y-12 border-t pt-32 mt-auto">
<li className="text-body4 text-gray-500 hover:text-gray-700 w-1/2">