initial commit

src/components/BrandsSidebar/BrandsSidebar.module.scss

@@ -0,0 +1,51 @@
+.sidebarContainer {
+  @media (max-width: 1023px) {
+    // display: block;
+  }
+}
+
+.mobileNavButton {
+  background-color: #888888;
+  border-radius: 0.5rem;
+  font-size: 14px;
+  border: none;
+  padding: 11px;
+  font-weight: 600;
+  color: #ffffffff;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  height: 100%;
+  img {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.sidebarDrawer {
+  :global(.ant-drawer-body) {
+    padding: 12px;
+  }
+}
+
+
+.searchInput {
+    margin-bottom: 16px;
+    width: 100%;
+  }
+  
+  .brandsList {
+    max-height: 600px;
+    overflow-y: auto;
+  
+    .brandItem {
+      margin-bottom: 8px;
+  
+      .ant-checkbox-wrapper {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+      }
+    }
+  }
+

src/components/BrandsSidebar/index.jsx

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import { Drawer, Input, Checkbox } from "antd";
+import styles from "./BrandsSidebar.module.scss";
+import { useTranslation } from "react-i18next";
+import brand from "../../assets/icons/brand.svg";
+
+const Sidebar = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const { t, i18n } = useTranslation();
+  const brands = [
+    "Abat",
+    "Altın",
+    "Arçalyk",
+    "Aýaz baba",
+    "Balşeker",
+    "Bars",
+    "Belet Film",
+    "Beýlekiler / Другие",
+    "Bingo",
+    "Bold",
+    "Carte Noire",
+    "Çaykur",
+    "Dabara",
+    "Datmeni",
+    "Elin",
+    "Emin Et",
+    "Enemeli",
+    "Ermak",
+    "Eyfel",
+    "Familia",
+    "Farmasi",
+    "Ferrero Rocher",
+    "Granum",
+  ];
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleSearch = (e) => {
+    setSearchTerm(e.target.value.toLowerCase());
+  };
+
+  const filteredBrands = brands.filter((brand) =>
+    brand.toLowerCase().includes(searchTerm)
+  );
+
+  return (
+    <div className={styles.sidebarContainer}>
+      <button onClick={handleToggle} className={styles.mobileNavButton}>
+        <img src={brand} alt="" />
+        {t("navbar.brands")}
+      </button>
+
+      <Drawer
+        title={t("navbar.brands")}
+        placement="right"
+        onClose={handleToggle}
+        open={isOpen}
+        className={styles.sidebarDrawer}
+        width={320}
+      >
+        <Input
+          placeholder={t("common.search")}
+          value={searchTerm}
+          onChange={handleSearch}
+          className={styles.searchInput}
+        />
+        <div className={styles.brandsList}>
+          {filteredBrands.map((brand, index) => (
+            <div key={index} className={styles.brandItem}>
+              <Checkbox>{brand}</Checkbox>
+            </div>
+          ))}
+        </div>
+      </Drawer>
+    </div>
+  );
+};
+
+export default Sidebar;