From 2d807878db0e274640cdf2357cb8861671f5b5dc Mon Sep 17 00:00:00 2001
From: ZehranurC <zehranurakky@gmail.com>
Date: Wed, 10 Jun 2026 14:32:54 +0300
Subject: [PATCH 1/6] fix: logo prop refactor to component based

---
 src/lib/components/NavBar/NavBar.module.scss        |  5 ++++-
 src/lib/components/NavBar/NavBar.stories.tsx        |  2 +-
 src/lib/components/NavBar/NavBar.test.tsx           | 13 ++++++++++++-
 src/lib/components/NavBar/components/NavBarLogo.tsx | 10 +++++-----
 src/lib/components/NavBar/types.ts                  |  3 +--
 5 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/NavBar/NavBar.module.scss b/src/lib/components/NavBar/NavBar.module.scss
index fa7ffce..93da992 100644
--- a/src/lib/components/NavBar/NavBar.module.scss
+++ b/src/lib/components/NavBar/NavBar.module.scss
@@ -24,8 +24,11 @@ $variants: ("neutral", "primary", "secondary", "info", "danger", "warning", "suc
 }
 
 .logo {
+  display: flex;
+  align-items: center;
   height: var(--base-sizing-40x);
-  img {
+
+  > * {
     height: 100%;
   }
 }
diff --git a/src/lib/components/NavBar/NavBar.stories.tsx b/src/lib/components/NavBar/NavBar.stories.tsx
index 5f7f49b..7194643 100644
--- a/src/lib/components/NavBar/NavBar.stories.tsx
+++ b/src/lib/components/NavBar/NavBar.stories.tsx
@@ -8,7 +8,7 @@ import { useState } from "react";
 const argValues: NavBarProps = {
   logo: {
     href: "https://motif-ui.com/",
-    imgPath: LOGO_URL,
+    image: <img src={LOGO_URL} alt="logo" />,
   },
   button: { label: "Login", icon: "person" },
   mainMenu: {
diff --git a/src/lib/components/NavBar/NavBar.test.tsx b/src/lib/components/NavBar/NavBar.test.tsx
index 42b9037..c349318 100644
--- a/src/lib/components/NavBar/NavBar.test.tsx
+++ b/src/lib/components/NavBar/NavBar.test.tsx
@@ -172,7 +172,7 @@ describe("NavBar", () => {
     const { getByRole } = render(
       <NavBar
         logo={{
-          imgPath: "some_image",
+          image: <img src="some_image" alt="logo" />,
           href: "https://motif-ui.com/",
         }}
       />,
@@ -181,6 +181,17 @@ describe("NavBar", () => {
     expect(getByRole("img")).toHaveAttribute("src", "some_image");
   });
 
+  it("should render a custom component as the logo", () => {
+    const CustomLogo = ({ title }: { title: string }) => (
+      <svg role="img" aria-label={title}>
+        <title>{title}</title>
+      </svg>
+    );
+    const { getByRole } = render(<NavBar logo={{ image: <CustomLogo title="Custom logo" /> }} />);
+
+    expect(getByRole("img", { name: "Custom logo" })).toBeInTheDocument();
+  });
+
   it("should render either an action menu with the props in the actionMenu prop or a main menu with the props in the mainMenu prop", () => {
     const mockClick = jest.fn();
     const { getByText, getByRole, rerender } = render(
diff --git a/src/lib/components/NavBar/components/NavBarLogo.tsx b/src/lib/components/NavBar/components/NavBarLogo.tsx
index 703b23a..9b9d4e8 100644
--- a/src/lib/components/NavBar/components/NavBarLogo.tsx
+++ b/src/lib/components/NavBar/components/NavBarLogo.tsx
@@ -1,19 +1,19 @@
+import type { ReactElement } from "react";
 import styles from "../NavBar.module.scss";
 
 export type NavBarLogoProps = {
-  imgPath: string;
-  alt?: string;
+  image: ReactElement;
   href?: string;
 };
 
 const NavBarLogo = (props: NavBarLogoProps) => {
-  const { href, imgPath, alt } = props;
+  const { href, image } = props;
   return href ? (
     <a href={href} className={styles.logo}>
-      <img src={imgPath} alt={alt} />
+      {image}
     </a>
   ) : (
-    <img src={imgPath} alt={alt} className={styles.logo} />
+    <div className={styles.logo}>{image}</div>
   );
 };
 export default NavBarLogo;
diff --git a/src/lib/components/NavBar/types.ts b/src/lib/components/NavBar/types.ts
index f47d99f..59f67ac 100644
--- a/src/lib/components/NavBar/types.ts
+++ b/src/lib/components/NavBar/types.ts
@@ -72,8 +72,7 @@ export type NavBarDefaultableProps = {
   /**
    * ```
    * {
-   *   imgPath: string;
-   *   alt?: string;
+   *   image: ReactElement;
    *   href?: string;
    * }
    * ```

From f80851a514909cf0999b27b52e4fb0d779fec66f Mon Sep 17 00:00:00 2001
From: ZehranurC <zehranurakky@gmail.com>
Date: Wed, 17 Jun 2026 16:07:35 +0300
Subject: [PATCH 2/6] fix: review fixes

---
 src/lib/components/NavBar/NavBar.module.scss  |  3 ++-
 src/lib/components/NavBar/NavBar.stories.tsx  |  3 ++-
 src/lib/components/NavBar/NavBar.test.tsx     | 25 +++++++++++++++++++
 src/lib/components/NavBar/NavBar.tsx          |  3 ++-
 .../NavBar/components/NavBarLogo.tsx          | 12 ++++++---
 src/lib/components/NavBar/types.ts            |  9 ++++++-
 6 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/NavBar/NavBar.module.scss b/src/lib/components/NavBar/NavBar.module.scss
index 93da992..fdd7376 100644
--- a/src/lib/components/NavBar/NavBar.module.scss
+++ b/src/lib/components/NavBar/NavBar.module.scss
@@ -28,7 +28,8 @@ $variants: ("neutral", "primary", "secondary", "info", "danger", "warning", "suc
   align-items: center;
   height: var(--base-sizing-40x);
 
-  > * {
+  > *,
+  > * > * {
     height: 100%;
   }
 }
diff --git a/src/lib/components/NavBar/NavBar.stories.tsx b/src/lib/components/NavBar/NavBar.stories.tsx
index 7194643..71c48bf 100644
--- a/src/lib/components/NavBar/NavBar.stories.tsx
+++ b/src/lib/components/NavBar/NavBar.stories.tsx
@@ -8,7 +8,8 @@ import { useState } from "react";
 const argValues: NavBarProps = {
   logo: {
     href: "https://motif-ui.com/",
-    image: <img src={LOGO_URL} alt="logo" />,
+    imgPath: LOGO_URL,
+    alt: "logo",
   },
   button: { label: "Login", icon: "person" },
   mainMenu: {
diff --git a/src/lib/components/NavBar/NavBar.test.tsx b/src/lib/components/NavBar/NavBar.test.tsx
index c349318..f72fc9a 100644
--- a/src/lib/components/NavBar/NavBar.test.tsx
+++ b/src/lib/components/NavBar/NavBar.test.tsx
@@ -192,6 +192,31 @@ describe("NavBar", () => {
     expect(getByRole("img", { name: "Custom logo" })).toBeInTheDocument();
   });
 
+  it("should render custom component using logoSlot prop", () => {
+    const CustomLogo = ({ title }: { title: string }) => (
+      <svg role="img" aria-label={title}>
+        <title>{title}</title>
+      </svg>
+    );
+    const { getByRole } = render(<NavBar logoSlot={<CustomLogo title="Custom SVG Logo" />} />);
+
+    expect(getByRole("img", { name: "Custom SVG Logo" })).toBeInTheDocument();
+  });
+
+  it("should render logoSlot with href", () => {
+    const { getByRole } = render(
+      <NavBar
+        logoSlot={
+          <a href="https://example.com/">
+            <img src="logo.png" alt="Logo" />
+          </a>
+        }
+      />,
+    );
+    expect(getByRole("link")).toHaveAttribute("href", "https://example.com/");
+    expect(getByRole("img")).toHaveAttribute("src", "logo.png");
+  });
+
   it("should render either an action menu with the props in the actionMenu prop or a main menu with the props in the mainMenu prop", () => {
     const mockClick = jest.fn();
     const { getByText, getByRole, rerender } = render(
diff --git a/src/lib/components/NavBar/NavBar.tsx b/src/lib/components/NavBar/NavBar.tsx
index c0b9937..ecb515a 100644
--- a/src/lib/components/NavBar/NavBar.tsx
+++ b/src/lib/components/NavBar/NavBar.tsx
@@ -21,6 +21,7 @@ const NavBar = (props: PropsWithRef<NavBarProps, HTMLElement>) => {
     className,
     style,
     logo,
+    logoSlot,
     search,
     button,
     mainMenu,
@@ -35,7 +36,7 @@ const NavBar = (props: PropsWithRef<NavBarProps, HTMLElement>) => {
         {mainMenu && (
           <MotifIconButton name="density_medium" size="xl" onClick={() => setMenuCollapsed(p => !p)} className={styles.hamburger} />
         )}
-        {logo && <NavBarLogo {...logo} />}
+        {logoSlot ? <NavBarLogo image={logoSlot} /> : logo ? <NavBarLogo {...logo} /> : null}
         <div className={styles.mainMenuContainer}>{mainMenu && <Menu {...mainMenu} main />}</div>
         {search && <NavBarSearch {...search} />}
         {button && <NavBarButton {...button} />}
diff --git a/src/lib/components/NavBar/components/NavBarLogo.tsx b/src/lib/components/NavBar/components/NavBarLogo.tsx
index 9b9d4e8..e7b6e92 100644
--- a/src/lib/components/NavBar/components/NavBarLogo.tsx
+++ b/src/lib/components/NavBar/components/NavBarLogo.tsx
@@ -2,18 +2,22 @@ import type { ReactElement } from "react";
 import styles from "../NavBar.module.scss";
 
 export type NavBarLogoProps = {
-  image: ReactElement;
+  imgPath?: string;
+  alt?: string;
   href?: string;
+  image?: ReactElement;
 };
 
 const NavBarLogo = (props: NavBarLogoProps) => {
-  const { href, image } = props;
+  const { href, imgPath, alt, image } = props;
+  const logoContent = image ? image : <img src={imgPath} alt={alt} />;
+
   return href ? (
     <a href={href} className={styles.logo}>
-      {image}
+      {logoContent}
     </a>
   ) : (
-    <div className={styles.logo}>{image}</div>
+    <div className={styles.logo}>{logoContent}</div>
   );
 };
 export default NavBarLogo;
diff --git a/src/lib/components/NavBar/types.ts b/src/lib/components/NavBar/types.ts
index 59f67ac..78472f6 100644
--- a/src/lib/components/NavBar/types.ts
+++ b/src/lib/components/NavBar/types.ts
@@ -72,12 +72,19 @@ export type NavBarDefaultableProps = {
   /**
    * ```
    * {
-   *   image: ReactElement;
+   *   imgPath: string;
+   *   alt?: string;
    *   href?: string;
    * }
    * ```
    */
   logo?: NavBarLogoProps;
+  /**
+   * Custom logo component. Takes precedence over logo prop.
+   * Use for flexible logo rendering with <img>, <Image>, <NextImage>, etc.
+   * Wrap with <a> tag if you need a link: <a href="/home"><img .../></a>
+   */
+  logoSlot?: React.ReactElement;
 };
 
 export type NavBarContextProps = {

From b1f63d575ad397ca0e8fbed13460a505d0316594 Mon Sep 17 00:00:00 2001
From: ZehranurC <zehranurakky@gmail.com>
Date: Fri, 19 Jun 2026 16:41:30 +0300
Subject: [PATCH 3/6] fix: review fixes

---
 src/lib/components/NavBar/NavBar.module.scss  |  7 ++---
 src/lib/components/NavBar/NavBar.test.tsx     | 31 ++++++-------------
 src/lib/components/NavBar/NavBar.tsx          |  2 +-
 .../NavBar/components/NavBarLogo.tsx          | 10 ++----
 src/lib/components/NavBar/types.ts            |  1 -
 5 files changed, 15 insertions(+), 36 deletions(-)

diff --git a/src/lib/components/NavBar/NavBar.module.scss b/src/lib/components/NavBar/NavBar.module.scss
index fdd7376..d8d0b83 100644
--- a/src/lib/components/NavBar/NavBar.module.scss
+++ b/src/lib/components/NavBar/NavBar.module.scss
@@ -24,13 +24,12 @@ $variants: ("neutral", "primary", "secondary", "info", "danger", "warning", "suc
 }
 
 .logo {
-  display: flex;
-  align-items: center;
+  @include flex-center;
   height: var(--base-sizing-40x);
 
-  > *,
-  > * > * {
+  > * {
     height: 100%;
+    @include flex-center;
   }
 }
 
diff --git a/src/lib/components/NavBar/NavBar.test.tsx b/src/lib/components/NavBar/NavBar.test.tsx
index f72fc9a..00485dd 100644
--- a/src/lib/components/NavBar/NavBar.test.tsx
+++ b/src/lib/components/NavBar/NavBar.test.tsx
@@ -181,29 +181,7 @@ describe("NavBar", () => {
     expect(getByRole("img")).toHaveAttribute("src", "some_image");
   });
 
-  it("should render a custom component as the logo", () => {
-    const CustomLogo = ({ title }: { title: string }) => (
-      <svg role="img" aria-label={title}>
-        <title>{title}</title>
-      </svg>
-    );
-    const { getByRole } = render(<NavBar logo={{ image: <CustomLogo title="Custom logo" /> }} />);
-
-    expect(getByRole("img", { name: "Custom logo" })).toBeInTheDocument();
-  });
-
   it("should render custom component using logoSlot prop", () => {
-    const CustomLogo = ({ title }: { title: string }) => (
-      <svg role="img" aria-label={title}>
-        <title>{title}</title>
-      </svg>
-    );
-    const { getByRole } = render(<NavBar logoSlot={<CustomLogo title="Custom SVG Logo" />} />);
-
-    expect(getByRole("img", { name: "Custom SVG Logo" })).toBeInTheDocument();
-  });
-
-  it("should render logoSlot with href", () => {
     const { getByRole } = render(
       <NavBar
         logoSlot={
@@ -213,10 +191,19 @@ describe("NavBar", () => {
         }
       />,
     );
+
     expect(getByRole("link")).toHaveAttribute("href", "https://example.com/");
     expect(getByRole("img")).toHaveAttribute("src", "logo.png");
   });
 
+  it("should prioritize logoSlot over logo prop", () => {
+    const { getByRole } = render(
+      <NavBar logo={{ image: <img src="logo-prop.png" alt="Logo prop" /> }} logoSlot={<img src="logo-slot.png" alt="Logo slot" />} />,
+    );
+
+    expect(getByRole("img")).toHaveAttribute("src", "logo-slot.png");
+  });
+
   it("should render either an action menu with the props in the actionMenu prop or a main menu with the props in the mainMenu prop", () => {
     const mockClick = jest.fn();
     const { getByText, getByRole, rerender } = render(
diff --git a/src/lib/components/NavBar/NavBar.tsx b/src/lib/components/NavBar/NavBar.tsx
index ecb515a..7f5bf1b 100644
--- a/src/lib/components/NavBar/NavBar.tsx
+++ b/src/lib/components/NavBar/NavBar.tsx
@@ -36,7 +36,7 @@ const NavBar = (props: PropsWithRef<NavBarProps, HTMLElement>) => {
         {mainMenu && (
           <MotifIconButton name="density_medium" size="xl" onClick={() => setMenuCollapsed(p => !p)} className={styles.hamburger} />
         )}
-        {logoSlot ? <NavBarLogo image={logoSlot} /> : logo ? <NavBarLogo {...logo} /> : null}
+        {(logo || logoSlot) && <NavBarLogo image={logoSlot} {...logo} />}
         <div className={styles.mainMenuContainer}>{mainMenu && <Menu {...mainMenu} main />}</div>
         {search && <NavBarSearch {...search} />}
         {button && <NavBarButton {...button} />}
diff --git a/src/lib/components/NavBar/components/NavBarLogo.tsx b/src/lib/components/NavBar/components/NavBarLogo.tsx
index e7b6e92..d1243c6 100644
--- a/src/lib/components/NavBar/components/NavBarLogo.tsx
+++ b/src/lib/components/NavBar/components/NavBarLogo.tsx
@@ -10,14 +10,8 @@ export type NavBarLogoProps = {
 
 const NavBarLogo = (props: NavBarLogoProps) => {
   const { href, imgPath, alt, image } = props;
-  const logoContent = image ? image : <img src={imgPath} alt={alt} />;
+  const logoContent = image ? href ? <a href={href}>{image}</a> : image : <img src={imgPath} alt={alt} />;
 
-  return href ? (
-    <a href={href} className={styles.logo}>
-      {logoContent}
-    </a>
-  ) : (
-    <div className={styles.logo}>{logoContent}</div>
-  );
+  return <div className={styles.logo}>{logoContent}</div>;
 };
 export default NavBarLogo;
diff --git a/src/lib/components/NavBar/types.ts b/src/lib/components/NavBar/types.ts
index 78472f6..13432ff 100644
--- a/src/lib/components/NavBar/types.ts
+++ b/src/lib/components/NavBar/types.ts
@@ -82,7 +82,6 @@ export type NavBarDefaultableProps = {
   /**
    * Custom logo component. Takes precedence over logo prop.
    * Use for flexible logo rendering with <img>, <Image>, <NextImage>, etc.
-   * Wrap with <a> tag if you need a link: <a href="/home"><img .../></a>
    */
   logoSlot?: React.ReactElement;
 };

From f8ee9a5a5a9f54fcccb384af041ab50b6ea22a02 Mon Sep 17 00:00:00 2001
From: ZehranurC <zehranurakky@gmail.com>
Date: Fri, 19 Jun 2026 16:56:55 +0300
Subject: [PATCH 4/6] fix: review fix

---
 src/lib/components/NavBar/NavBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/NavBar/NavBar.tsx b/src/lib/components/NavBar/NavBar.tsx
index 7f5bf1b..72ca288 100644
--- a/src/lib/components/NavBar/NavBar.tsx
+++ b/src/lib/components/NavBar/NavBar.tsx
@@ -36,7 +36,7 @@ const NavBar = (props: PropsWithRef<NavBarProps, HTMLElement>) => {
         {mainMenu && (
           <MotifIconButton name="density_medium" size="xl" onClick={() => setMenuCollapsed(p => !p)} className={styles.hamburger} />
         )}
-        {(logo || logoSlot) && <NavBarLogo image={logoSlot} {...logo} />}
+        {(logo || logoSlot) && <NavBarLogo {...logo} image={logoSlot || logo?.image} />}
         <div className={styles.mainMenuContainer}>{mainMenu && <Menu {...mainMenu} main />}</div>
         {search && <NavBarSearch {...search} />}
         {button && <NavBarButton {...button} />}

From 1cdd9ed9d0e76732a8593abe1d127e8219f0084d Mon Sep 17 00:00:00 2001
From: ZehranurC <zehranurakky@gmail.com>
Date: Tue, 23 Jun 2026 14:17:22 +0300
Subject: [PATCH 5/6] fix: review fixes

---
 src/lib/components/NavBar/NavBar.test.tsx     | 17 ++++++++++++----
 src/lib/components/NavBar/NavBar.tsx          |  2 +-
 .../NavBar/components/NavBarLogo.tsx          | 20 +++++++++++++------
 src/lib/components/NavBar/types.ts            |  4 ++--
 4 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/NavBar/NavBar.test.tsx b/src/lib/components/NavBar/NavBar.test.tsx
index 00485dd..71b2eed 100644
--- a/src/lib/components/NavBar/NavBar.test.tsx
+++ b/src/lib/components/NavBar/NavBar.test.tsx
@@ -172,7 +172,8 @@ describe("NavBar", () => {
     const { getByRole } = render(
       <NavBar
         logo={{
-          image: <img src="some_image" alt="logo" />,
+          imgPath: "some_image",
+          alt: "logo",
           href: "https://motif-ui.com/",
         }}
       />,
@@ -196,12 +197,20 @@ describe("NavBar", () => {
     expect(getByRole("img")).toHaveAttribute("src", "logo.png");
   });
 
-  it("should prioritize logoSlot over logo prop", () => {
-    const { getByRole } = render(
-      <NavBar logo={{ image: <img src="logo-prop.png" alt="Logo prop" /> }} logoSlot={<img src="logo-slot.png" alt="Logo slot" />} />,
+  it("should prioritize logoSlot over logo prop when both are provided", () => {
+    const { getByRole, queryByAltText } = render(
+      <NavBar
+        logo={{ imgPath: "logo-prop.png", alt: "Logo prop" }}
+        logoSlot={
+          <a href="https://example.com/">
+            <img src="logo-slot.png" alt="Logo slot" />
+          </a>
+        }
+      />,
     );
 
     expect(getByRole("img")).toHaveAttribute("src", "logo-slot.png");
+    expect(queryByAltText("Logo prop")).not.toBeInTheDocument();
   });
 
   it("should render either an action menu with the props in the actionMenu prop or a main menu with the props in the mainMenu prop", () => {
diff --git a/src/lib/components/NavBar/NavBar.tsx b/src/lib/components/NavBar/NavBar.tsx
index 72ca288..21824bd 100644
--- a/src/lib/components/NavBar/NavBar.tsx
+++ b/src/lib/components/NavBar/NavBar.tsx
@@ -36,7 +36,7 @@ const NavBar = (props: PropsWithRef<NavBarProps, HTMLElement>) => {
         {mainMenu && (
           <MotifIconButton name="density_medium" size="xl" onClick={() => setMenuCollapsed(p => !p)} className={styles.hamburger} />
         )}
-        {(logo || logoSlot) && <NavBarLogo {...logo} image={logoSlot || logo?.image} />}
+        {(logo || logoSlot) && <NavBarLogo {...logo}>{logoSlot}</NavBarLogo>}
         <div className={styles.mainMenuContainer}>{mainMenu && <Menu {...mainMenu} main />}</div>
         {search && <NavBarSearch {...search} />}
         {button && <NavBarButton {...button} />}
diff --git a/src/lib/components/NavBar/components/NavBarLogo.tsx b/src/lib/components/NavBar/components/NavBarLogo.tsx
index d1243c6..b8f0c1d 100644
--- a/src/lib/components/NavBar/components/NavBarLogo.tsx
+++ b/src/lib/components/NavBar/components/NavBarLogo.tsx
@@ -1,17 +1,25 @@
-import type { ReactElement } from "react";
+import { PropsWithChildren } from "react";
 import styles from "../NavBar.module.scss";
 
 export type NavBarLogoProps = {
   imgPath?: string;
   alt?: string;
   href?: string;
-  image?: ReactElement;
 };
 
-const NavBarLogo = (props: NavBarLogoProps) => {
-  const { href, imgPath, alt, image } = props;
-  const logoContent = image ? href ? <a href={href}>{image}</a> : image : <img src={imgPath} alt={alt} />;
+const NavBarLogo = ({ children, imgPath, alt, href }: PropsWithChildren<NavBarLogoProps>) => {
+  const logoContent =
+    children ||
+    (imgPath &&
+      (href ? (
+        <a href={href}>
+          <img src={imgPath} alt={alt} />
+        </a>
+      ) : (
+        <img src={imgPath} alt={alt} />
+      )));
 
-  return <div className={styles.logo}>{logoContent}</div>;
+  return logoContent ? <div className={styles.logo}>{logoContent}</div> : null;
 };
+
 export default NavBarLogo;
diff --git a/src/lib/components/NavBar/types.ts b/src/lib/components/NavBar/types.ts
index 13432ff..7675797 100644
--- a/src/lib/components/NavBar/types.ts
+++ b/src/lib/components/NavBar/types.ts
@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { NavBarLogoProps } from "./components/NavBarLogo";
 import { NavBarButtonProps } from "./components/NavBarButton";
 import { MenuProps } from "./components/NavBarMenu/types";
@@ -81,9 +82,8 @@ export type NavBarDefaultableProps = {
   logo?: NavBarLogoProps;
   /**
    * Custom logo component. Takes precedence over logo prop.
-   * Use for flexible logo rendering with <img>, <Image>, <NextImage>, etc.
    */
-  logoSlot?: React.ReactElement;
+  logoSlot?: ReactElement;
 };
 
 export type NavBarContextProps = {

From 1ef4ac25881ac8ab6fe53d02f34e4afb5c31096a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20Akta=C5=9F?= <mehmet@mehmetaktas.org>
Date: Wed, 24 Jun 2026 10:22:29 +0300
Subject: [PATCH 6/6] refactor fixes

---
 src/lib/components/NavBar/NavBar.module.scss  |  6 ++--
 src/lib/components/NavBar/NavBar.tsx          |  2 +-
 .../NavBar/components/NavBarLogo.tsx          | 31 ++++++++++---------
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/NavBar/NavBar.module.scss b/src/lib/components/NavBar/NavBar.module.scss
index d8d0b83..ce444bd 100644
--- a/src/lib/components/NavBar/NavBar.module.scss
+++ b/src/lib/components/NavBar/NavBar.module.scss
@@ -24,12 +24,10 @@ $variants: ("neutral", "primary", "secondary", "info", "danger", "warning", "suc
 }
 
 .logo {
-  @include flex-center;
   height: var(--base-sizing-40x);
-
-  > * {
+  display: flex;
+  * {
     height: 100%;
-    @include flex-center;
   }
 }
 
diff --git a/src/lib/components/NavBar/NavBar.tsx b/src/lib/components/NavBar/NavBar.tsx
index 21824bd..27adcaf 100644
--- a/src/lib/components/NavBar/NavBar.tsx
+++ b/src/lib/components/NavBar/NavBar.tsx
@@ -36,7 +36,7 @@ const NavBar = (props: PropsWithRef<NavBarProps, HTMLElement>) => {
         {mainMenu && (
           <MotifIconButton name="density_medium" size="xl" onClick={() => setMenuCollapsed(p => !p)} className={styles.hamburger} />
         )}
-        {(logo || logoSlot) && <NavBarLogo {...logo}>{logoSlot}</NavBarLogo>}
+        {(logo || logoSlot) && <NavBarLogo logo={logo}>{logoSlot}</NavBarLogo>}
         <div className={styles.mainMenuContainer}>{mainMenu && <Menu {...mainMenu} main />}</div>
         {search && <NavBarSearch {...search} />}
         {button && <NavBarButton {...button} />}
diff --git a/src/lib/components/NavBar/components/NavBarLogo.tsx b/src/lib/components/NavBar/components/NavBarLogo.tsx
index b8f0c1d..453b700 100644
--- a/src/lib/components/NavBar/components/NavBarLogo.tsx
+++ b/src/lib/components/NavBar/components/NavBarLogo.tsx
@@ -2,24 +2,27 @@ import { PropsWithChildren } from "react";
 import styles from "../NavBar.module.scss";
 
 export type NavBarLogoProps = {
-  imgPath?: string;
+  imgPath: string;
   alt?: string;
   href?: string;
 };
 
-const NavBarLogo = ({ children, imgPath, alt, href }: PropsWithChildren<NavBarLogoProps>) => {
-  const logoContent =
-    children ||
-    (imgPath &&
-      (href ? (
-        <a href={href}>
-          <img src={imgPath} alt={alt} />
-        </a>
-      ) : (
-        <img src={imgPath} alt={alt} />
-      )));
-
-  return logoContent ? <div className={styles.logo}>{logoContent}</div> : null;
+const NavBarLogo = (props: PropsWithChildren<{ logo?: NavBarLogoProps }>) => {
+  const { logo, children } = props;
+  const { alt, imgPath, href } = logo || {};
+  return (
+    <div className={styles.logo}>
+      {children ??
+        (logo &&
+          (href ? (
+            <a href={href}>
+              <img src={imgPath} alt={alt} />
+            </a>
+          ) : (
+            <img src={imgPath} alt={alt} />
+          )))}
+    </div>
+  );
 };
 
 export default NavBarLogo;