Skip to content

Commit b42c773

Browse files
parbhatkapila4parbhatkapila4
committed
Navigation and button styles enhancements
1 parent 615ede5 commit b42c773

File tree

2 files changed

+150
-51
lines changed

2 files changed

+150
-51
lines changed

‎src/app/globals.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -462,6 +462,104 @@ button {
462462
-moz-osx-font-smoothing: grayscale;
463463
text-rendering: optimizeLegibility;
464464
}
465+
466+
/* Mobile navigation menu height management */
467+
[data-slot="sheet-content"][data-mobile-menu] {
468+
height: auto !important;
469+
max-height: 300px !important;
470+
top: 64px !important;
471+
bottom: auto !important;
472+
inset-y: auto !important;
473+
}
474+
475+
/* Mobile button text and SVG quality improvements */
476+
button,
477+
[role="button"],
478+
.button,
479+
[class*="Button"] {
480+
-webkit-font-smoothing: antialiased !important;
481+
-moz-osx-font-smoothing: grayscale !important;
482+
text-rendering: optimizeLegibility !important;
483+
font-smooth: always !important;
484+
-webkit-font-smoothing: subpixel-antialiased !important;
485+
}
486+
487+
/* Ensure button text is crisp on mobile */
488+
button *,
489+
button span,
490+
[role="button"] *,
491+
[role="button"] span {
492+
-webkit-font-smoothing: antialiased !important;
493+
-moz-osx-font-smoothing: grayscale !important;
494+
text-rendering: optimizeLegibility !important;
495+
text-shadow: 0 0 0 transparent !important;
496+
}
497+
498+
/* SVG quality improvements for mobile */
499+
svg,
500+
[class*="lucide"],
501+
button svg,
502+
[role="button"] svg {
503+
shape-rendering: geometricPrecision !important;
504+
text-rendering: optimizeLegibility !important;
505+
-webkit-font-smoothing: antialiased !important;
506+
-moz-osx-font-smoothing: grayscale !important;
507+
image-rendering: -webkit-optimize-contrast !important;
508+
transform: translateZ(0) !important;
509+
-webkit-transform: translateZ(0) !important;
510+
will-change: transform !important;
511+
backface-visibility: hidden !important;
512+
-webkit-backface-visibility: hidden !important;
513+
filter: none !important;
514+
}
515+
516+
/* Force high DPI rendering for buttons and SVGs */
517+
button,
518+
button svg,
519+
[role="button"],
520+
[role="button"] svg {
521+
transform: translate3d(0, 0, 0) !important;
522+
-webkit-transform: translate3d(0, 0, 0) !important;
523+
}
524+
525+
/* Improve text clarity in badges and buttons */
526+
.badge,
527+
[class*="Badge"],
528+
button,
529+
[role="button"] {
530+
text-rendering: optimizeLegibility !important;
531+
-webkit-font-smoothing: subpixel-antialiased !important;
532+
font-smooth: always !important;
533+
}
534+
535+
/* Landing page specific quality improvements */
536+
.black-bg button,
537+
.black-bg [role="button"],
538+
.black-bg button svg,
539+
.black-bg [role="button"] svg,
540+
section button,
541+
section [role="button"],
542+
section button svg,
543+
section [role="button"] svg {
544+
-webkit-font-smoothing: antialiased !important;
545+
-moz-osx-font-smoothing: grayscale !important;
546+
text-rendering: optimizeLegibility !important;
547+
shape-rendering: geometricPrecision !important;
548+
transform: translate3d(0, 0, 0) !important;
549+
-webkit-transform: translate3d(0, 0, 0) !important;
550+
will-change: transform !important;
551+
}
552+
553+
/* Ensure button text inside sections is crisp */
554+
section button span,
555+
section [role="button"] span,
556+
.black-bg button span,
557+
.black-bg [role="button"] span {
558+
-webkit-font-smoothing: antialiased !important;
559+
-moz-osx-font-smoothing: grayscale !important;
560+
text-rendering: optimizeLegibility !important;
561+
display: inline-block !important;
562+
}
465563

