+14 -8

components/NavBar.tsx

reviewed

··· 24 24 25 25 return ( 26 26 <> 27 27 - <button 28 28 - className={styles.navButton} 29 29 - onClick={() => { 30 30 - setOpen(!open); 31 31 - }} 32 32 - > 33 33 - {open ? <X size={26} /> : <Menu size={26} />} 34 34 - </button> 27 27 + <div className={styles.navButtons}> 28 28 + <button 29 29 + className={styles.navButton} 30 30 + onClick={() => { 31 31 + setOpen(!open); 32 32 + }} 33 33 + > 34 34 + {open ? <X size={26} /> : <Menu size={26} />} 35 35 + </button> 36 36 + 37 37 + <Link href="/" className={path === '/' ? styles.active : ''}> 38 38 + <Home size={26} /> 39 39 + </Link> 40 40 + </div> 35 41 36 42 <nav 37 43 className={styles.navBar}

+28

styles/components/Footer.module.scss

reviewed

··· 9 9 10 10 p { 11 11 margin-bottom: 2px; 12 12 + 13 13 + &:last-child { 14 14 + margin: 0; 15 15 + } 12 16 } 13 17 14 18 ul { ··· 37 41 } 38 42 } 39 43 } 44 44 + 45 45 + @media (max-width: 769px) { 46 46 + flex-direction: column-reverse; 47 47 + 48 48 + align-items: center; 49 49 + justify-content: center; 50 50 + 51 51 + gap: 16px; 52 52 + 53 53 + p { 54 54 + text-align: center; 55 55 + } 56 56 + 57 57 + ul { 58 58 + flex-wrap: wrap; 59 59 + 60 60 + align-items: center; 61 61 + justify-content: center; 62 62 + } 63 63 + } 64 64 + } 65 65 + 66 66 + @media (max-width: 769px) { 67 67 + margin-bottom: calc(16px + 44px); 40 68 } 41 69 }

+26 -9

styles/components/NavBar.module.scss

reviewed

··· 57 57 width: 100dvw; 58 58 59 59 padding: 16px; 60 60 - padding-bottom: calc(16px * 2 + 32px); 60 60 + padding-bottom: calc((2 * 16px + 44px) - 8px); 61 61 62 62 top: 0; 63 63 bottom: 0; ··· 83 83 } 84 84 } 85 85 86 86 - .navButton { 86 86 + .navButtons { 87 87 display: none; 88 88 89 89 - background: var(--secondaryContainer); 90 90 - color: var(--onSecondaryContainer); 91 91 - 92 92 - padding: 8px; 93 93 - 94 94 - border: 1px solid var(--outlineVariant); 95 95 - border-radius: 16px; 89 89 + gap: 8px; 96 90 97 91 position: fixed; 98 92 ··· 103 97 104 98 @media (max-width: 769px) { 105 99 display: flex; 100 100 + } 101 101 + 102 102 + > button, a { 103 103 + display: flex; 104 104 + 105 105 + align-items: center; 106 106 + 107 107 + background: var(--secondaryContainer); 108 108 + color: var(--onSecondaryContainer); 109 109 + 110 110 + padding: 8px; 111 111 + 112 112 + border: 1px solid var(--outlineVariant); 113 113 + border-radius: 16px; 114 114 + 115 115 + text-decoration: none; 116 116 + 117 117 + cursor: pointer; 118 118 + 119 119 + &.active { 120 120 + background: var(--secondaryContainer); 121 121 + color: var(--primary) 122 122 + } 106 123 } 107 124 }