Skip to content

Improve mobile responsiveness and add mobile navigation menu #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yogeshkumawat2027 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Improve mobile responsiveness and add mobile navigation menu #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function RootLayout({
disableTransitionOnChange
> */}
<Navigation />
<main className="max-w-8xl mx-32 px-4 sm:px-6 lg:px-8 py-8">
<main className="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
Copy link

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

# Find tailwind config files
fd -type f -name "tailwind.config.*"

Repository: StabilityNexus/HackHub-WebUI

Length of output: 242

🏁 Script executed:

# Also check package.json to see Tailwind version
cat package.json | grep -A 2 -B 2 "tailwind"

Repository: StabilityNexus/HackHub-WebUI

Length of output: 349

🏁 Script executed:

# Search for any max-w-8xl references in the codebase
rg "max-w-8xl" -A 2 -B 2

Repository: StabilityNexus/HackHub-WebUI

Length of output: 309

🏁 Script executed:

# Find tailwind config with broader search (no type restriction)
find . -maxdepth 2 -name "*tailwind*" -type f

Repository: StabilityNexus/HackHub-WebUI

Length of output: 92

🏁 Script executed:

# Check if there's a tailwind config in common locations
ls -la | grep -i config

Repository: StabilityNexus/HackHub-WebUI

Length of output: 347

🌐 Web query:

Tailwind CSS 3.4 max-width utilities max-w-8xl standard classes

💡 Result:

No — Tailwind CSS v3.4 does not include a built-in max-w-8xl class. The default max-width scale in v3 tops out at max-w-7xl (80rem); the docs show adding an 8xl entry via theme.maxWidth (example: '8xl': '96rem') or using an arbitrary value like max-w-[96rem]. [1][2]

Sources:
[1] Tailwind CSS v3 max-width docs (shows default utilities and example to add '8xl').
[2] Tailwind CSS v2/v3 docs (default list including max-w-7xl).

🏁 Script executed:

cat -n ./tailwind.config.ts

Repository: StabilityNexus/HackHub-WebUI

Length of output: 3811

Add max-w-8xl to your Tailwind configuration.

The change from mx-32 to mx-auto correctly centers content responsively. However, max-w-8xl is not a standard Tailwind class (the default scale only goes up to max-w-7xl) and is not defined in your tailwind.config.ts. Add it to theme.extend.maxWidth:

theme: {
  extend: {
    maxWidth: {
      '8xl': '96rem'
    }
  }
}

Alternatively, use max-w-7xl or an arbitrary value like max-w-[96rem].

🤖 Prompt for AI Agents 
In app/layout.tsx around line 30, the class "max-w-8xl" used on the main element
is not a default Tailwind utility and isn't defined in tailwind.config.ts;
either add '8xl' to theme.extend.maxWidth (e.g., map '8xl' to 96rem) in your
Tailwind config and rebuild, or replace the class with an existing size like
'max-w-7xl' or an arbitrary value such as 'max-w-[96rem]' so the layout width is
valid.

{children}
</main>
{/* </ThemeProvider> */}
Expand Down
4 changes: 2 additions & 2 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,14 +211,14 @@ export default function HomePage() {
return (
<div className="min-h-screen">
{/* Hero Section - Full Viewport Height */}
<div className="min-h-screen flex items-center justify-center relative">
<div className="min-h-[calc(100vh-4rem)] flex items-center justify-center relative">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
{/* Left side - Welcome to HackHub */}
<div className="space-y-6">
<div className="relative">
{/* Main heading with enhanced styling */}
<div className="relative z-10 -mt-24 pb-8">
<div className="relative z-10 pb-8">
<h1 className="text-6xl lg:text-7xl font-black leading-tight">
<span className="block text-transparent bg-clip-text bg-gradient-to-r from-amber-600 via-orange-500 to-amber-700 drop-shadow-sm">
<DecryptedText
Expand Down
64 changes: 57 additions & 7 deletions components/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,35 @@

import Link from "next/link"
import { usePathname } from "next/navigation"
import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { ConnectButton } from '@rainbow-me/rainbowkit'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Menu } from "lucide-react"

// Helper function to get the correct image path for GitHub Pages
const getImagePath = (path: string) => {
// For static export, we need to ensure the path works with GitHub Pages
return path.startsWith('/') ? path : `/${path}`;
};

export default function Navigation() {
const pathname = usePathname()
const [mounted, setMounted] = useState(false)

useEffect(() => {
setMounted(true)
}, [])

return (
<header className="border-b border-amber-100/60 bg-white/95 backdrop-blur-md sticky top-0 z-50 shadow-sm">
<div className="px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<Link href="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
<Link href="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity -ml-8 md:-ml-4">
<div className="w-12 h-12 flex items-center justify-center">
<img
src={getImagePath("/block.png")}
Expand Down Expand Up @@ -50,7 +62,7 @@ export default function Navigation() {
<Button
variant="ghost"
className={`${
pathname === "/myHackathons"
pathname === "/createHackathon"
? "text-amber-800 bg-amber-50 font-semibold shadow-sm"
: "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
} transition-all duration-200 font-medium`}
Expand All @@ -62,7 +74,7 @@ export default function Navigation() {
<Button
variant="ghost"
className={`${
pathname === "/createHackathon"
pathname === "/myHackathons"
? "text-amber-800 bg-amber-50 font-semibold shadow-sm"
: "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
} transition-all duration-200 font-medium`}
Expand All @@ -73,10 +85,48 @@ export default function Navigation() {
</nav>

<div className="flex items-center gap-3">
<ConnectButton />
{/* Mobile Menu */}
<div className="md:hidden">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="icon"
>
<Menu className="w-6 h-6" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
<DropdownMenuItem asChild>
<Link href="/explorer" className="cursor-pointer">
Explore Hackathons
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/createHackathon" className="cursor-pointer">
Organize a Hackathon
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/myHackathons" className="cursor-pointer">
My Hackathons
</Link>
</DropdownMenuItem>
<div className="border-t my-2"></div>
<div className="px-2 py-2" suppressHydrationWarning>
{mounted && <ConnectButton />}
</div>
</DropdownMenuContent>
</DropdownMenu>
</div>

{/* Desktop Connect Button */}
<div className="hidden md:block" suppressHydrationWarning>
{mounted && <ConnectButton />}
</div>
</div>
</div>
</div>
</header>
)
}
}
Loading