466564
/* Mobile sidebar improvements */
467565
.sidebar-mobile {

‎src/components/landing/Navigation.tsx‎

Lines changed: 52 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import {
1212
import {
1313
Sheet,
1414
SheetContent,
15-
SheetHeader,
1615
SheetTitle,
1716
} from "@/components/ui/sheet"
1817
import { usePathname } from 'next/navigation'
@@ -157,73 +156,75 @@ export default function Navigation() {
157156
</ul>
158157
</div>
159158

160-
{/* Mobile Menu - Sheet from right side */}
159+
{/* Mobile Menu - Compact Sheet from right side */}
161160
<Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
162-
<SheetContent side="right" className="w-[280px] sm:w-[300px] bg-gray-900 border-white/10 md:hidden">
163-
<SheetHeader>
164-
<SheetTitle className="text-white text-left">Menu</SheetTitle>
165-
</SheetHeader>
166-
<ul className="flex flex-col font-medium mt-8 space-y-2">
167-
<li>
168-
<Link
169-
href="/"
170-
onClick={() => setIsMobileMenuOpen(false)}
171-
className={`block py-3 px-4 rounded-lg transition-colors ${
172-
pathname === "/"
173-
? "text-blue-400 bg-blue-700/20"
174-
: "text-white hover:bg-gray-800"
175-
}`}
176-
aria-current={pathname === "/" ? "page" : undefined}
177-
>
178-
Home
179-
</Link>
180-
</li>
181-
<li>
182-
<Link
183-
href="/about"
184-
onClick={() => setIsMobileMenuOpen(false)}
185-
className={`block py-3 px-4 rounded-lg transition-colors ${
186-
pathname === "/about"
187-
? "text-blue-400 bg-blue-700/20"
188-
: "text-white hover:bg-gray-800"
189-
}`}
190-
aria-current={pathname === "/about" ? "page" : undefined}
191-
>
192-
About
193-
</Link>
194-
</li>
195-
{isSignedIn ? (
161+
<SheetContent side="right" className="w-[200px] bg-gray-900 border-white/10 md:hidden p-0 m-2 rounded-lg" data-mobile-menu>
162+
<div className="flex flex-col p-2">
163+
<div className="p-2 border-b border-white/10 mb-1">
164+
<SheetTitle className="text-white text-sm font-semibold">Menu</SheetTitle>
165+
</div>
166+
<ul className="flex flex-col font-medium p-1 space-y-1">
196167
<li>
197168
<Link
198-
href="/dashboard"
169+
href="/"
199170
onClick={() => setIsMobileMenuOpen(false)}
200-
className={`block py-3 px-4 rounded-lg transition-colors ${
201-
pathname === "/dashboard"
202-
? "text-blue-400 bg-blue-700/20"
171+
className={`block py-2.5 px-3 rounded-md text-sm transition-colors ${
172+
pathname === "/"
173+
? "text-blue-400 bg-blue-700/20 font-medium"
203174
: "text-white hover:bg-gray-800"
204175
}`}
205-
aria-current={pathname === "/dashboard" ? "page" : undefined}
176+
aria-current={pathname === "/" ? "page" : undefined}
206177
>
207-
Dashboard
178+
Home
208179
</Link>
209180
</li>
210-
) : (
211181
<li>
212182
<Link
213-
href="/contact"
183+
href="/about"
214184
onClick={() => setIsMobileMenuOpen(false)}
215-
className={`block py-3 px-4 rounded-lg transition-colors ${
216-
pathname === "/contact"
217-
? "text-blue-400 bg-blue-700/20"
185+
className={`block py-2.5 px-3 rounded-md text-sm transition-colors ${
186+
pathname === "/about"
187+
? "text-blue-400 bg-blue-700/20 font-medium"
218188
: "text-white hover:bg-gray-800"
219189
}`}
220-
aria-current={pathname === "/contact" ? "page" : undefined}
190+
aria-current={pathname === "/about" ? "page" : undefined}
221191
>
222-
Contact
192+
About
223193
</Link>
224194
</li>
225-
)}
226-
</ul>
195+
{isSignedIn ? (
196+
<li>
197+
<Link
198+
href="/dashboard"
199+
onClick={() => setIsMobileMenuOpen(false)}
200+
className={`block py-2.5 px-3 rounded-md text-sm transition-colors ${
201+
pathname === "/dashboard"
202+
? "text-blue-400 bg-blue-700/20 font-medium"
203+
: "text-white hover:bg-gray-800"
204+
}`}
205+
aria-current={pathname === "/dashboard" ? "page" : undefined}
206+
>
207+
Dashboard
208+
</Link>
209+
</li>
210+
) : (
211+
<li>
212+
<Link
213+
href="/contact"
214+
onClick={() => setIsMobileMenuOpen(false)}
215+
className={`block py-2.5 px-3 rounded-md text-sm transition-colors ${
216+
pathname === "/contact"
217+
? "text-blue-400 bg-blue-700/20 font-medium"
218+
: "text-white hover:bg-gray-800"
219+
}`}
220+
aria-current={pathname === "/contact" ? "page" : undefined}
221+
>
222+
Contact
223+
</Link>
224+
</li>
225+
)}
226+
</ul>
227+
</div>
227228
</SheetContent>
228229
</Sheet>
229230
</div>

0 commit comments

Comments
 (0)