acid-info/logos-ordinals-dashboard
1
0
Fork 0
mirror of https://github.com/acid-info/logos-ordinals-dashboard.git synced 2025-01-26 13:20:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: show arrow to active nav item

Browse Source
This commit is contained in:
jinhojang6 2024-09-13 21:25:17 +09:00
parent feb90db4f0
commit e850e2a3dc
3 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/assets/navbar-arrow.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.02246 3.67285L1.02539 1.38965C0.815755 1.29395 0.667643 1.20052 0.581055 1.10938C0.494466 1.01367 0.451172 0.906576 0.451172 0.788086C0.451172 0.655924 0.489909 0.551107 0.567383 0.473633C0.649414 0.396159 0.758789 0.357422 0.895508 0.357422C0.963867 0.357422 1.03906 0.371094 1.12109 0.398438C1.20768 0.421224 1.31478 0.46224 1.44238 0.521484L6.87695 3.0166C6.89518 3.02572 6.92253 3.03939 6.95898 3.05762C7.36914 3.23991 7.57422 3.44499 7.57422 3.67285C7.57422 3.89616 7.3737 4.10124 6.97266 4.28809C6.92708 4.30632 6.89518 4.31999 6.87695 4.3291L1.44238 6.86523L1.41504 6.87891C1.17806 6.98372 1.00488 7.03613 0.895508 7.03613C0.758789 7.03613 0.649414 6.99512 0.567383 6.91309C0.489909 6.83105 0.451172 6.72168 0.451172 6.58496C0.451172 6.46647 0.494466 6.36165 0.581055 6.27051C0.667643 6.1748 0.815755 6.0791 1.02539 5.9834L6.02246 3.67285Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 974 B

BIN
public/dashboard/mock/operators/8.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 358 KiB

18
src/components/Header/Navbar/Navbar.tsx
View File

@ -1,5 +1,6 @@
import styled from '@emotion/styled'
import Link from 'next/link'
import { useRouter } from 'next/router'
import React from 'react'
interface NavbarProps {}
@ -32,10 +33,20 @@ const items = [
]
const Navbar: React.FC<NavbarProps> = () => {
const router = useRouter()
const currentPath = router.pathname
const isActivePath = (path: string) => {
return currentPath.includes(path)
}
return (
<Navigation>
{items.map((item, index) => (
<Link href={item.href} key={'navbar-item-' + index}>
{isActivePath(item.href) && (
<img src={'/assets/navbar-arrow.svg'} alt="navbar-arrow" />
)}
<NavItem key={index}>{item.label}</NavItem>
</Link>
))}
@ -52,6 +63,13 @@ const Navigation = styled.ul`
gap: 37px;
list-style-type: none;
a {
display: flex;
align-items: center;
text-decoration: none;
gap: 6px;
}
@media (max-width: 1300px) {
position: static;
transform: none;