Improved navigation and user menu layout on mobile devices

FlorianLeChat · Feb 22, 2024 · 3253685 · 3253685
1 parent 5d9a93d
commit 3253685
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 62 deletions.
diff --git a/app/[locale]/components/header.tsx → app/[locale]/components/navigation.tsx b/app/[locale]/components/header.tsx → app/[locale]/components/navigation.tsx
@@ -6,17 +6,24 @@
 
 import Link from "next/link";
 import Image from "next/image";
-import { Bell, User, Files, Palette, Cctv, Bug } from "lucide-react";
+import { Bug,
+	Bell,
+	User,
+	Cctv,
+	Files,
+	Palette,
+	Settings,
+	LayoutDashboard } from "lucide-react";
 
-import GitHubDark from "../../../public/assets/images/github-dark.png";
-import GitHubLight from "../../../public/assets/images/github-light.png";
-import { buttonVariants } from "./ui/button";
+import GitHubDark from "@/public/assets/images/github-dark.png";
+import GitHubLight from "@/public/assets/images/github-light.png";
 import { NavigationMenu,
 	NavigationMenuItem,
 	NavigationMenuLink,
 	NavigationMenuList,
 	NavigationMenuContent,
-	NavigationMenuTrigger } from "./ui/navigation-menu";
+	NavigationMenuTrigger,
+	navigationMenuTriggerStyle } from "./ui/navigation-menu";
 
 // Déclaration des routes de paramétrage.
 export const routes: {
@@ -100,18 +107,17 @@ export default function Header( {
 {
 	// Affichage du rendu HTML du composant.
 	return (
-		<NavigationMenu>
+		<NavigationMenu className="flex items-center max-md:flex-col">
 			<NavigationMenuList>
 				{/* Page d'accueil */}
 				<NavigationMenuItem>
 					<NavigationMenuLink asChild>
 						<Link
 							href="/dashboard"
-							className={buttonVariants( {
-								variant: "outline"
-							} )}
+							className={navigationMenuTriggerStyle()}
 						>
-							Tableau de bord
+							<LayoutDashboard className="h-5 w-5 md:hidden" />
+							<p className="hidden md:inline">Tableau de bord</p>
 						</Link>
 					</NavigationMenuLink>
 				</NavigationMenuItem>
@@ -122,7 +128,8 @@ export default function Header( {
 						id="settings"
 						aria-controls="settings"
 					>
-						Paramètres
+						<Settings className="h-5 w-5 md:hidden" />
+						<p className="hidden md:inline">Paramètres</p>
 					</NavigationMenuTrigger>
 
 					<NavigationMenuContent>

diff --git a/app/[locale]/components/user-menu.tsx b/app/[locale]/components/user-menu.tsx
@@ -215,7 +215,7 @@ export default function UserMenu( { session }: { session: Session } )
 
 	// Affichage du rendu HTML du composant.
 	return (
-		<nav className="flex items-center justify-center space-x-4 md:ml-auto">
+		<aside className="flex items-center justify-center space-x-4 sm:ml-auto">
 			{/* Notifications utilisateur */}
 			<Dialog>
 				<DialogTrigger
@@ -468,6 +468,6 @@ export default function UserMenu( { session }: { session: Session } )
 					</DropdownMenuItem>
 				</DropdownMenuContent>
 			</DropdownMenu>
-		</nav>
+		</aside>
 	);
 }
diff --git a/app/[locale]/dashboard/page.tsx b/app/[locale]/dashboard/page.tsx
@@ -20,9 +20,9 @@ import { generateMetadata } from "../layout";
 // Importation des composants.
 import { Separator } from "../components/ui/separator";
 
-const Header = lazy( () => import( "../components/header" ) );
 const UserMenu = lazy( () => import( "../components/user-menu" ) );
 const DataTable = lazy( () => import( "./components/data-table" ) );
+const Navigation = lazy( () => import( "../components/navigation" ) );
 
 // Déclaration des propriétés de la page.
 export const metadata: Metadata = {
@@ -135,19 +135,17 @@ export default async function Page( {
 	// Affichage du rendu HTML de la page.
 	return (
 		<>
-			<header className="flex min-h-[4rem] flex-wrap justify-center gap-2 border-b p-4 max-md:flex-col">
-				<div className="align-center flex items-center gap-2 max-md:flex-col md:gap-4">
-					{/* Titre du site */}
-					<h1 className="text-xl font-semibold">
-						<Link href="/">💾 {meta.title as string}</Link>
-					</h1>
-
-					{/* Éléments de navigation */}
-					<Header
-						theme={session.user.preferences.theme}
-						source={meta.source}
-					/>
-				</div>
+			<header className="flex min-h-[4rem] flex-wrap items-center justify-center gap-y-4 border-b px-4 py-8 sm:gap-x-4 sm:py-4">
+				{/* Titre du site */}
+				<h1 className="text-2xl font-semibold max-sm:w-full max-sm:max-w-fit max-sm:overflow-hidden max-sm:text-ellipsis max-sm:whitespace-nowrap sm:text-xl">
+					<Link href="/">💾 {meta.title as string}</Link>
+				</h1>
+
+				{/* Navigation du site */}
+				<Navigation
+					theme={session.user.preferences.theme}
+					source={meta.source}
+				/>
 
 				{/* Menu utilisateur */}
 				<UserMenu session={session} />

diff --git a/app/[locale]/legal/layout.tsx b/app/[locale]/legal/layout.tsx
@@ -11,8 +11,8 @@ import { unstable_setRequestLocale } from "next-intl/server";
 import { auth } from "@/utilities/next-auth";
 import { generateMetadata } from "../layout";
 
-const Header = lazy( () => import( "../components/header" ) );
 const UserMenu = lazy( () => import( "../components/user-menu" ) );
+const Navigation = lazy( () => import( "../components/navigation" ) );
 
 export default async function Layout( {
 	children,
@@ -32,24 +32,24 @@ export default async function Layout( {
 	// Affichage du rendu HTML de la page.
 	return (
 		<>
-			<header className="flex min-h-[4rem] flex-wrap justify-center gap-2 border-b p-4 max-md:flex-col">
-				<div className="align-center flex items-center gap-2 max-md:flex-col md:gap-4">
-					{/* Titre du site */}
-					<h1 className="text-xl font-semibold">
-						<Link href="/">💾 {meta.title as string}</Link>
-					</h1>
-
-					{/* Éléments de navigation */}
-					{session && (
-						<Header
+			<header className="flex min-h-[4rem] flex-wrap items-center justify-center gap-y-4 border-b px-4 py-8 sm:gap-x-4 sm:py-4">
+				{/* Titre du site */}
+				<h1 className="text-2xl font-semibold max-sm:w-full max-sm:max-w-fit max-sm:overflow-hidden max-sm:text-ellipsis max-sm:whitespace-nowrap sm:text-xl">
+					<Link href="/">💾 {meta.title as string}</Link>
+				</h1>
+
+				{session && (
+					<>
+						{/* Navigation du site */}
+						<Navigation
 							theme={session.user.preferences.theme}
 							source={meta.source}
 						/>
-					)}
-				</div>
 
-				{/* Menu utilisateur */}
-				{session && <UserMenu session={session} />}
+						{/* Menu utilisateur */}
+						<UserMenu session={session} />
+					</>
+				)}
 			</header>
 
 			{children}

diff --git a/...ocale]/settings/components/navigation.tsx → app/[locale]/settings/components/routes.tsx b/...ocale]/settings/components/navigation.tsx → app/[locale]/settings/components/routes.tsx
@@ -1,5 +1,5 @@
 //
-// Composant de navigation des paramètres.
+// Composant des routes vers les paramètres.
 //
 
 "use client";
@@ -9,10 +9,10 @@ import { merge } from "@/utilities/tailwind";
 import { Cookie } from "lucide-react";
 import { usePathname } from "next/navigation";
 
-import { routes } from "../../components/header";
+import { routes } from "../../components/navigation";
 import { Button, buttonVariants } from "../../components/ui/button";
 
-export default function Navigation()
+export default function Routes()
 {
 	// Déclaration des variables d'état.
 	const pathname = usePathname();

diff --git a/app/[locale]/settings/layout.tsx b/app/[locale]/settings/layout.tsx
@@ -16,9 +16,9 @@ import { generateMetadata } from "../layout";
 // Importation des composants.
 import { Separator } from "../components/ui/separator";
 
-const Header = lazy( () => import( "../components/header" ) );
+const Routes = lazy( () => import( "./components/routes" ) );
 const UserMenu = lazy( () => import( "../components/user-menu" ) );
-const Navigation = lazy( () => import( "./components/navigation" ) );
+const Navigation = lazy( () => import( "../components/navigation" ) );
 
 // Déclaration des propriétés de la page.
 export const metadata: Metadata = {
@@ -49,19 +49,17 @@ export default async function Layout( {
 	// Affichage du rendu HTML de la page.
 	return (
 		<>
-			<header className="flex min-h-[4rem] flex-wrap justify-center gap-2 border-b p-4 max-md:flex-col">
-				<div className="align-center flex items-center gap-2 max-md:flex-col md:gap-4">
-					{/* Titre du site */}
-					<h1 className="text-xl font-semibold">
-						<Link href="/">💾 {meta.title as string}</Link>
-					</h1>
-
-					{/* Éléments de navigation */}
-					<Header
-						theme={session.user.preferences.theme}
-						source={meta.source}
-					/>
-				</div>
+			<header className="flex min-h-[4rem] flex-wrap items-center justify-center gap-y-4 border-b px-4 py-8 sm:gap-x-4 sm:py-4">
+				{/* Titre du site */}
+				<h1 className="text-2xl font-semibold max-sm:w-full max-sm:max-w-fit max-sm:overflow-hidden max-sm:text-ellipsis max-sm:whitespace-nowrap sm:text-xl">
+					<Link href="/">💾 {meta.title as string}</Link>
+				</h1>
+
+				{/* Navigation du site */}
+				<Navigation
+					theme={session.user.preferences.theme}
+					source={meta.source}
+				/>
 
 				{/* Menu utilisateur */}
 				<UserMenu session={session} />
@@ -83,8 +81,8 @@ export default async function Layout( {
 				<Separator className="my-6" />
 
 				<main className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
-					{/* Navigation latérale */}
-					<Navigation />
+					{/* Routes de navigation */}
+					<Routes />
 
 					{/* Contenu principal */}
 					<section className="flex-1 space-y-6 lg:max-w-2xl">