sidebar blur flxed

src/components/sidebar/Sidebar.css

@@ -1,33 +1,171 @@
-.sidebar {
+.sidebar-container {
-  scrollbar-width: thin;
+  position: fixed;
-  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 50;
+  isolation: isolate;
 }
 
-.sidebar::-webkit-scrollbar {
+.sidebar-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.75);
+  pointer-events: auto;
+  transition: opacity 0.3s ease;
+  z-index: 60;
+  will-change: opacity;
+}
+
+.sidebar-main {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 280px;
+  height: 100vh;
+  background-color: #0a0a0a;
+  transform: translateX(-100%);
+  transition: transform 0.3s ease;
+  pointer-events: auto;
+  z-index: 70;
+  display: flex;
+  flex-direction: column;
+  will-change: transform;
+}
+
+@media (max-width: 575px) {
+  .sidebar-main {
+    width: 260px;
+  }
+}
+
+.sidebar-main.sidebar-open {
+  transform: translateX(0);
+}
+
+.sidebar-content {
+  height: 100%;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  display: flex;
+  flex-direction: column;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+  -webkit-overflow-scrolling: touch;
+}
+
+.sidebar-content::-webkit-scrollbar {
   width: 5px;
 }
 
-.sidebar::-webkit-scrollbar-track {
+.sidebar-content::-webkit-scrollbar-track {
   background: transparent;
 }
 
-.sidebar::-webkit-scrollbar-thumb {
+.sidebar-content::-webkit-scrollbar-thumb {
   background-color: rgba(255, 255, 255, 0.2);
   border-radius: 20px;
 }
 
-body.sidebar-open {
+.sidebar-header {
-  overflow: hidden;
+  padding: 1.5rem;
-  padding-right: 5px; /* Prevent layout shift when scrollbar disappears */
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  height: 100%;
+  flex-shrink: 0;
-  position: fixed;
-  width: 100%;
 }
 
-/* Wrapper to maintain scroll position when sidebar is opened */
+.close-button {
-.sidebar-scroll-wrapper {
-  position: absolute;
   width: 100%;
-  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 0.5rem;
+  transition: background-color 0.2s ease;
+}
+
+.close-button:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+.quick-actions {
+  width: 100%;
+  padding: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  flex-shrink: 0;
+}
+
+@media (min-width: 1024px) {
+  .quick-actions {
+    display: none;
+  }
+}
+
+.quick-actions-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+}
+
+.quick-action-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  background-color: rgba(255, 255, 255, 0.05);
+  transition: background-color 0.2s ease;
+}
+
+.quick-action-item:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.language-switcher {
+  display: flex;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 0.25rem;
+}
+
+.lang-button {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.6);
+  transition: all 0.2s ease;
+}
+
+.lang-button:hover {
+  color: white;
+}
+
+.lang-button.active {
+  background-color: rgba(255, 255, 255, 0.15);
+  color: white;
+}
+
+.menu-items {
+  width: 100%;
+  padding: 0.5rem;
+  flex: 1;
   overflow-y: auto;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  border-radius: 0.5rem;
+  transition: all 0.2s ease;
+}
+
+.menu-item:hover {
+  color: white;
+  background-color: rgba(255, 255, 255, 0.05);
 } 

src/components/sidebar/Sidebar.jsx

@@ -23,19 +23,34 @@ const Sidebar = ({ isOpen, onClose }) => {
   const location = useLocation();
   const scrollPosition = useRef(0);
 
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!isOpen) {
+        scrollPosition.current = window.scrollY;
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [isOpen]);
+
   useEffect(() => {
     if (isOpen) {
-      scrollPosition.current = window.pageYOffset;
+      scrollPosition.current = window.scrollY;
-      document.body.classList.add('sidebar-open');
+      document.body.style.position = 'fixed';
       document.body.style.top = `-${scrollPosition.current}px`;
+      document.body.style.width = '100%';
     } else {
-      document.body.classList.remove('sidebar-open');
+      document.body.style.position = '';
       document.body.style.top = '';
+      document.body.style.width = '';
       window.scrollTo(0, scrollPosition.current);
     }
+
     return () => {
-      document.body.classList.remove('sidebar-open');
+      document.body.style.position = '';
       document.body.style.top = '';
+      document.body.style.width = '';
     };
   }, [isOpen]);
 
@@ -44,29 +59,25 @@ const Sidebar = ({ isOpen, onClose }) => {
   }, [location]);
 
   return (
-    <>
+    <div className="sidebar-container" aria-hidden={!isOpen}>
       {isOpen && (
         <div
-          className="fixed inset-0 transform transition-all duration-400 ease-in-out backdrop-blur-lg bg-black/50"
+          className="sidebar-overlay"
           onClick={onClose}
-          style={{ zIndex: 1000000 }}
         />
       )}
 
-      <div
+      <aside
-        className={`fixed h-[100dvh] w-[280px] max-[575px]:w-[260px] top-0 left-0 transform transition-transform duration-300 ease-in-out ${
+        className={`sidebar-main ${isOpen ? 'sidebar-open' : ''}`}
-          isOpen ? "translate-x-0" : "-translate-x-full"
+        role="dialog"
-        }`}
+        aria-modal="true"
-        style={{ zIndex: 1000200 }}
       >
-        <div
+        <div className="sidebar-content">
-          className="bg-[#0a0a0a] w-full h-full flex flex-col items-start overflow-y-auto sidebar"
-        >
           {/* Header */}
-          <div className="w-full p-6 border-b border-white/5">
+          <div className="sidebar-header">
             <button
               onClick={onClose}
-              className="w-full flex items-center justify-center gap-2 py-2.5 px-4 bg-white/10 hover:bg-white/15 rounded-lg transition-colors"
+              className="close-button"
             >
               <FaChevronLeft className="text-sm" />
               <span className="text-sm font-medium">Close Menu</span>
@@ -74,33 +85,29 @@ const Sidebar = ({ isOpen, onClose }) => {
           </div>
 
           {/* Quick Actions */}
-          <div className="w-full p-4 border-b border-white/5 lg:hidden">
+          <div className="quick-actions">
-            <div className="grid grid-cols-3 gap-2">
+            <div className="quick-actions-grid">
               <Link
                 to="/random"
-                className="flex flex-col items-center gap-2 p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors"
+                className="quick-action-item"
               >
                 <FontAwesomeIcon icon={faRandom} className="text-lg" />
                 <span className="text-xs font-medium">Random</span>
               </Link>
               <Link
                 to="/movie"
-                className="flex flex-col items-center gap-2 p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors"
+                className="quick-action-item"
               >
                 <FontAwesomeIcon icon={faFilm} className="text-lg" />
                 <span className="text-xs font-medium">Movie</span>
               </Link>
-              <div className="flex flex-col items-center gap-2 p-3 rounded-lg bg-white/5">
+              <div className="quick-action-item">
-                <div className="flex bg-white/10 rounded">
+                <div className="language-switcher">
-                  {["EN", "JP"].map((lang, index) => (
+                  {["EN", "JP"].map((lang) => (
                     <button
                       key={lang}
                       onClick={() => toggleLanguage(lang)}
-                      className={`px-2 py-1 text-xs font-medium transition-colors ${
+                      className={`lang-button ${language === lang ? 'active' : ''}`}
-                        language === lang
-                          ? "bg-white/15 text-white"
-                          : "text-white/60 hover:text-white"
-                      }`}
                     >
                       {lang}
                     </button>
@@ -112,21 +119,21 @@ const Sidebar = ({ isOpen, onClose }) => {
           </div>
 
           {/* Menu Items */}
-          <div className="w-full p-2">
+          <nav className="menu-items">
             {MENU_ITEMS.map((item, index) => (
               <Link
                 key={index}
                 to={item.path}
-                className="flex items-center gap-3 px-4 py-3 rounded-lg text-white/60 hover:text-white hover:bg-white/5 transition-colors"
+                className="menu-item"
               >
                 <FontAwesomeIcon icon={item.icon} className="text-lg w-5" />
                 <span className="font-medium">{item.name}</span>
               </Link>
             ))}
-          </div>
+          </nav>
         </div>
-      </div>
+      </aside>
-    </>
+    </div>
   );
 };
 

src/pages/contact/Contact.jsx

@@ -14,7 +14,7 @@ function Contact() {
         </p>
         <div className="flex flex-wrap gap-6">
           <a
-            href="https://t.me/zenime_discussion"
+            href="#"
             target="_blank"
             rel="noopener noreferrer"
             className="flex items-center gap-3 px-4 py-3 bg-white/5 hover:bg-white/10 rounded-lg transition-colors group"