feat(frontend): add page titles to navbar on mobile
- Save vertical space on mobile by showing page title in navbar
- Mobile: "spotlight.cam - {PageTitle}" instead of separate h1
- Desktop: unchanged - page titles remain as separate headings
- Saves ~60-80px vertical space on mobile devices
Pages updated:
- Dashboard, Events, Matches, History, Profile
This commit is contained in:
@@ -1,13 +1,13 @@
|
||||
import Navbar from './Navbar';
|
||||
|
||||
const Layout = ({ children, fullWidth = false, noPadding = false }) => {
|
||||
const Layout = ({ children, fullWidth = false, noPadding = false, pageTitle = null }) => {
|
||||
const mainClasses = fullWidth || noPadding
|
||||
? "flex-1 flex flex-col"
|
||||
: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8";
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex flex-col">
|
||||
<Navbar />
|
||||
<Navbar pageTitle={pageTitle} />
|
||||
<main className={mainClasses}>
|
||||
{children}
|
||||
</main>
|
||||
|
||||
@@ -7,7 +7,7 @@ import { matchesAPI } from '../../services/api';
|
||||
import { connectSocket, disconnectSocket, getSocket } from '../../services/socket';
|
||||
import { MATCH_STATUS } from '../../constants';
|
||||
|
||||
const Navbar = () => {
|
||||
const Navbar = ({ pageTitle = null }) => {
|
||||
const { user, logout } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [pendingMatchesCount, setPendingMatchesCount] = useState(0);
|
||||
@@ -67,7 +67,12 @@ const Navbar = () => {
|
||||
<div className="flex items-center">
|
||||
<Link to="/dashboard" className="flex items-center space-x-2">
|
||||
<Video className="w-8 h-8 text-primary-600" />
|
||||
<span className="text-xl font-bold text-gray-900">spotlight.cam</span>
|
||||
<span className="text-xl font-bold text-gray-900">
|
||||
<span className="hidden lg:inline">spotlight.cam</span>
|
||||
<span className="lg:hidden">
|
||||
{pageTitle ? `spotlight.cam - ${pageTitle}` : 'spotlight.cam'}
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
{/* Desktop menu */}
|
||||
|
||||
Reference in New Issue
Block a user