Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update navbar #120

Merged
merged 12 commits into from
Jul 13, 2022
Merged

feat: update navbar #120

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
55019cd
Add first styles to navbar
evavirseda Jul 11, 2022
4ce2e78
Refine navbar
evavirseda Jul 11, 2022
7f8e052
Add favicon
evavirseda Jul 11, 2022
3ce69ab
cleanup
evavirseda Jul 11, 2022
7fd599b
Reorganize images
evavirseda Jul 12, 2022
0ea137c
Update mobile icon
evavirseda Jul 12, 2022
12c52ce
Remove Tooltip and fix link
evavirseda Jul 12, 2022
379e662
Merge branch 'dev' into feat/update-navbar
evavirseda Jul 12, 2022
ab8cbda
Fix font color and svg
evavirseda Jul 12, 2022
a1b523d
PR updates
evavirseda Jul 12, 2022
0e73060
Remove create candy machine route
evavirseda Jul 13, 2022
d2adc83
Add font size and letter spacing to wallet button
evavirseda Jul 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 82 additions & 64 deletions components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,104 @@
import { useWallet } from '@solana/wallet-adapter-react'
import { FC, useState } from 'react'
import Image from 'next/image'
import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
import { NavList, Breadcrumbs } from '@primer/react'
import { useRouter } from 'next/router'
import Link from 'next/link'
import { FC } from 'react'

interface INavbarElement {
title: string
url: string
tooltip?: string
disabled?: boolean
}
import { INavbarElement } from 'lib/interfaces'

const Navbar: FC = () => {
const { publicKey } = useWallet()

const router = useRouter()
const [open, setOpen] = useState(false)
const NAVBAR_ELEMENTS: INavbarElement[] = [
{
title: 'Manage CMs',
title: 'Dashboard',
url: '/',
cpl121 marked this conversation as resolved.
Show resolved Hide resolved
tooltip: 'Manage Candy Machines',
},
{
title: 'Create CMs',
title: 'Candy Machines',
url: '/create-candy-machine',
cpl121 marked this conversation as resolved.
Show resolved Hide resolved
tooltip: 'Create Candy Machine',
},
]

return (
<nav
className='
fixed top-0 left-0 z-10
flex flex-row md:flex-col md:justify-between py-4 px-6
md:h-screen w-screen md:w-48
bg-gray-200
'
className='color-bg-emphasis color-fg-subtle position-fixed top-0 left-0 z-10 width-full d-flex flex-row color-fg-on-emphasis'
style={{ height: '70px' }}
>
<div className='w-full'>
<h4 className='uppercase mb-6'>Sugar Rush</h4>
<div className='w-full flex flex-row md:flex-col space-x-4 md:space-x-0 md:space-y-4'>
{NAVBAR_ELEMENTS.map((element) => {
return <NavbarElement disabled={!publicKey} key={element.url} {...element} />
})}
<div className='d-flex width-full container-xl p-responsive py-4 flex-justify-between flex-items-center'>
<div
className='d-flex flex-items-center flex-justify-start
width-full'
>
<div className='d-flex flex-shrink-0'>
<Image src='/logo.png' alt='logo' width={29} height={21} />
<h4 className='ml-2'>Sugar rush</h4>
</div>

<Breadcrumbs className='d-none d-md-flex flex-row ml-3'>
{NAVBAR_ELEMENTS.map((element) => {
return (
<Link href={element.url} key={element.url}>
<Breadcrumbs.Item
href={element.url}
key={element.url}
className={`${
router.asPath === element.url ? 'text-bold' : ''
} color-fg-on-emphasis`}
>
{element.title}
</Breadcrumbs.Item>
</Link>
)
})}
</Breadcrumbs>
<div className='d-md-none'>
<div
onClick={() => setOpen(!open)}
className='ml-2 d-flex flex-justify-center flex-items-center'
style={{ cursor: 'pointer' }}
>
<Image
src='/down-arrow.svg'
alt='logo'
width={21}
height={21}
style={{
transform: `${open ? 'rotate(90deg)' : 'rotate(0deg)'}`,
transition: 'transform 0.2s linear',
}}
/>
</div>
</div>
{open && (
<NavList
className='d-flex position-absolute top-8 color-bg-emphasis color-fg-subtle width-full left-0'
sx={{ height: '100vh' }}
>
{NAVBAR_ELEMENTS.map((element) => {
return (
<Link href={element.url} key={element.url}>
<NavList.Item
VmMad marked this conversation as resolved.
Show resolved Hide resolved
key={element.url}
href={element.url}
onClick={() => setOpen(!open)}
className={`${
router.asPath === element.url ? 'text-bold' : ''
} color-fg-on-emphasis`}
>
{element.title}
</NavList.Item>
</Link>
)
})}
</NavList>
)}
</div>

<WalletMultiButton />
</div>
<p className='text-left text-xs'>
By{' '}
<a href='https://boxfish.studio' target='_blank' rel='noopener noreferrer'>
Boxfish Studio
</a>
</p>
</nav>
)
}

const NavbarElement = ({ title, url, tooltip, disabled }: INavbarElement) => (
<Link href={url}>
<div
style={{ pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? '50%' : '' }}
className={`
cursor-pointer
group
w-auto md:w-full
relative
flex items-center
transition-all
font-semibold text-blue-regular
`}
>
{title}
<span
style={{ left: 'calc(100% + 16px)' }}
className='
absolute p-2 m-2 w-max
text-xs font-bold text-red
transition-all duration-300
bg-gray-800 text-white
rounded-md shadow-md
scale-0 group-hover:scale-100'
>
{tooltip}
</span>
</div>
</Link>
)

export default Navbar
6 changes: 6 additions & 0 deletions lib/interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,9 @@ export interface ICarousel {
title: string
image: string
}
export interface INavbarElement {
title: string
url: string
tooltip?: string
disabled?: boolean
}
5 changes: 2 additions & 3 deletions pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
TorusWalletAdapter,
} from '@solana/wallet-adapter-wallets'
import { clusterApiUrl } from '@solana/web3.js'
import { Navbar, Wallet } from 'components'
import { Navbar } from 'components'
import type { AppProps } from 'next/app'
import React, { useMemo } from 'react'
import '../styles/globals.scss'
Expand Down Expand Up @@ -41,9 +41,8 @@ function MyApp({ Component, pageProps }: AppProps) {
<ThemeProvider theme={customTheme}>
<ConnectionProvider endpoint={endpoint}>
<WalletProvider wallets={wallets}>
<Navbar />
<WalletModalProvider>
<Wallet />
<Navbar />
<Component {...pageProps} />
</WalletModalProvider>
</WalletProvider>
Expand Down
4 changes: 4 additions & 0 deletions public/down-arrow.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified public/favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file added public/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 16 additions & 6 deletions styles/globals.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
@import './wallet-adapter.scss';
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
@import "./wallet-adapter.scss";
@import "@primer/css/index.scss";

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
font-family: 'Inter', sans-serif;
font-family: "Inter", sans-serif;
@apply text-base;
}

Expand All @@ -30,15 +30,25 @@ h1 {
}
h2 {
@apply text-2xl;
}
}
h3 {
@apply text-xl;
}
h4, h5, h6 {
h4,
h5,
h6 {
@apply text-lg;
}

a {
text-decoration: none;
@apply text-blue-regular;
}

.wallet-adapter-button {
cpl121 marked this conversation as resolved.
Show resolved Hide resolved
background-color: #4e44ce !important;
padding: 6px 12px !important;
height: 32px !important;
border-radius: 2px !important;
flex-shrink: 0;
}