oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

full width menu bar

Browse Source
This commit is contained in:
Matthias Kretschmann 2021-06-09 19:40:43 +02:00
parent 270f567879
commit 9943dae93c
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 19 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/molecules/Menu.module.css
View File

@ -1,13 +1,9 @@
.menu { .menu {
width: 100%; width: 100%;
}
.menu > div {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-top: calc(var(--spacer) / 2); padding: calc(var(--spacer) / 2) var(--spacer);
padding-bottom: calc(var(--spacer) / 2);
} }
.logoUnit { .logoUnit {

39
src/components/molecules/Menu.tsx
View File

@ -4,7 +4,6 @@ import { useLocation } from '@reach/router'
import loadable from '@loadable/component' import loadable from '@loadable/component'
import styles from './Menu.module.css' import styles from './Menu.module.css'
import { useSiteMetadata } from '../../hooks/useSiteMetadata' import { useSiteMetadata } from '../../hooks/useSiteMetadata'
import Container from '../atoms/Container'
import UserPreferences from './UserPreferences' import UserPreferences from './UserPreferences'
import Badge from '../atoms/Badge' import Badge from '../atoms/Badge'
import Logo from '../atoms/Logo' import Logo from '../atoms/Logo'
@ -36,28 +35,26 @@ export default function Menu(): ReactElement {
return ( return (
<nav className={styles.menu}> <nav className={styles.menu}>
<Container> <Link to="/" className={styles.logoUnit}>
<Link to="/" className={styles.logoUnit}> <Logo />
<Logo /> <h1 className={styles.title}>
<h1 className={styles.title}> {siteTitle} <Badge label="beta" />
{siteTitle} <Badge label="beta" /> </h1>
</h1> </Link>
</Link>
<ul className={styles.navigation}> <ul className={styles.navigation}>
{menu.map((item: MenuItem) => ( {menu.map((item: MenuItem) => (
<li key={item.name}> <li key={item.name}>
<MenuLink item={item} /> <MenuLink item={item} />
</li>
))}
<li>
<Wallet />
</li> </li>
<li> ))}
<UserPreferences /> <li>
</li> <Wallet />
</ul> </li>
</Container> <li>
<UserPreferences />
</li>
</ul>
</nav> </nav>
) )
} }