Merge pull request #24 from saadman-galib/main

Added custom scrollbar style to LeftSidebar component

Author: DeepsEffect

src/components/Homepage/BlogCard/LeftSidebar/LeftSidebar.css

@@ -0,0 +1,17 @@
+.leftsidebar-scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
+
+.leftsidebar-scrollbar::-webkit-scrollbar-track {
+  background: #18181b;
+  border-radius: 10px;
+}
+
+.leftsidebar-scrollbar::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 10px;
+}
+
+.leftsidebar-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}

src/components/Homepage/BlogCard/LeftSidebar/LeftSidebar.jsx

@@ -1,6 +1,7 @@
 "use client";
 import { Button, Card, CardBody, CardHeader } from "@nextui-org/react";
 import React from "react";
+import "./LeftSidebar.css";
 
 export const LeftSidebar = ({ onCategorySelect, selectedCategory }) => {
   // category lists
@@ -100,20 +101,20 @@ export const LeftSidebar = ({ onCategorySelect, selectedCategory }) => {
   ];
   return (
     <div>
-      <Card>
+      <Card className="max-h-[80vh]">
         <CardHeader>
           <h2 className="text-xl flex justify-center w-full font-bold">
             Blog Categories
           </h2>
         </CardHeader>
-
         <CardBody>
-          <div className="grid gird-col-1 gap-3 max-h-[400px] overflow-y-auto lg:max-h-none lg:overflow-y-hidden">
+          <div className="grid gird-col-1 gap-3 max-h-[400px] overflow-y-auto lg:max-h-none leftsidebar-scrollbar">
             {catItems?.map((item) => (
               <Button
                 onClick={() => onCategorySelect(item.key)}
                 variant={selectedCategory === item.key ? "solid" : "light"}
                 key={item.key}
+                className="mr-2"
               >
                 {item.label}
               </Button>

tailwind.config.js

@@ -43,7 +43,7 @@ module.exports = {
             background: "#121212", // Main background color, deep dark
             primary: "#A3BE8C", // Primary brand color, muted green for accents
             secondary: "#4C566A", // Secondary elements, cool gray
-            accent: "#81A1C1", // Accent color, a calm blue for highlights 
+            accent: "#81A1C1", // Accent color, a calm blue for highlights
           },
         },
       },