Skip to content

Commit 6d5e8c7

Browse files
Richajaishwal0Richajaishwal0
committed
added github-icon for smaller screens
1 parent 7b7abcd commit 6d5e8c7

File tree

3 files changed

+410
-1
lines changed

3 files changed

+410
-1
lines changed

‎src/components/ui/NavbarFirebaseAuthGithub.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,24 @@ const NavbarFirebaseAuthGithub: React.FC = () => {
88
if (container && !container.hasChildNodes()) {
99
const root = ReactDOM.createRoot(container);
1010
root.render(<FirebaseAuthGithub />);
11+
12+
// Force visibility on mobile after rendering
13+
const ensureVisibility = () => {
14+
const navbarItem = container.closest('.navbar__item');
15+
if (navbarItem) {
16+
navbarItem.style.display = 'block';
17+
navbarItem.style.visibility = 'visible';
18+
navbarItem.style.opacity = '1';
19+
}
20+
container.style.display = 'block';
21+
container.style.visibility = 'visible';
22+
container.style.opacity = '1';
23+
};
24+
25+
// Ensure visibility immediately and after a short delay
26+
ensureVisibility();
27+
setTimeout(ensureVisibility, 100);
28+
setTimeout(ensureVisibility, 500);
1129
}
1230
}, []);
1331
return null;

‎src/css/custom.css

Lines changed: 263 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ textarea {
125125
}
126126

127127

