From a39a76f7a5abe4958491b58749bac9ee380dd615 Mon Sep 17 00:00:00 2001
From: Dev Server <dev@uchill.online>
Date: Thu, 12 Mar 2026 16:52:33 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20use=20custom=20logo=20files=20=E2=80=94?=
 =?UTF-8?q?=20logo.svg=20(expanded)=20/=20favicon.png=20(mini)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Logo component now renders logo.svg (full) or favicon.png (icon) from /logo/
- nav-vertical: mini mode passes mini prop → favicon.png
- animate-logo (splash screen): uses favicon.png icon with animation ring

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/animate/animate-logo.jsx   |  2 +-
 front_minimal/src/components/logo/logo.jsx    | 89 +++++++------------
 .../src/layouts/dashboard/nav-vertical.jsx    |  2 +-
 3 files changed, 32 insertions(+), 61 deletions(-)

diff --git a/front_minimal/src/components/animate/animate-logo.jsx b/front_minimal/src/components/animate/animate-logo.jsx
index c68327f..b4f46c3 100644
--- a/front_minimal/src/components/animate/animate-logo.jsx
+++ b/front_minimal/src/components/animate/animate-logo.jsx
@@ -33,7 +33,7 @@ export function AnimateLogo1({ logo, sx, ...other }) {
         }}
         sx={{ display: 'inline-flex' }}
       >
-        {logo ?? <Logo disableLink width={64} height={64} />}
+        {logo ?? <Logo disableLink width={64} height={64} mini />}
       </Box>
 
       <Box
diff --git a/front_minimal/src/components/logo/logo.jsx b/front_minimal/src/components/logo/logo.jsx
index 318410b..dc1f7ae 100644
--- a/front_minimal/src/components/logo/logo.jsx
+++ b/front_minimal/src/components/logo/logo.jsx
@@ -1,82 +1,53 @@
 
