muffin-admin 9.4.5 → 9.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muffin-admin",
-  "version": "9.4.5",
+  "version": "9.5.1",
   "description": "NPM package for https://github.com/klen/muffin-admin",
   "files": [
     "src",

package/src/MuffinAdmin.tsx

@@ -20,9 +20,14 @@ import { useEffect } from "react"
 import { ConfirmationProvider } from "./common"
 import { useMuffinAdminOpts } from "./hooks"
 import { buildProvider, muffinTranslations } from "./i18n"
+import { muffinDarkTheme, muffinLightTheme } from "./themes"
 import { buildAdmin, deepMerge, findBuilder, findIcon, setupAdmin } from "./utils"
 
-export function MuffinAdmin(props: AdminProps) {
+export function MuffinAdmin({
+  lightTheme = muffinLightTheme,
+  darkTheme = muffinDarkTheme,
+  ...props
+}: AdminProps) {
   const opts = useMuffinAdminOpts()
   const { resources = [], auth, adminProps, apiUrl, locales: backendLocales } = opts
 
@@ -57,8 +62,6 @@ export function MuffinAdmin(props: AdminProps) {
     store = localStorageStore(),
     ready,
     theme,
-    lightTheme,
-    darkTheme,
     defaultTheme,
     title = "React Admin",
   } = props

package/src/MuffinMenu.tsx

@@ -4,8 +4,9 @@ import Collapse from "@mui/material/Collapse"
 import ListItemButton from "@mui/material/ListItemButton"
 import ListItemIcon from "@mui/material/ListItemIcon"
 import ListItemText from "@mui/material/ListItemText"
+import { matchPath, useLocation } from "react-router-dom"
 
-import { Menu, MenuProps, useTranslate } from "react-admin"
+import { Menu, MenuProps, useBasename, useTranslate } from "react-admin"
 
 import find from "lodash/find"
 import groupBy from "lodash/groupBy"
@@ -43,11 +44,19 @@ function MenuGroup({ name, resources }: { name: string; resources: AdminResource
   const iconRes = find(resources, "icon")
   const Icon = iconRes ? findIcon(iconRes.icon) : null
   const translate = useTranslate()
-  const [groupOpen, setGroupOpen] = useState(false)
+  const basename = useBasename()
+  const { pathname } = useLocation()
+  const match = resources.some(
+    (resource) => !!matchPath({ path: `${basename}/${resource.name}/*` }, pathname)
+  )
+  const [groupOpen, setGroupOpen] = useState(match)
 
   return (
     <div>
-      <ListItemButton onClick={() => setGroupOpen(!groupOpen)}>
+      <ListItemButton
+        onClick={() => setGroupOpen(!groupOpen)}
+        sx={{ color: match ? "rgba(0, 0, 0, 0.87)" : "rgba(0, 0, 0, 0.6)" }}
+      >
         {Icon && (
           <ListItemIcon sx={{ minWidth: 40 }}>
             <Icon />

package/src/index.tsx

@@ -37,4 +37,4 @@ export async function initAdmin(prefix = "", containerId: string = "root") {
   )
 }
 
-export const VERSION = "9.4.5"
+export const VERSION = "9.5.1"

package/src/themes.ts

@@ -0,0 +1,35 @@
+import { defaultDarkTheme, defaultLightTheme } from "react-admin"
+
+export const muffinLightTheme: typeof defaultLightTheme = {
+  ...defaultLightTheme,
+  components: {
+    ...defaultLightTheme.components,
+    RaMenuItemLink: {
+      styleOverrides: {
+        root: {
+          "&.RaMenuItemLink-active": {
+            borderRadius: "4px",
+            backgroundColor: "#f0f0f0",
+          },
+        },
+      },
+    },
+  },
+}
+
+export const muffinDarkTheme: typeof defaultDarkTheme = {
+  ...defaultDarkTheme,
+  components: {
+    ...defaultDarkTheme.components,
+    RaMenuItemLink: {
+      styleOverrides: {
+        root: {
+          "&.RaMenuItemLink-active": {
+            borderRadius: "4px",
+            backgroundColor: "#424242",
+          },
+        },
+      },
+    },
+  },
+}