theclashfruit.me / website
My personal site. theclashfruit.me
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: mobile nav

TheClashFruit d40461fb 95992dd9

+137 -42
+76 -42
components/NavBar.tsx
··· 9 9 LineSquiggle, 10 10 ImageIcon, 11 11 Bookmark, 12 - GitPullRequestCreateArrow 12 + GitPullRequestCreateArrow, 13 + X, 14 + Menu 13 15 } from 'lucide-react'; 14 16 15 17 import styles from '@/styles/components/NavBar.module.scss'; 18 + import { useState } from 'react'; 16 19 17 20 export default function NavBar() { 18 21 const path = usePathname(); 19 - 22 + 23 + const [open, setOpen] = useState(false); 24 + 20 25 return ( 21 - <nav className={styles.navBar}> 22 - <ul> 23 - <li> 24 - <Link href="/" className={path === '/' ? styles.active : ''}> 25 - <Home /> 26 - Home 27 - </Link> 28 - </li> 29 - <li> 30 - <Link href="/blog" className={path === '/blog' ? styles.active : ''}> 31 - <BookText /> 32 - Blog 33 - </Link> 34 - </li> 35 - <li> 36 - <Link href="/art" className={path === '/art' ? styles.active : ''}> 37 - <LineSquiggle /> 38 - Art 39 - </Link> 40 - </li> 41 - <li> 42 - <Link href="/photos" className={path === '/photos' ? styles.active : ''}> 43 - <ImageIcon /> 44 - Photos 45 - </Link> 46 - </li> 47 - <li> 48 - <Link href="/projects" className={path === '/projects' ? styles.active : ''}> 49 - <GitPullRequestCreateArrow /> 50 - Projects 51 - </Link> 52 - </li> 53 - <li> 54 - <Link href="/links" className={path === '/links' ? styles.active : ''}> 55 - <Bookmark /> 56 - Links 57 - </Link> 58 - </li> 59 - </ul> 60 - </nav> 26 + <> 27 + <button 28 + className={styles.navButton} 29 + onClick={() => { 30 + setOpen(!open); 31 + }} 32 + > 33 + {open ? <X size={26} /> : <Menu size={26} />} 34 + </button> 35 + 36 + <nav 37 + className={styles.navBar} 38 + data-open={open} 39 + onClick={() => { 40 + setOpen(false); 41 + }} 42 + > 43 + <ul> 44 + <li> 45 + <Link href="/" className={path === '/' ? styles.active : ''}> 46 + <Home /> 47 + Home 48 + </Link> 49 + </li> 50 + <li> 51 + <Link 52 + href="/blog" 53 + className={path === '/blog' ? styles.active : ''} 54 + > 55 + <BookText /> 56 + Blog 57 + </Link> 58 + </li> 59 + <li> 60 + <Link href="/art" className={path === '/art' ? styles.active : ''}> 61 + <LineSquiggle /> 62 + Art 63 + </Link> 64 + </li> 65 + <li> 66 + <Link 67 + href="/photos" 68 + className={path === '/photos' ? styles.active : ''} 69 + > 70 + <ImageIcon /> 71 + Photos 72 + </Link> 73 + </li> 74 + <li> 75 + <Link 76 + href="/projects" 77 + className={path === '/projects' ? styles.active : ''} 78 + > 79 + <GitPullRequestCreateArrow /> 80 + Projects 81 + </Link> 82 + </li> 83 + <li> 84 + <Link 85 + href="/links" 86 + className={path === '/links' ? styles.active : ''} 87 + > 88 + <Bookmark /> 89 + Links 90 + </Link> 91 + </li> 92 + </ul> 93 + </nav> 94 + </> 61 95 ); 62 96 }
+4
styles/components/Header.module.scss
··· 19 19 > svg { 20 20 color: var(--primary); 21 21 } 22 + 23 + @media (max-width: 769px) { 24 + width: fit-content; 25 + } 22 26 } 23 27 24 28 > h1 {
+57
styles/components/NavBar.module.scss
··· 47 47 } 48 48 } 49 49 } 50 + 51 + @media (max-width: 769px) { 52 + position: fixed; 53 + 54 + justify-content: end; 55 + 56 + height: 100dvh; 57 + width: 100dvw; 58 + 59 + padding: 16px; 60 + padding-bottom: calc(16px * 2 + 32px); 61 + 62 + top: 0; 63 + bottom: 0; 64 + 65 + left: -100%; 66 + 67 + transition: left 250ms; 68 + 69 + > ul { 70 + background: var(--surfaceContainer); 71 + 72 + padding: 8px; 73 + 74 + border: 1px solid var(--outlineVariant); 75 + border-radius: 16px; 76 + 77 + width: 60dvw; 78 + } 79 + 80 + &[data-open='true'] { 81 + left: 0; 82 + } 83 + } 50 84 } 85 + 86 + .navButton { 87 + display: none; 88 + 89 + background: var(--secondaryContainer); 90 + color: var(--onSecondaryContainer); 91 + 92 + padding: 8px; 93 + 94 + border: 1px solid var(--outlineVariant); 95 + border-radius: 16px; 96 + 97 + position: fixed; 98 + 99 + bottom: 16px; 100 + left: 16px; 101 + 102 + z-index: 999; 103 + 104 + @media (max-width: 769px) { 105 + display: flex; 106 + } 107 + }