128-
@media screen and (min-width: 997px) {
128+
@media screen and (min-width: 1057px) {
129129
.nav-emoji {
130130
display: none;
131131
}
@@ -137,6 +137,224 @@ textarea {
137137
}
138138
}
139139

140+
/* Icon-only navbar design for tablets and smaller screens */
141+
@media (max-width: 1200px) {
142+
/* Right navbar container with proper spacing */
143+
.navbar .navbar__inner .navbar__items.navbar__items--right {
144+
display: flex !important;
145+
align-items: center;
146+
gap: 20px;
147+
margin: auto auto;
148+
flex-shrink: 0;
149+
height: 100%;
150+
padding: 8px 0;
151+
}
152+
153+
/* Make all right navbar items visible with consistent layout */
154+
.navbar .navbar__inner .navbar__items.navbar__items--right .navbar__item {
155+
display: flex !important;
156+
visibility: visible !important;
157+
opacity: 1 !important;
158+
margin: 0 !important;
159+
align-items: center;
160+
justify-content: center;
161+
}
162+
163+
/* GitHub auth button - improved styling */
164+
#firebase-auth-github-navbar button {
165+
width: 30x !important;
166+
height: 45px !important;
167+
padding: 5px !important;
168+
padding-left:10px !important;
169+
font-size: 0 !important;
170+
/* Hide text */
171+
display: flex !important;
172+
justify-content: center !important;
173+
align-items: center !important;
174+
border-radius: 12px !important;
175+
background-color: #24292e !important;
176+
border: 1px solid rgba(255, 255, 255, 0.1) !important;
177+
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
178+
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
179+
cursor: pointer !important;
180+
}
181+
182+
#firebase-auth-github-navbar button:hover {
183+
background-color: #1a1e22 !important;
184+
transform: translateY(-3px) !important;
185+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
186+
border-color: rgba(255, 255, 255, 0.2) !important;
187+
}
188+
189+
#firebase-auth-github-navbar button svg {
190+
width: 24px !important;
191+
height: 24px !important;
192+
color: white !important;
193+
flex-shrink: 0 !important;
194+
}
195+
196+
/* Search button - consistent styling */
197+
.DocSearch-Button {
198+
width: 48px !important;
199+
height: 48px !important;
200+
padding: 12px !important;
201+
border-radius: 10px !important;
202+
margin: 0 !important;
203+
display: flex !important;
204+
justify-content: center !important;
205+
align-items: center !important;
206+
background-color: var(--ifm-color-emphasis-200) !important;
207+
border: 1px solid var(--ifm-color-emphasis-300) !important;
208+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
209+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
210+
cursor: pointer !important;
211+
}
212+
213+
.DocSearch-Button:hover {
214+
background-color: var(--ifm-color-emphasis-300) !important;
215+
transform: translateY(-2px) !important;
216+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
217+
border-color: var(--ifm-color-emphasis-400) !important;
218+
}
219+
220+
.DocSearch-Button-Placeholder,
221+
.DocSearch-Button-Keys {
222+
display: none !important;
223+
}
224+
225+
.DocSearch-Search-Icon {
226+
width: 24px !important;
227+
height: 24px !important;
228+
margin: 0 !important;
229+
color: var(--ifm-color-emphasis-800) !important;
230+
flex-shrink: 0 !important;
231+
}
232+
233+
/* Theme toggle - improved styling */
234+
.colorModeToggle {
235+
display: flex !important;
236+
width: 52px !important;
237+
height: 52px !important;
238+
padding: 14px !important;
239+
border-radius: 12px !important;
240+
margin: 0 !important;
241+
background-color: var(--ifm-color-emphasis-200) !important;
242+
border: 1px solid var(--ifm-color-emphasis-300) !important;
243+
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
244+
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
245+
justify-content: center !important;
246+
align-items: center !important;
247+
cursor: pointer !important;
248+
}
249+
250+
.colorModeToggle:hover {
251+
background-color: var(--ifm-color-emphasis-300) !important;
252+
transform: translateY(-3px) !important;
253+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
254+
border-color: var(--ifm-color-emphasis-400) !important;
255+
}
256+
257+
.colorModeToggle svg {
258+
width: 24px !important;
259+
height: 24px !important;
260+
color: var(--ifm-color-emphasis-800) !important;
261+
flex-shrink: 0 !important;
262+
}
263+
264+
/* Dark theme adjustments for mobile icons */
265+
[data-theme='dark'] .DocSearch-Button {
266+
background-color: var(--dark-bg-tertiary) !important;
267+
border-color: var(--dark-border) !important;
268+
}
269+
270+
[data-theme='dark'] .DocSearch-Button:hover {
271+
background-color: var(--dark-card-hover-bg) !important;
272+
}
273+
274+
[data-theme='dark'] .DocSearch-Search-Icon {
275+
color: var(--dark-text-secondary) !important;
276+
}
277+
278+
[data-theme='dark'] .colorModeToggle {
279+
background-color: var(--dark-bg-tertiary) !important;
280+
border-color: var(--dark-border) !important;
281+
}
282+
283+
[data-theme='dark'] .colorModeToggle:hover {
284+
background-color: var(--dark-card-hover-bg) !important;
285+
}
286+
287+
[data-theme='dark'] .colorModeToggle svg {
288+
color: var(--dark-text-secondary) !important;
289+
}
290+
}
291+
292+
/* Tablet and medium screen adjustments */
293+
@media (max-width: 996px) {
294+
.navbar .navbar__inner .navbar__items.navbar__items--right {
295+
gap: 18px !important;
296+
margin-right: 60px !important;
297+
}
298+
}
299+
300+
/* Mobile screen adjustments */
301+
@media (max-width: 768px) {
302+
.navbar .navbar__inner .navbar__items.navbar__items--right {
303+
gap: 16px !important;
304+
margin: auto auto;
305+
}
306+
}
307+
308+
@media (max-width: 480px) {
309+
/* Compact but comfortable spacing for small screens */
310+
.navbar .navbar__inner .navbar__items.navbar__items--right {
311+
gap: 14px !important;
312+
margin: auto auto;
313+
}
314+
315+
/* Comfortable button size for small screens */
316+
#firebase-auth-github-navbar button,
317+
.DocSearch-Button,
318+
.colorModeToggle {
319+
width: 44px !important;
320+
height: 44px !important;
321+
padding: 10px !important;
322+
border-radius: 10px !important;
323+
}
324+
325+
#firebase-auth-github-navbar button svg,
326+
.DocSearch-Search-Icon,
327+
.colorModeToggle svg {
328+
width: 20px !important;
329+
height: 20px !important;
330+
}
331+
}
332+
333+
@media (max-width: 360px) {
334+
/* Minimal but usable spacing for very small screens */
335+
.navbar .navbar__inner .navbar__items.navbar__items--right {
336+
gap: 12px !important;
337+
margin: auto auto ;
338+
}
339+
340+
/* Minimum usable button size */
341+
#firebase-auth-github-navbar button,
342+
.DocSearch-Button,
343+
.colorModeToggle {
344+
width: 40px !important;
345+
height: 40px !important;
346+
padding: 8px !important;
347+
border-radius: 8px !important;
348+
}
349+
350+
#firebase-auth-github-navbar button svg,
351+
.DocSearch-Search-Icon,
352+
.colorModeToggle svg {
353+
width: 18px !important;
354+
height: 18px !important;
355+
}
356+
}
357+
140358
.dropdown_grid {
141359
display: grid;
142360
grid-template-columns: repeat(3, 1fr);
@@ -961,3 +1179,47 @@ html {
9611179
color: inherit !important;
9621180
}
9631181

1182+
/* ===== REMOVE THEME TOGGLE FROM MOBILE SIDEBAR ===== */
1183+
@media (max-width: 1200px) {
1184+
/* Aggressively hide theme toggle in mobile sidebar */
1185+
.navbar-sidebar__brand button:not(.navbar-sidebar__close):not([class*="close"]),
1186+
.navbar-sidebar__brand .colorModeToggle,
1187+
.navbar-sidebar .colorModeToggle,
1188+
.navbar-sidebar__brand button[class*="colorModeToggle"],
1189+
.navbar-sidebar button[class*="colorModeToggle"],
1190+
.navbar-sidebar__brand .clean-btn[class*="toggle"]:not(.navbar-sidebar__close),
1191+
.navbar-sidebar .clean-btn[class*="toggle"]:not(.navbar-sidebar__close),
1192+
.navbar-sidebar__brand [class*="toggle_"]:not(.navbar-sidebar__close),
1193+
.navbar-sidebar [class*="toggle_"]:not(.navbar-sidebar__close),
1194+
.navbar-sidebar__brand button[aria-label*="mode"],
1195+
.navbar-sidebar button[aria-label*="mode"],
1196+
.navbar-sidebar__brand button[aria-label*="theme"],
1197+
.navbar-sidebar button[aria-label*="theme"],
1198+
.navbar-sidebar__brand button[aria-label*="Switch"],
1199+
.navbar-sidebar button[aria-label*="Switch"] {
1200+
display: none !important;
1201+
visibility: hidden !important;
1202+
opacity: 0 !important;
1203+
width: 0 !important;
1204+
height: 0 !important;
1205+
margin: 0 !important;
1206+
padding: 0 !important;
1207+
overflow: hidden !important;
1208+
position: absolute !important;
1209+
left: -9999px !important;
1210+
pointer-events: none !important;
1211+
}
1212+
1213+
/* Ensure close button is always visible */
1214+
.navbar-sidebar__brand .navbar-sidebar__close,
1215+
.navbar-sidebar__brand button[class*="close"],
1216+
.navbar-sidebar__brand .clean-btn.navbar-sidebar__close {
1217+
display: block !important;
1218+
visibility: visible !important;
1219+
opacity: 1 !important;
1220+
position: static !important;
1221+
left: auto !important;
1222+
pointer-events: auto !important;
1223+
}
1224+
}
1225+

0 commit comments

Comments
 (0)