@firecms/core 3.0.0-beta.11 → 3.0.0-beta.13

package/src/core/DefaultAppBar.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 
-import { Link as ReactLink, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { ErrorBoundary, FireCMSLogo } from "../components";
 import {
     Avatar,
+    BrightnessMediumIcon,
     cls,
     DarkModeIcon,
     IconButton,
@@ -17,15 +18,23 @@ import {
 import { useAuthController, useLargeLayout, useModeController, useNavigationController } from "../hooks";
 import { User } from "../types";
 import { useApp } from "../app/useApp";
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 
 export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
 
+    /**
+     * The content of the app bar, usually a title or logo. This includes a link to the home page.
+     */
     title?: React.ReactNode;
+
     /**
-     * A component that gets rendered on the upper side of the main toolbar
+     * A component that gets rendered on the upper side to the end of the main toolbar
      */
     endAdornment?: React.ReactNode;
 
+    /**
+     * A component that gets rendered on the upper side to the start of the main toolbar
+     */
     startAdornment?: React.ReactNode;
 
     dropDownActions?: React.ReactNode;
@@ -55,20 +64,26 @@ export const DefaultAppBar = function DefaultAppBar({
                                                         includeModeToggle = true,
                                                         className,
                                                         style,
-                                                        user: userProp
+                                                        user: userProp,
+                                                        logo: logoProp,
                                                     }: DefaultAppBarProps) {
 
     const {
         hasDrawer,
         drawerOpen,
-        logo
+        logo: appLogo
     } = useApp();
+
+    const logo = logoProp ?? appLogo;
+
     const navigation = useNavigationController();
 
+    const breadcrumbs = useBreadcrumbsController();
+
     const authController = useAuthController();
     const {
         mode,
-        toggleMode
+        setMode
     } = useModeController();
 
     const navigate = useNavigate();
@@ -108,8 +123,8 @@ export const DefaultAppBar = function DefaultAppBar({
                 className)}>
 
 
-            {navigation && <div className="mr-8 hidden lg:block">
-                <ReactLink
+            {navigation && <div className="mr-2 hidden lg:block">
+                <Link
                     className="visited:text-inherit visited:dark:text-inherit block"
                     to={navigation?.basePath ?? "/"}
                 >
@@ -127,7 +142,28 @@ export const DefaultAppBar = function DefaultAppBar({
                             </Typography>
                             : title}
                     </div>
-                </ReactLink>
+                </Link>
+            </div>}
+
+            {(breadcrumbs.breadcrumbs ?? []).length > 0 && <div className="mr-8 hidden lg:block">
+                <div className={"flex flex-row gap-2"}>
+                    {breadcrumbs.breadcrumbs.map((breadcrumb, index) => {
+                        return <React.Fragment key={breadcrumb.url + "_" + index}>
+                            <Typography variant={"caption"} color={"secondary"}>
+                                /
+                            </Typography>
+                            <Link
+                                key={index}
+                                className="visited:text-inherit visited:dark:text-inherit block"
+                                to={breadcrumb.url}
+                            >
+                                <Typography variant={"caption"} color={"secondary"}>
+                                    {breadcrumb.title}
+                                </Typography>
+                            </Link>
+                        </React.Fragment>;
+                    })}
+                </div>
             </div>}
 
             {startAdornment}
@@ -139,15 +175,21 @@ export const DefaultAppBar = function DefaultAppBar({
                     {endAdornment}
                 </ErrorBoundary>}
 
-            {includeModeToggle && <IconButton
-                color="inherit"
-                aria-label="Open drawer"
-                onClick={toggleMode}
-                size="large">
-                {mode === "dark"
-                    ? <DarkModeIcon/>
-                    : <LightModeIcon/>}
-            </IconButton>}
+            {includeModeToggle &&
+                <Menu
+                    trigger={<IconButton
+                        color="inherit"
+                        aria-label="Open drawer"
+                        size="large">
+                        {mode === "dark"
+                            ? <DarkModeIcon/>
+                            : <LightModeIcon/>}
+                    </IconButton>}>
+                    <MenuItem onClick={() => setMode("dark")}><DarkModeIcon size={"smallest"}/> Dark</MenuItem>
+                    <MenuItem onClick={() => setMode("light")}><LightModeIcon size={"smallest"}/> Light </MenuItem>
+                    <MenuItem onClick={() => setMode("system")}> <BrightnessMediumIcon
+                        size={"smallest"}/>System</MenuItem>
+                </Menu>}
 
             <Menu trigger={avatarComponent}>
                 {user && <div className={"px-4 py-2 mb-2"}>

package/src/core/DefaultDrawer.tsx

@@ -175,7 +175,7 @@ export function DrawerLogo({ logo }: {
                 {logo
                     ? <img src={logo}
                            alt="Logo"
-                           className={cls("max-w-full max-h-full transition-all",
+                           className={cls("max-w-full max-h-full transition-all object-contain",
                                drawerOpen ? "w-[96px] h-[96px]" : "w-[32px] h-[32px]")}/>
                     : <FireCMSLogo/>}