fix nav · atpota.to/flushes.app@f279493

.DS_Store

This is a binary file and will not be displayed.

+81 -10

app/src/components/NavigationBar.module.css

··· 1 1 .navbar { 2 2 display: flex; 3 + flex-wrap: wrap; 3 4 justify-content: space-between; 4 5 align-items: center; 5 6 padding: 0.75rem 1.5rem; ··· 20 21 .navSearch { 21 22 flex: 0 1 300px; 22 23 margin: 0 1rem; 24 + } 25 + 26 + .secondRow { 27 + display: flex; 28 + justify-content: space-between; 29 + align-items: center; 30 + width: 100%; 31 + margin-top: 0; 32 + } 33 + 34 + @media (max-width: 1000px) { 35 + .secondRow { 36 + margin-top: 0.5rem; 37 + } 23 38 } 24 39 25 40 .logo { ··· 74 89 transition: background-color 0.2s ease; 75 90 text-decoration: none; 76 91 display: inline-block; 92 + white-space: nowrap; 77 93 } 78 94 79 95 .authButton:hover { 80 96 background-color: var(--primary-hover); 81 97 } 82 98 99 + @media (max-width: 600px) { 100 + .authButton { 101 + padding: 0.4rem 0.75rem; 102 + font-size: 0.9rem; 103 + height: 36px; 104 + display: flex; 105 + align-items: center; 106 + } 107 + } 108 + 83 109 /* Responsive styles */ 84 - @media (max-width: 768px) { 110 + @media (max-width: 1000px) { 85 111 .navbar { 86 112 flex-wrap: wrap; 87 113 padding: 0.5rem 1rem; ··· 98 124 white-space: nowrap; 99 125 padding-bottom: 0.25rem; 100 126 gap: 0.5rem; 127 + -ms-overflow-style: none; /* IE and Edge */ 128 + scrollbar-width: none; /* Firefox */ 129 + } 130 + 131 + .navLinks::-webkit-scrollbar { 132 + display: none; /* Hide scrollbar in Chrome, Safari, Opera */ 133 + } 134 + 135 + .navEnd { 136 + display: flex; 137 + align-items: center; 138 + } 139 + } 140 + 141 + @media (max-width: 800px) { 142 + .navbar { 143 + position: relative; 101 144 } 102 145 103 146 .navSearch { 104 - flex: 1 1 100%; 105 - order: 3; 106 - margin: 0.5rem 0; 147 + flex: 0 1 auto; 148 + margin: 0 0.5rem; 149 + width: auto; 107 150 } 108 151 109 152 .navEnd { 110 - justify-content: flex-end; 111 - margin-left: auto; 153 + display: flex; 154 + flex-direction: row; 155 + gap: 0.5rem; 112 156 } 113 157 } 114 158 115 - @media (max-width: 480px) { 159 + @media (max-width: 600px) { 160 + .logo { 161 + font-size: 1.25rem; 162 + } 163 + 116 164 .navLink { 117 - padding: 0.5rem 0.5rem; 165 + padding: 0.5rem 0.4rem; 118 166 font-size: 0.9rem; 119 167 } 120 168 121 - .logo { 122 - font-size: 1.25rem; 169 + .navSearch { 170 + order: 0; 171 + flex: 1 1 auto; 172 + } 173 + 174 + .navEnd { 175 + gap: 0.25rem; 176 + } 177 + 178 + /* Put search and nav end items on same row */ 179 + .navbar { 180 + flex-wrap: wrap; 181 + } 182 + 183 + .navStart { 184 + width: 100%; 185 + margin-bottom: 0.5rem; 186 + } 187 + 188 + .secondRow { 189 + display: flex; 190 + width: 100%; 191 + flex-direction: row; 192 + justify-content: space-between; 193 + align-items: center; 123 194 } 124 195 }

+17 -15

app/src/components/NavigationBar.tsx

··· 52 52 </div> 53 53 </div> 54 54 55 - <div className={styles.navSearch}> 56 - <ProfileSearch /> 57 - </div> 58 - 59 - <div className={styles.navEnd}> 60 - <ThemeToggle /> 55 + <div className={styles.secondRow}> 56 + <div className={styles.navSearch}> 57 + <ProfileSearch /> 58 + </div> 61 59 62 - {isAuthenticated ? ( 63 - <button onClick={handleLogout} className={styles.authButton}> 64 - Logout 65 - </button> 66 - ) : ( 67 - <Link href="/auth/login" className={styles.authButton}> 68 - Login 69 - </Link> 70 - )} 60 + <div className={styles.navEnd}> 61 + <ThemeToggle /> 62 + 63 + {isAuthenticated ? ( 64 + <button onClick={handleLogout} className={styles.authButton}> 65 + Logout 66 + </button> 67 + ) : ( 68 + <Link href="/auth/login" className={styles.authButton}> 69 + Login 70 + </Link> 71 + )} 72 + </div> 71 73 </div> 72 74 </nav> 73 75 );

+26 -4

app/src/components/ProfileSearch.module.css

··· 1 1 .searchContainer { 2 2 position: relative; 3 - width: 300px; 3 + width: 100%; 4 + max-width: 300px; 4 5 } 5 6 6 7 .searchForm { ··· 155 156 } 156 157 } 157 158 159 + @media (max-width: 800px) { 160 + .searchContainer { 161 + max-width: 250px; 162 + } 163 + 164 + .searchInput { 165 + font-size: 0.85rem; 166 + padding: 0.4rem 0.5rem; 167 + } 168 + 169 + .searchButton { 170 + padding: 0.4rem; 171 + } 172 + } 173 + 158 174 @media (max-width: 600px) { 159 175 .searchContainer { 160 - width: 180px; 176 + max-width: 200px; 161 177 } 162 178 163 179 .searchInput { ··· 166 182 } 167 183 } 168 184 169 - @media (max-width: 450px) { 185 + @media (max-width: 480px) { 170 186 .searchContainer { 171 - width: 140px; 187 + max-width: 100%; 188 + min-width: 140px; 189 + flex: 1; 172 190 } 173 191 174 192 .searchInput::placeholder { 175 193 font-size: 0.75rem; 194 + } 195 + 196 + .searchForm { 197 + height: 36px; 176 198 } 177 199 }

+12 -2

app/src/components/ThemeToggle.module.css

··· 29 29 font-weight: 500; 30 30 } 31 31 32 - @media (max-width: 768px) { 32 + @media (max-width: 800px) { 33 33 .themeToggle { 34 34 padding: 0.5rem 0.7rem; 35 35 } ··· 41 41 42 42 @media (max-width: 600px) { 43 43 .themeToggle { 44 - padding: 0.4rem 0.6rem; 44 + padding: 0.4rem; 45 + display: flex; 46 + justify-content: center; 47 + align-items: center; 48 + width: 36px; 49 + height: 36px; 45 50 } 46 51 47 52 .themeLabel { 48 53 display: none; 54 + } 55 + 56 + .themeToggle svg { 57 + width: 16px; 58 + height: 16px; 49 59 } 50 60 }

Configure Feed

Configure Feed