Skip to content

Commit 43a98d7

Browse files
anuja12mishraanuja12mishra
committed
chore: make inputs and navbar responsive with xs breakpoint
1 parent 9100ac5 commit 43a98d7

File tree

6 files changed

+38
-37
lines changed

6 files changed

+38
-37
lines changed

‎src/app/(public)/_components/button.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ export function Button({
1414
<div className="relative inline-block group w-fit transition-all duration-500">
1515
<button
1616
className={cn(
17-
'text-sm font-bold inline-flex justify-center items-center uppercase py-3 px-4 text-center text-white bg-primary-btn-gradient shadow-primary-btn-shadow hover:bg-primary-btn-hover-gradient min-w-20 active:scale-95 active:shadow-lg transition-all duration-150 ease-in-out',
17+
'text-xs sm:text-sm font-bold inline-flex justify-center items-center uppercase py-2 sm:py-3 px-3 sm:px-4 text-center text-white bg-primary-btn-gradient shadow-primary-btn-shadow hover:bg-primary-btn-hover-gradient min-w-16 sm:min-w-20 active:scale-95 active:shadow-lg transition-all duration-150 ease-in-out whitespace-nowrap',
1818
className
1919
)}
2020
{...props}
2121
>
2222
<p className="btn-clip group-hover:opacity-0 duration-300 group-hover:scale-95"></p>
23-
<span className="relative z-20 flex justify-center items-center text-hacktoberfest-light gap-2 font-bold">
23+
<span className="relative z-20 flex justify-center items-center text-hacktoberfest-light gap-1 sm:gap-2 font-bold">
2424
{children}
2525
</span>
2626
</button>

‎src/app/(public)/_components/header.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,26 @@ export async function Header() {
1616
return (
1717
<header className="fixed top-0 left-0 w-full z-50 py-3 px-4 sm:px-6">
1818
<div className="border border-hacktoberfest-light-blue rounded-lg py-4 px-4 sm:px-6 container mx-auto backdrop-blur-md shadow-lg">
19-
<div className="flex justify-between items-center">
20-
<Link href="/" className="z-5">
19+
<div className="flex justify-between items-center flex-wrap gap-2">
20+
<Link href="/" className="z-5 flex-shrink-0">
2121
<LogoIconsSvg />
2222
</Link>
2323

2424
{/* Desktop Search - Hidden on mobile */}
25-
<div className="hidden md:block">
25+
<div className="hidden md:block flex-1 max-w-md mx-4">
2626
<SearchForm />
2727
</div>
2828

2929
{/* Desktop Navigation - Hidden on mobile */}
30-
<div className="hidden md:flex gap-2 lg:ml-40">
30+
<div className="hidden md:flex gap-2 flex-shrink-0">
3131
<form action={session ? signOutAction : signInAction}>
32-
<Button className="text-xs sm:text-sm">
32+
<Button className="text-xs sm:text-sm whitespace-nowrap">
3333
{session && session.user ? 'Sign Out' : 'Sign In'}
3434
</Button>
3535
</form>
3636
<Link
3737
href="/contributors"
38-
className="btn btn-square btn-ghost umami--click--contributors-button hover:text-hacktoberfest-light transition-colors"
38+
className="btn btn-square btn-ghost umami--click--contributors-button hover:text-hacktoberfest-light transition-colors flex-shrink-0"
3939
>
4040
<BsPeopleFill size="1.5rem" color="white" title="Contributors" />
4141
</Link>
@@ -44,7 +44,7 @@ export async function Header() {
4444
href="https://github.com/max-programming/hacktoberfest-projects"
4545
target="_blank"
4646
rel="noreferrer"
47-
className="btn btn-square btn-ghost umami--click--github-button hover:text-hacktoberfest-light transition-colors"
47+
className="btn btn-square btn-ghost umami--click--github-button hover:text-hacktoberfest-light transition-colors flex-shrink-0"
4848
>
4949
<IoLogoGithub size="1.5rem" color="white" title="GitHub" />
5050
</a>
@@ -55,7 +55,7 @@ export async function Header() {
5555
</div>
5656

5757
{/* Mobile Search - Visible only on mobile */}
58-
<div className="md:hidden md:mt-4">
58+
<div className="md:hidden mt-4">
5959
<SearchForm />
6060
</div>
6161
</div>

‎src/app/(public)/_components/hero.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
'use client';
2-
31
import { useRouter } from 'next/navigation';
42

53
import { Search } from 'lucide-react';
@@ -27,12 +25,12 @@ export function Hero() {
2725
return (
2826
<div className="relative bg-hero-gradient ">
2927
<div className="z-50 flex flex-col space-y-8 justify-center items-center text-center min-h-screen pt-28 sm:pt-24">
30-
<div className="max-w-md space-y-5">
31-
<h1 className="text-5xl font-medium uppercase heading-text">
28+
<div className="max-w-md space-y-5 px-4">
29+
<h1 className="text-3xl sm:text-4xl md:text-5xl font-medium uppercase heading-text">
3230
Search your language
3331
</h1>
3432
<form
35-
className="items-center w-full max-w-xs mx-auto form-control outline-none "
33+
className="items-center w-full max-w-xs mx-auto form-control outline-none"
3634
onSubmit={handleSearch}
3735
>
3836
<div className="flex w-full">
@@ -41,29 +39,29 @@ export function Hero() {
4139
type="text"
4240
placeholder="Search for your language"
4341
className="w-full max-w-xs bg-transparent rounded-tr-none rounded-br-none input input-bordered text-hacktoberfest-light border-hacktoberfest-light
44-
focus:border-hacktoberfest-light focus:!outline-none focus-visible:!outline-none placeholder:text-hacktoberfest-light"
42+
focus:border-hacktoberfest-light focus:!outline-none focus-visible:!outline-none placeholder:text-hacktoberfest-light text-sm sm:text-base"
4543
name="search"
4644
/>
4745
</div>
4846
<button
4947
type="submit"
50-
className="bg-transparent rounded-tl-none rounded-bl-none group btn btn-square text-hacktoberfest-light border-hacktoberfest-light hover:!border-hacktoberfest-light hover:bg-primary-btn-hover-gradient"
48+
className="bg-transparent rounded-tl-none rounded-bl-none group btn btn-square text-hacktoberfest-light border-hacktoberfest-light hover:!border-hacktoberfest-light hover:bg-primary-btn-hover-gradient flex-shrink-0"
5149
>
52-
<Search />
50+
<Search size={16} className="sm:w-5 sm:h-5" />
5351
</button>
5452
</div>
5553
</form>
56-
<p className="font-medium uppercase text-hacktoberfest-light">
54+
<p className="font-medium uppercase text-hacktoberfest-light text-sm sm:text-base">
5755
Or select the programming language you would like to find
5856
repositories for.
5957
</p>
60-
<div className="flex flex-wrap gap-6 items-center justify-center ">
58+
<div className="flex flex-wrap gap-4 sm:gap-6 items-center justify-center">
6159
{mainLanguages.map(language => (
6260
<LanguageButton key={language} language={language} />
6361
))}
6462
</div>
6563
<div className="dropdown dropdown-top">
66-
<Button tabIndex={0} className="umami--click--otherlangs-button">
64+
<Button tabIndex={0} className="umami--click--otherlangs-button text-sm sm:text-base">
6765
Other languages
6866
</Button>
6967

@@ -75,7 +73,7 @@ export function Hero() {
7573
<li key={language}>
7674
<Link
7775
href={`/repos/${language.toLowerCase()}`}
78-
className="text-gray-700 hover:text-white hover:bg-hacktoberfest-blue rounded-lg transition-colors duration-200 px-3 py-2"
76+
className="text-gray-700 hover:text-white hover:bg-hacktoberfest-blue rounded-lg transition-colors duration-200 px-3 py-2 text-sm"
7977
>
8078
{language}
8179
</Link>

‎src/app/(public)/_components/mobile-menu.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,43 +20,43 @@ export function MobileMenu({ session }: MobileMenuProps) {
2020
const toggleMenu = () => setIsOpen(!isOpen);
2121

2222
return (
23-
<div className="md:hidden">
23+
<div className="md:hidden flex-shrink-0">
2424
{/* Hamburger Button */}
2525
<button
2626
onClick={toggleMenu}
2727
className="text-white hover:text-hacktoberfest-light transition-colors p-2 rounded-lg"
2828
aria-label="Toggle menu"
2929
>
30-
{isOpen ? <HiX size="1.5rem" /> : <HiMenu size="1.5rem" />}
30+
{isOpen ? <HiX size="1.25rem" /> : <HiMenu size="1.25rem" />}
3131
</button>
3232

3333
{/* Mobile Menu Overlay */}
3434
{isOpen && (
35-
<div className="absolute top-full left-0 right-0 mt-2 bg-hacktoberfest-light-blue border border-hacktoberfest-light-blue rounded-lg py-4 px-4 sm:px-6 container mx-auto backdrop-blur-md shadow-lg">
36-
<div className="flex flex-col gap-4">
35+
<div className="absolute top-full left-0 right-0 mt-2 bg-hacktoberfest-light-blue border border-hacktoberfest-light-blue rounded-lg py-4 px-4 sm:px-6 container mx-auto backdrop-blur-md shadow-lg">
36+
<div className="flex flex-col gap-3">
3737
<form action={session ? signOutAction : signInAction}>
38-
<Button className="w-full text-center text-xs sm:text-sm">
38+
<Button className="w-full text-center text-xs">
3939
{session && session.user ? 'Sign Out' : 'Sign In'}
4040
</Button>
4141
</form>
4242

4343
<Link
4444
href="/contributors"
45-
className="flex items-center gap-3 text-white hover:text-hacktoberfest-light transition-colors p-3 rounded-lg"
45+
className="flex items-center gap-3 text-white hover:text-hacktoberfest-light transition-colors p-2 rounded-lg"
4646
onClick={() => setIsOpen(false)}
4747
>
48-
<BsPeopleFill size="1.2rem" />
48+
<BsPeopleFill size="1.1rem" />
4949
<span className="text-sm font-medium">Contributors</span>
5050
</Link>
5151

5252
<a
5353
href="https://github.com/max-programming/hacktoberfest-projects"
5454
target="_blank"
5555
rel="noreferrer"
56-
className="flex items-center gap-3 text-white hover:text-hacktoberfest-light transition-colors p-3 rounded-lg"
56+
className="flex items-center gap-3 text-white hover:text-hacktoberfest-light transition-colors p-2 rounded-lg"
5757
onClick={() => setIsOpen(false)}
5858
>
59-
<IoLogoGithub size="1.2rem" />
59+
<IoLogoGithub size="1.1rem" />
6060
<span className="text-sm font-medium">GitHub</span>
6161
</a>
6262
</div>

‎src/app/(public)/_components/search-form.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
'use client';
2-
31
import { usePathname, useSearchParams, useRouter } from 'next/navigation';
42
import { useForm } from 'react-hook-form';
53
import { GoX } from 'react-icons/go';
@@ -35,21 +33,21 @@ export function SearchForm() {
3533
}
3634

3735
return (
38-
<div className="hidden px-2 mb-3 sm:flex-1 sm:max-w-md sm:mb-0 sm:px-6 sm:inline-flex">
36+
<div className="w-full">
3937
<form
40-
className="w-full m-2 mx-auto form-control"
38+
className="w-full form-control"
4139
onSubmit={handleSubmit(onSubmit)}
4240
>
4341
<div className="relative">
4442
<input
4543
placeholder="Search"
46-
className="w-full pr-16 bg-transparent text-hacktoberfest-light input input-bordered border-hacktoberfest-light focus:border-hacktoberfest-light-blue focus:outline-none placeholder:text-hacktoberfest-beige transition-colors duration-200"
44+
className="w-full pr-16 bg-transparent text-hacktoberfest-light input input-bordered border-hacktoberfest-light focus:border-hacktoberfest-light-blue focus:outline-none placeholder:text-hacktoberfest-beige transition-colors duration-200 text-sm sm:text-base"
4745
type="text"
4846
{...register('searchQuery', { required: true })}
4947
/>
5048
{searchQuery && searchQuery.trim() !== '' && (
5149
<button
52-
className="absolute top-0 right-0 rounded-l-none btn btn-ghost"
50+
className="absolute top-0 right-0 rounded-l-none btn btn-ghost btn-sm"
5351
type="button"
5452
onClick={() => reset()}
5553
>

‎tailwind.config.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@ const config = {
88
media: false, // or 'media' or 'class'
99
theme: {
1010
extend: {
11+
screens: {
12+
'xs': '320px',
13+
// This adds support for very small screens
14+
// Now we can use xs:text-xs, xs:px-2, etc.
15+
},
1116
fontFamily: {
1217
mono: ['var(--font-atkinson-hyperlegible-mono)', 'monospace']
1318
},

0 commit comments

Comments
 (0)