-import { useId, forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 import Box from '@mui/material/Box';
 import NoSsr from '@mui/material/NoSsr';
-import { useTheme } from '@mui/material/styles';
 
+import { CONFIG } from 'src/config-global';
 import { RouterLink } from 'src/routes/components';
 
 import { logoClasses } from './classes';
 
 // ----------------------------------------------------------------------
 
+/**
+ * mini=false (default) → full logo (logo.svg)
+ * mini=true            → icon only (favicon.png)
+ */
 export const Logo = forwardRef(
-  ({ width = 40, height = 40, disableLink = false, className, href = '/', sx, ...other }, ref) => {
-    const theme = useTheme();
+  ({ width, height, mini = false, disableLink = false, className, href = '/', sx, ...other }, ref) => {
 
-    const gradientId = useId();
+    const defaultWidth  = mini ? 40 : 134;
+    const defaultHeight = mini ? 40 : 40;
 
-    const PRIMARY_LIGHT = theme.vars.palette.primary.light;
+    const w = width  ?? defaultWidth;
+    const h = height ?? defaultHeight;
 
-    const PRIMARY_MAIN = theme.vars.palette.primary.main;
-
-    const PRIMARY_DARK = theme.vars.palette.primary.dark;
-
-    /*
-     * OR using local (public folder)
-     * const logo = ( <Box alt="logo" component="img" src={`${CONFIG.site.basePath}/logo/logo-single.svg`} width={width} height={height} /> );
-     */
-
-    const logo = (
-      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512">
-        <defs>
-          <linearGradient id={`${gradientId}-1`} x1="100%" x2="50%" y1="9.946%" y2="50%">
-            <stop offset="0%" stopColor={PRIMARY_DARK} />
-            <stop offset="100%" stopColor={PRIMARY_MAIN} />
-          </linearGradient>
-
-          <linearGradient id={`${gradientId}-2`} x1="50%" x2="50%" y1="0%" y2="100%">
-            <stop offset="0%" stopColor={PRIMARY_LIGHT} />
-            <stop offset="100%" stopColor={PRIMARY_MAIN} />
-          </linearGradient>
-
-          <linearGradient id={`${gradientId}-3`} x1="50%" x2="50%" y1="0%" y2="100%">
-            <stop offset="0%" stopColor={PRIMARY_LIGHT} />
-            <stop offset="100%" stopColor={PRIMARY_MAIN} />
-          </linearGradient>
-        </defs>
-
-        <g fill={PRIMARY_MAIN} fillRule="evenodd" stroke="none" strokeWidth="1">
-          <path
-            fill={`url(#${`${gradientId}-1`})`}
-            d="M183.168 285.573l-2.918 5.298-2.973 5.363-2.846 5.095-2.274 4.043-2.186 3.857-2.506 4.383-1.6 2.774-2.294 3.939-1.099 1.869-1.416 2.388-1.025 1.713-1.317 2.18-.95 1.558-1.514 2.447-.866 1.38-.833 1.312-.802 1.246-.77 1.18-.739 1.111-.935 1.38-.664.956-.425.6-.41.572-.59.8-.376.497-.537.69-.171.214c-10.76 13.37-22.496 23.493-36.93 29.334-30.346 14.262-68.07 14.929-97.202-2.704l72.347-124.682 2.8-1.72c49.257-29.326 73.08 1.117 94.02 40.927z"
-          />
-          <path
-            fill={`url(#${`${gradientId}-2`})`}
-            d="M444.31 229.726c-46.27-80.956-94.1-157.228-149.043-45.344-7.516 14.384-12.995 42.337-25.267 42.337v-.142c-12.272 0-17.75-27.953-25.265-42.337C189.79 72.356 141.96 148.628 95.69 229.584c-3.483 6.106-6.828 11.932-9.69 16.996 106.038-67.127 97.11 135.667 184 137.278V384c86.891-1.611 77.962-204.405 184-137.28-2.86-5.062-6.206-10.888-9.69-16.994"
-          />
-          <path
-            fill={`url(#${`${gradientId}-3`})`}
-            d="M450 384c26.509 0 48-21.491 48-48s-21.491-48-48-48-48 21.491-48 48 21.491 48 48 48"
-          />
-        </g>
-      </svg>
+    const logo = mini ? (
+      <Box
+        component="img"
+        alt="logo icon"
+        src={`${CONFIG.site.basePath}/logo/favicon.png`}
+        sx={{ width: w, height: h, objectFit: 'contain' }}
+      />
+    ) : (
+      <Box
+        component="img"
+        alt="logo"
+        src={`${CONFIG.site.basePath}/logo/logo.svg`}
+        sx={{ width: w, height: h, objectFit: 'contain' }}
+      />
     );
 
     return (
       <NoSsr
         fallback={
           <Box
-            width={width}
-            height={height}
+            width={w}
+            height={h}
             className={logoClasses.root.concat(className ? ` ${className}` : '')}
-            sx={{
-              flexShrink: 0,
-              display: 'inline-flex',
-              verticalAlign: 'middle',
-              ...sx,
-            }}
+            sx={{ flexShrink: 0, display: 'inline-flex', verticalAlign: 'middle', ...sx }}
           />
         }
       >
@@ -84,8 +55,8 @@ export const Logo = forwardRef(
           ref={ref}
           component={RouterLink}
           href={href}
-          width={width}
-          height={height}
+          width={w}
+          height={h}
           className={logoClasses.root.concat(className ? ` ${className}` : '')}
           aria-label="logo"
           sx={{
diff --git a/front_minimal/src/layouts/dashboard/nav-vertical.jsx b/front_minimal/src/layouts/dashboard/nav-vertical.jsx
index c14d5e4..3e3f330 100644
--- a/front_minimal/src/layouts/dashboard/nav-vertical.jsx
+++ b/front_minimal/src/layouts/dashboard/nav-vertical.jsx
@@ -35,7 +35,7 @@ export function NavVertical({ sx, data, slots, isNavMini, layoutQuery, onToggleN
     <>
       {slots?.topArea ?? (
         <Box sx={{ display: 'flex', justifyContent: 'center', py: 2.5 }}>
-          <Logo />
+          <Logo mini />
         </Box>
       )}