From 0e0c56cdcf8619fc106f436990e80634377fdd66 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Mon, 14 Apr 2025 05:33:56 +0200
Subject: [PATCH] feat: Update Logo component with LogoWithText variant

---
 app/components/syntax/Logo.tsx             | 10 +++++++++-
 app/components/syntax/MobileNavigation.tsx |  4 +++-
 app/layouts/LayoutDefault.tsx              |  7 ++++---
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/components/syntax/Logo.tsx b/app/components/syntax/Logo.tsx
index e6e1530..c7e787e 100644
--- a/app/components/syntax/Logo.tsx
+++ b/app/components/syntax/Logo.tsx
@@ -33,7 +33,7 @@ function LogomarkPaths() {
   );
 }
 
-export function Logo(props: React.ComponentPropsWithoutRef<"svg">) {
+export function LogoWithText(props: React.ComponentPropsWithoutRef<"svg">) {
   return (
     <svg viewBox="0 0 231 38" {...props}>
       <LogomarkPaths />
@@ -51,3 +51,11 @@ export function Logo(props: React.ComponentPropsWithoutRef<"svg">) {
     </svg>
   );
 }
+
+export function Logo(props: React.ComponentPropsWithoutRef<"svg">) {
+  return (
+    <svg viewBox="0 0 58 38" {...props}>
+      <LogomarkPaths />
+    </svg>
+  );
+}
diff --git a/app/components/syntax/MobileNavigation.tsx b/app/components/syntax/MobileNavigation.tsx
index 587f839..e120858 100644
--- a/app/components/syntax/MobileNavigation.tsx
+++ b/app/components/syntax/MobileNavigation.tsx
@@ -55,9 +55,11 @@ export function MobileNavigation() {
       >
         <MenuIcon className="h-6 w-6 stroke-slate-500" />
       </button>
+
       <Suspense fallback={null}>
         <CloseOnNavigation close={close} />
       </Suspense>
+
       <Dialog
         open={isOpen}
         onClose={() => close()}
@@ -71,7 +73,7 @@ export function MobileNavigation() {
             </button>
 
             <Link href="/" className="ml-6" aria-label="Page d'accueil">
-              <Logo className="h-9 w-9" />
+              <Logo className="h-6 w-auto shrink-0" />
             </Link>
           </div>
           <Navigation className="mt-5 px-1" onLinkClick={onLinkClick} />
diff --git a/app/layouts/LayoutDefault.tsx b/app/layouts/LayoutDefault.tsx
index d1e8d49..8d187cf 100644
--- a/app/layouts/LayoutDefault.tsx
+++ b/app/layouts/LayoutDefault.tsx
@@ -7,7 +7,7 @@ import { Link } from "@/components/common/Link";
 import { useEffect, useState } from "react";
 import { Search } from "@syntax/Search";
 import { Hero } from "@syntax/Hero";
-import { Logo } from "@syntax/Logo";
+import { Logo, LogoWithText } from "@syntax/Logo";
 import clsx from "clsx";
 
 import "./style.css";
@@ -52,8 +52,9 @@ function Header() {
       </div>
 
       <div className="relative flex grow basis-0 items-center">
-        <Link href="/" aria-label="Home page">
-          <Logo className="h-9 w-auto lg:block" />
+        <Link href="/" aria-label="Home page" className="flex items-center gap-2">
+          <Logo className="h-9 w-auto" />
+          <span className="hidden lg:inline text-2xl font-bold -tracking-tight">Memento Dev</span>
         </Link>
       </div>