Change Logo

To change logo : /src/app/(DashboardLayout)/layout/shared/logo/Logo.tsx

                    
'use client'
import { useContext } from "react";

import Link from "next/link";
import { styled } from "@mui/material";
import config from '@/app/context/config'
import Image from "next/image";
import { CustomizerContext } from "@/app/context/customizerContext";

const Logo = () => {
  const { isCollapse, isSidebarHover, activeDir, activeMode } = useContext(CustomizerContext);
  const TopbarHeight = config.topbarHeight;

  const LinkStyled = styled(Link)(() => ({
    height: TopbarHeight,
    width: isCollapse == "mini-sidebar" && !isSidebarHover ? '40px' : '180px',
    overflow: "hidden",
    display: "block",
  }));

  if (activeDir === "ltr") {
    return (
      <LinkStyled href="/">
        {activeMode === "dark" ? (
          <Image
            src="/images/logos/logo-white.svg"
            alt="logo"
            height={TopbarHeight}
            width={106}
            priority
          />
        ) : (
          <Image
            src={"/images/logos/logo-dark.svg"}
            alt="logo"
            height={TopbarHeight}
            width={106}
            priority
          />
        )}
      </LinkStyled>
    );
  }

  return (
    <LinkStyled href="/">
      {activeMode === "dark" ? (
        <Image
          src="/images/logos/rtl-logo-white.svg"
          alt="logo"
          height={TopbarHeight}
          width={106}
          priority
        />
      ) : (
        <Image
          src="/images/logos/rtl-logo-dark.svg"
          alt="logo"
          height={TopbarHeight}
          width={106}
          priority
        />
      )}
    </LinkStyled>
  );
};

export default Logo;