feat: changed SidebarHeader partially to Astro component

adjust · Oct 17, 2023 · 1656dc6 · 1656dc6
1 parent 7c76813
commit 1656dc6
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 21 deletions.
diff --git a/src/components/LeftSidebar/SidebarHeader/AudienceDropdown.tsx b/src/components/LeftSidebar/SidebarHeader/AudienceDropdown.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useRef } from "react";
+import { FC, useRef, useState } from "react";
 import classNames from "classnames";
 
 import { useOnClickOutside } from "@hooks/useOnClickOutside";
@@ -8,7 +8,7 @@ import { HELP_CENTER_LINK } from "src/consts";
 import "./audience.css";
 
 const AudienceDropdown: FC = () => {
-  const [isMenuShown, setIsMenuShown] = React.useState(false);
+  const [isMenuShown, setIsMenuShown] = useState(false);
   const ref = useRef(null);
   const audiences = [
     {

diff --git a/src/components/LeftSidebar/SidebarHeader/SidebarHeader.astro b/src/components/LeftSidebar/SidebarHeader/SidebarHeader.astro
@@ -0,0 +1,16 @@
+---
+import AudienceDropdown from "./AudienceDropdown";
+
+interface SidebarHeaderProps {
+  homeUrl: string;
+}
+
+const { homeUrl } = Astro.props as SidebarHeaderProps;
+---
+
+<div class="sidebar-header flex flex-row items-center mb-[74px] pt-7 pl-[27px]">
+  <a href={homeUrl}>
+    <img src="/images/Adjust-icon.svg" alt="adjust-icon" />
+  </a>
+  <AudienceDropdown client:load />
+</div>
diff --git a/src/components/LeftSidebar/SidebarHeader/index.tsx b/src/components/LeftSidebar/SidebarHeader/index.tsx
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -7,7 +7,7 @@ import PageContent from "../components/PageContent/PageContent.astro";
 import Navigation from "../components/LeftSidebar/Navigation.astro";
 import { GITHUB_EDIT_URL, SITE } from "../consts";
 import { getNavigationEntries } from "src/utils/helpers/navigation/getNavigationEntries";
-import SidebarHeader from "@components/LeftSidebar/SidebarHeader";
+import SidebarHeader from "@components/LeftSidebar/SidebarHeader/SidebarHeader.astro";
 import SidebarSearch from "@components/LeftSidebar/SidebarSearch/SidebarSearch.astro";
 import LanguageSwitch from "@components/LeftSidebar/LanguageSwitch";
 import { LOCALE_NAMES } from "@i18n/locales";
@@ -51,7 +51,7 @@ const homeUrl = `${Astro.url.origin}/${currentLang}`;
         title="Site Navigation"
       >
         {/* Header with audience switch */}
-        <SidebarHeader homeUrl={homeUrl} client:load />
+        <SidebarHeader homeUrl={homeUrl} />
         {/* Search input */}
         <SidebarSearch />
         <Navigation navigationEntries={navigationEntries} />