@firecms/core 3.0.0-beta.10 → 3.0.0-beta.12

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,6 +18,7 @@ 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> = {
 
@@ -65,10 +67,12 @@ export const DefaultAppBar = function DefaultAppBar({
     } = useApp();
     const navigation = useNavigationController();
 
+    const breadcrumbs = useBreadcrumbsController();
+
     const authController = useAuthController();
     const {
         mode,
-        toggleMode
+        setMode
     } = useModeController();
 
     const navigate = useNavigate();
@@ -77,19 +81,21 @@ export const DefaultAppBar = function DefaultAppBar({
 
     const user = userProp ?? authController.user;
 
-    let avatarComponent: JSX.Element;
-    if (user && user.photoURL) {
-        avatarComponent = <Avatar
-            src={user.photoURL}/>;
+    let avatarComponent: JSX.Element | null;
+
+    if (user) {
+        const initial = user?.displayName
+            ? user.displayName[0].toUpperCase()
+            : (user?.email ? user.email[0].toUpperCase() : "A");
+        avatarComponent = <Avatar src={user.photoURL ?? undefined}>
+            {initial}
+        </Avatar>;
     } else if (user === undefined || authController.initialLoading) {
         avatarComponent = <div className={"p-1 flex justify-center"}>
             <Skeleton className={"w-10 h-10 rounded-full"}/>
         </div>;
     } else {
-        const initial = user?.displayName
-            ? user.displayName[0].toUpperCase()
-            : (user?.email ? user.email[0].toUpperCase() : "A");
-        avatarComponent = <Avatar>{initial}</Avatar>;
+        avatarComponent = null;
     }
 
     return (
@@ -106,9 +112,9 @@ export const DefaultAppBar = function DefaultAppBar({
                 className)}>
 
 
-            {navigation && <div className="mr-8 hidden lg:block">
-                <ReactLink
-                    className="visited:text-inherit visited:dark:text-inherit"
+            {navigation && <div className="mr-2 hidden lg:block">
+                <Link
+                    className="visited:text-inherit visited:dark:text-inherit block"
                     to={navigation?.basePath ?? "/"}
                 >
                     <div className={"flex flex-row gap-4"}>
@@ -120,13 +126,33 @@ export const DefaultAppBar = function DefaultAppBar({
 
                         {typeof title === "string"
                             ? <Typography variant="subtitle1"
-                                          noWrap
-                                          className={cls("transition-all", drawerOpen ? "ml-2" : "")}>
+                                          noWrap>
                                 {title}
                             </Typography>
                             : title}
                     </div>
-                </ReactLink>
+                </Link>
+            </div>}
+
+            {breadcrumbs.breadcrumbs && <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}
@@ -138,15 +164,20 @@ 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

@@ -79,13 +79,13 @@ export function DefaultDrawer({
                 <DrawerLogo logo={logo}/>
 
                 <div className={"mt-4 flex-grow overflow-scroll no-scrollbar"}
-                style={{
-                    maskImage: "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)",
-                }}>
+                     style={{
+                         maskImage: "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)",
+                     }}>
 
                     {groupsWithoutAdmin.map((group) => (
                         <div
-                            className={"bg-gray-50 dark:bg-gray-800 dark:bg-opacity-30 my-4 rounded-lg ml-4"}
+                            className={"bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-3 mr-1"}
                             key={`drawer_group_${group}`}>
                             {buildGroupHeader(group)}
                             {Object.values(navigationEntries)
@@ -93,7 +93,8 @@ export function DefaultDrawer({
                                 .map((view, index) =>
                                     <DrawerNavigationItem
                                         key={`navigation_${index}`}
-                                        icon={<IconForView collectionOrView={view.collection ?? view.view} size={"small"}/>}
+                                        icon={<IconForView collectionOrView={view.collection ?? view.view}
+                                                           size={"small"}/>}
                                         tooltipsOpen={tooltipsOpen}
                                         adminMenuOpen={adminMenuOpen}
                                         drawerOpen={drawerOpen}
@@ -112,7 +113,7 @@ export function DefaultDrawer({
                     trigger={
                         <IconButton
                             shape={"square"}
-                            className={"m-4 text-gray-900 dark:text-white w-fit"}>
+                            className={"m-4 text-surface-900 dark:text-white w-fit"}>
                             <Tooltip title={"Admin"}
                                      open={tooltipsOpen}
                                      side={"right"} sideOffset={28}>
@@ -163,18 +164,19 @@ export function DrawerLogo({ logo }: {
             transition: "padding 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
             padding: drawerOpen ? "32px 144px 0px 24px" : "72px 12px 0px 12px"
         }}
-        className={cls("cursor-pointer ml-4")}>
+        className={cls("cursor-pointer rounded ml-3 mr-1")}>
 
         <Tooltip title={"Home"}
                  sideOffset={20}
                  side="right">
             <Link
+                className={"block"}
                 to={navigation.basePath}>
                 {logo
                     ? <img src={logo}
                            alt="Logo"
-                           className={cls("max-w-full max-h-full",
-                               drawerOpen ?? "w-[112px] h-[112px]")}/>
+                           className={cls("max-w-full max-h-full transition-all object-contain",
+                               drawerOpen ? "w-[96px] h-[96px]" : "w-[32px] h-[32px]")}/>
                     : <FireCMSLogo/>}
 
             </Link>

package/src/core/DrawerNavigationItem.tsx

@@ -22,7 +22,7 @@ export function DrawerNavigationItem({
 }) {
 
     const iconWrap = <div
-        className={"text-gray-600 dark:text-gray-500"}>
+        className={"text-text-secondary dark:text-text-secondary-dark"}>
         {icon}
     </div>;
 
@@ -34,13 +34,13 @@ export function DrawerNavigationItem({
                 transition: drawerOpen ? "width 150ms ease-in" : undefined
             }}
             className={({ isActive }: any) => cls("rounded-lg truncate",
-                "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-slate-800 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-white",
+                "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white",
                 "flex flex-row items-center mr-8",
                 // "transition-all ease-in-out delay-100 duration-300",
                 // drawerOpen ? "w-full" : "w-18",
                 drawerOpen ? "pl-4 h-12" : "pl-4 h-11",
-                "font-medium text-sm",
-                isActive ? "bg-slate-200 bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-50" : ""
+                "font-semibold text-xs",
+                isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : ""
             )}
             to={url}
         >