From 26ac430d7e1308b81a9fe4cccfb5df859f5e52de Mon Sep 17 00:00:00 2001 From: Neshura Date: Mon, 19 Dec 2022 21:36:41 +0100 Subject: [PATCH] Added blur to sidebar for transparent background colors --- components/styles/navbar/mobile.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/styles/navbar/mobile.tsx b/components/styles/navbar/mobile.tsx index 19567e7..73059b0 100644 --- a/components/styles/navbar/mobile.tsx +++ b/components/styles/navbar/mobile.tsx @@ -54,12 +54,13 @@ export const NavSideMenu = styled.div ` } return ret; }}; + backdrop-filter: ${props => props.active ? "blur(5px)" : ""}; overflow-x: hidden; - transition-property: max-width, max-height, border-right, background-color; + transition-property: max-width, max-height, border-right, background-color, backdrop-filter; transition-timing-function: ease-in-out; - transition-duration: 0.15s, 0s, 0s, 0s; - transition-delay: ${props => props.active ? "0s, 0s, 0s, 0s" : "0s, 0.15s, 0.15s, 0.15s"}; + transition-duration: 0.15s, 0s; + transition-delay: ${props => props.active ? "0s" : "0s, 0.15s"}; ` export const NavSideMenuPanel = styled.div `