Better blur effect in sidebar

components/system/StartMenu/Sidebar/StyledSidebar.ts

@@ -14,7 +14,6 @@ const StyledSidebar = styled.nav`
   z-index: 1;
 
   &:hover:not(&.collapsed) {
-    backdrop-filter: ${({ theme }) => `blur(${theme.sizes.taskbar.panelBlur})`};
     background-color: hsl(0 0% 10% / 95%);
     box-shadow: 8px 0 5px -5px hsl(0 0% 10% / 50%);
     transition:
@@ -26,6 +25,18 @@ const StyledSidebar = styled.nav`
     @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
       background-color: hsl(0 0% 10% / 75%);
     }
+
+    &::before {
+      backdrop-filter: ${({ theme }) =>
+        `blur(${theme.sizes.taskbar.panelBlur})`};
+      background-color: hsl(0 0% 10% / 50%);
+      content: "";
+      height: 100%;
+      margin-top: -4px;
+      position: absolute;
+      width: 100%;
+      z-index: -100000;
+    }
   }
 
   &.collapsed {

components/system/StartMenu/Sidebar/index.tsx

@@ -42,7 +42,10 @@ const Sidebar: FC<SidebarProps> = ({ height }) => {
   const expandTimer = useRef(0);
   const sidebarRef = useRef<HTMLElement>(null);
   const clearTimer = (): void => {
-    if (expandTimer.current) clearTimeout(expandTimer.current);
+    if (expandTimer.current) {
+      clearTimeout(expandTimer.current);
+      expandTimer.current = 0;
+    }
   };
   const topButtons: SidebarButtons = useMemo(
     () => [

components/system/StartMenu/StyledStartMenu.ts

@@ -17,6 +17,8 @@ const StyledStartMenu = styled(motion.nav)<StyledStartMenuProps>`
   ${({ theme }) =>
     TaskbarPanel(theme.sizes.startMenu.maxHeight, theme.sizes.startMenu.size)}
 
+  backdrop-filter: ${({ theme }) => `blur(${theme.sizes.taskbar.panelBlur})`};
+
   ${StyledFileManager} {
     ${ScrollBars(THIN_SCROLLBAR_WIDTH, -2, -1)};
     margin-top: 0;

components/system/StartMenu/index.tsx

@@ -5,7 +5,6 @@ import FileManager from "components/system/Files/FileManager";
 import Sidebar from "components/system/StartMenu/Sidebar";
 import StyledStartMenu from "components/system/StartMenu/StyledStartMenu";
 import { updateInputValueOnReactElement } from "components/system/Taskbar/Search/functions";
-import StyledBackground from "components/system/Taskbar/StyledBackground";
 import {
   SEARCH_BUTTON_TITLE,
   START_BUTTON_TITLE,
@@ -105,7 +104,6 @@ const StartMenu: FC<StartMenuProps> = ({ toggleStartMenu }) => {
       {...startMenuTransition}
       {...FOCUSABLE_ELEMENT}
     >
-      <StyledBackground $height={height} />
       <Sidebar height={height} />
       <FileManager
         url={START_MENU_PATH}

components/system/Taskbar/StyledBackground.ts

@@ -1,16 +0,0 @@
-import styled from "styled-components";
-
-type StyledBackgroundProps = {
-  $height?: string;
-};
-
-const StyledBackground = styled.span<StyledBackgroundProps>`
-  backdrop-filter: ${({ theme }) => `blur(${theme.sizes.taskbar.panelBlur})`};
-  height: ${({ $height }) => $height};
-  inset: 0;
-  position: absolute;
-  width: 100%;
-  z-index: -1;
-`;
-
-export default StyledBackground;