From 943954e51959a6ca5759bcd8d2a0040a914702e6 Mon Sep 17 00:00:00 2001
From: Rahul Kumar Rai <rahulkumarrai2711@gmail.com>
Date: Thu, 19 Mar 2026 11:05:37 +0530
Subject: [PATCH] Migrated Sidebar component to Tailwind CSS

---
 src/components/Sidebar/Sidebar.jsx  | 15 +++----
 src/components/Sidebar/Sidebar.scss | 65 -----------------------------
 2 files changed, 8 insertions(+), 72 deletions(-)
 delete mode 100644 src/components/Sidebar/Sidebar.scss

diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
index 64e2ee3ba70f..9c7b2df804f0 100644
--- a/src/components/Sidebar/Sidebar.jsx
+++ b/src/components/Sidebar/Sidebar.jsx
@@ -6,9 +6,6 @@ import LoadingIcon from "../../styles/icons/loading.svg";
 import Print from "../Print/Print.jsx";
 import SidebarItem from "../SidebarItem/SidebarItem.jsx";
 
-// Load Styling
-import "./Sidebar.scss";
-
 const versions = [5, 4];
 const currentDocsVersion = 5;
 
@@ -28,9 +25,11 @@ export default function Sidebar({ className = "", pages, currentPage }) {
   let group;
 
   return (
-    <nav className={`sidebar ${className}`}>
-      <div className="sidebar__inner">
-        <div className="relative z-0 bg-white dark:bg-gray-100 ">
+    <nav
+      className={`hidden md:block w-full max-w-[280px] will-change-transform ${className}`}
+    >
+      <div className="p-6 sticky top-[-1px] overflow-y-auto max-h-screen">
+        <div className="relative z-0 bg-white dark:bg-gray-100">
           <label htmlFor="docs-version" className="sr-only">
             Select webpack version
           </label>
@@ -75,7 +74,9 @@ export default function Sidebar({ className = "", pages, currentPage }) {
           return (
             <div key={page.url}>
               {displayGroup ? (
-                <h4 className="sidebar__group">{group}</h4>
+                <h4 className="mt-6 ml-1 capitalize text-lg font-bold text-slate-800">
+                  {group}
+                </h4>
               ) : null}
 
               <SidebarItem
diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
deleted file mode 100644
index 37dfd0cae69d..000000000000
--- a/src/components/Sidebar/Sidebar.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@use "../../styles/partials/vars" as *;
-@use "../../styles/partials/mixins" as *;
-@use "../../styles/partials/functions" as *;
-
-.sidebar {
-  display: none;
-  width: 100%;
-  max-width: 280px;
-  will-change: transform;
-
-  @include break {
-    display: block;
-  }
-}
-
-.sidebar__inner {
-  padding: 1.5em;
-  position: sticky;
-  top: -1px;
-  overflow-y: auto;
-  max-height: 100vh;
-}
-
-.sidebar__group {
-  margin-top: 1.5em;
-  margin-left: 0.15em;
-  text-transform: capitalize;
-  font-size: getFontSize(1);
-  font-family: $font-stack-heading;
-  color: getColor(elephant);
-}
-
-.sidebar__shields {
-  display: flex;
-  flex-wrap: wrap;
-
-  a {
-    margin-right: 6px;
-
-    img {
-      height: 20px;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
-  }
-}
-
-.sidebar__docs-version {
-  color: getColor(emperor);
-  border-top: 1px solid getColor(concrete);
-  margin-top: 12px;
-  padding-top: 12px;
-  font-size: 15px;
-
-  ul {
-    margin-top: 12px;
-
-    li {
-      margin-top: 6px;
-      list-style: none;
-    }
-  }
-}