Added basic responsive layout

This commit is contained in:
Arunavo Ray
2025-07-07 17:34:54 +05:30
parent 6155e39360
commit 24bd0aefe6
10 changed files with 715 additions and 538 deletions

View File

@@ -7,13 +7,15 @@ import { toast } from "sonner";
import { Skeleton } from "@/components/ui/skeleton";
import { useLiveRefresh } from "@/hooks/useLiveRefresh";
import { useConfigStatus } from "@/hooks/useConfigStatus";
import { Menu } from "lucide-react";
interface HeaderProps {
currentPage?: "dashboard" | "repositories" | "organizations" | "configuration" | "activity-log";
onNavigate?: (page: string) => void;
onMenuClick: () => void;
}
export function Header({ currentPage, onNavigate }: HeaderProps) {
export function Header({ currentPage, onNavigate, onMenuClick }: HeaderProps) {
const { user, logout, isLoading } = useAuth();
const { isLiveEnabled, toggleLive } = useLiveRefresh();
const { isFullyConfigured, isLoading: configLoading } = useConfigStatus();
@@ -54,35 +56,48 @@ export function Header({ currentPage, onNavigate }: HeaderProps) {
return (
<header className="border-b bg-background">
<div className="flex h-[4.5rem] items-center justify-between px-6">
<button
onClick={() => {
if (currentPage !== 'dashboard') {
window.history.pushState({}, '', '/');
onNavigate?.('dashboard');
}
}}
className="flex items-center gap-2 py-1 hover:opacity-80 transition-opacity"
>
<img
src="/logo-light.svg"
alt="Gitea Mirror Logo"
className="h-6 w-6 dark:hidden"
/>
<img
src="/logo-dark.svg"
alt="Gitea Mirror Logo"
className="h-6 w-6 hidden dark:block"
/>
<span className="text-xl font-bold">Gitea Mirror</span>
</button>
<div className="flex h-[4.5rem] items-center justify-between px-4 sm:px-6">
<div className="flex items-center gap-2">
{/* Hamburger Menu Button - Mobile Only */}
<Button
variant="ghost"
size="sm"
className="lg:hidden p-2"
onClick={onMenuClick}
>
<Menu className="h-5 w-5" />
<span className="sr-only">Toggle menu</span>
</Button>
<button
onClick={() => {
if (currentPage !== 'dashboard') {
window.history.pushState({}, '', '/');
onNavigate?.('dashboard');
}
}}
className="flex items-center gap-2 py-1 hover:opacity-80 transition-opacity"
>
<img
src="/logo-light.svg"
alt="Gitea Mirror Logo"
className="h-6 w-6 dark:hidden"
/>
<img
src="/logo-dark.svg"
alt="Gitea Mirror Logo"
className="h-6 w-6 hidden dark:block"
/>
<span className="text-xl font-bold hidden sm:inline">Gitea Mirror</span>
</button>
</div>
<div className="flex items-center gap-4">
<div className="flex items-center gap-2 sm:gap-4">
{showLiveButton && (
<Button
variant="outline"
size="lg"
className="flex items-center gap-2"
size="sm"
className="flex items-center gap-2 sm:px-4"
onClick={toggleLive}
title={getTooltip()}
>
@@ -95,7 +110,7 @@ export function Header({ currentPage, onNavigate }: HeaderProps) {
? 'bg-orange-400'
: 'bg-gray-500'
}`} />
<span>LIVE</span>
<span className="hidden sm:inline">LIVE</span>
</Button>
)}
@@ -111,12 +126,12 @@ export function Header({ currentPage, onNavigate }: HeaderProps) {
{user.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar>
<Button variant="outline" size="lg" onClick={handleLogout}>
<Button variant="outline" size="sm" onClick={handleLogout} className="hidden sm:inline-flex">
Logout
</Button>
</>
) : (
<Button variant="outline" size="lg" asChild>
<Button variant="outline" size="sm" asChild>
<a href="/login">Login</a>
</Button>
)}