Split brightness overlay

components/layout/index.tsx

@@ -1,6 +1,8 @@
 import React, { ReactNode, useContext } from 'react';
+import { useSelector } from 'react-redux';
 import { UI } from '../../constants';
 import { ScreenContext } from '../../contexts/screen';
+import { IState } from '../../state/reducers';
 import { Header } from '../navigation/Header';
 import { SideMenu } from '../navigation/SideMenu';
 
@@ -10,6 +12,9 @@ interface Props {
 
 export default function Layout({ children }: Props) {
   const { isTablet } = useContext(ScreenContext);
+  const { sideMenuSplit, sideMenuExpanded } = useSelector(
+    (state: IState) => state.navigation,
+  );
 
   return (
     <div
@@ -28,8 +33,12 @@ export default function Layout({ children }: Props) {
         <div
           style={{
             marginLeft: `${isTablet ? UI.SIDE_MENU_SIDE_BAR_WIDTH_PX : 0}px`,
+            filter:
+              !sideMenuSplit && sideMenuExpanded
+                ? 'brightness(0.9)'
+                : 'brightness(1)',
           }}
-          className="w-full py-6 overflow-y-auto bg-alt"
+          className="w-full py-6 overflow-y-auto duration-300 bg-alt"
         >
           {children}
         </div>

components/navigation/SideMenuInner.tsx

@@ -18,6 +18,14 @@ export function SideMenuInner() {
   const dispatch = useDispatch();
   const router = useRouter();
 
+  const itemIsActive = (href: string) => {
+    return href === '/'
+      ? // Location is at home
+        router.asPath === '/'
+      : // All other pages
+        new RegExp(`^${href}`).test(router.pathname);
+  };
+
   return (
     <div className="flex flex-col flex-grow h-full">
       <div className="flex flex-col flex-grow h-full duration-300 mobile:children:last:border-b-0">
@@ -25,7 +33,7 @@ export function SideMenuInner() {
           <SideMenuRow
             item={item}
             key={item.label}
-            isActive={item.href === router.asPath}
+            isActive={itemIsActive(item.href)}
           />
         ))}
       </div>

pages/_app.tsx

@@ -25,6 +25,12 @@ function App({ Component, pageProps }: AppProps) {
   const handleLocationChange = url => {
     // Break out of split view
     const split = !NAVIGATION.OVERLAY_PAGE_REGEX.test(url);
+
+    console.log(
+      '_app ➡️ NAVIGATION.OVERLAY_PAGE_REGEX.test(url);:',
+      NAVIGATION.OVERLAY_PAGE_REGEX.test(url),
+    );
+
     store.dispatch(setSideMenuSplit(split));
     store.dispatch(collapseSideMenu());
   };
@@ -57,6 +63,7 @@ function App({ Component, pageProps }: AppProps) {
               name="viewport"
               content="width=device-width, initial-scale=1, maximum-scale=1"
             ></meta>
+            s
           </Head>
 
           <Layout>