Mathis/memegoat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

feat(ui): enhance mobile user experience and authentication handling

Browse Source 
Add `UserNavMobile` component for improved mobile navigation. Update dashboard and profile pages to include authentication checks with loading states and login prompts. Introduce category-specific content tabs on the profile page. Apply sidebar enhancements, including new sections for user favorites and memes.
This commit is contained in:
Mathis HERRIOT
2026-01-14 20:50:38 +01:00
parent 5671ba60a6
commit ff6fc1c6b3
5 changed files with 182 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/app/(dashboard)/layout.tsx
View File

@@ -2,6 +2,7 @@ import * as React from "react";
import { AppSidebar } from "@/components/app-sidebar";
import { MobileFilters } from "@/components/mobile-filters";
import { SearchSidebar } from "@/components/search-sidebar";
import { UserNavMobile } from "@/components/user-nav-mobile";
import {
SidebarInset,
SidebarProvider,
@@ -16,26 +17,31 @@ export default function DashboardLayout({
modal: React.ReactNode;
}) {
return (
<SidebarProvider>
<AppSidebar />
<SidebarInset className="flex flex-row overflow-hidden">
<div className="flex-1 flex flex-col min-w-0">
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 lg:hidden">
<SidebarTrigger />
<div className="flex-1" />
</header>
<main className="flex-1 overflow-y-auto bg-zinc-50 dark:bg-zinc-950">
{children}
{modal}
</main>
<React.Suspense fallback={null}>
<SidebarProvider>
<AppSidebar />
<SidebarInset className="flex flex-row overflow-hidden">
<div className="flex-1 flex flex-col min-w-0">
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 lg:hidden sticky top-0 bg-background z-40">
<SidebarTrigger />
<div className="flex-1 flex justify-center">
<span className="font-bold text-primary text-lg">MemeGoat</span>
</div>
<UserNavMobile />
</header>
<main className="flex-1 overflow-y-auto bg-zinc-50 dark:bg-zinc-950">
{children}
{modal}
</main>
<React.Suspense fallback={null}>
<MobileFilters />
</React.Suspense>
</div>
<React.Suspense fallback={null}>
<MobileFilters />
<SearchSidebar />
</React.Suspense>
</div>
<React.Suspense fallback={null}>
<SearchSidebar />
</React.Suspense>
</SidebarInset>
</SidebarProvider>
</SidebarInset>
</SidebarProvider>
</React.Suspense>
);
}