@firecms/core 3.0.0-canary.4 → 3.0.0-canary.40

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -0,0 +1,45 @@
+import { ArrowForwardIcon, cardClickableMixin, cardMixin, cn, focusedMixin, Typography, } from "@firecms/ui";
+
+import { Link as ReactLink } from "react-router-dom";
+
+export type SmallNavigationCardProps = {
+    name: string,
+    url: string;
+    icon: React.ReactElement;
+};
+
+export function SmallNavigationCard({
+                                 name,
+                                 url,
+                                 icon,
+                             }: SmallNavigationCardProps) {
+
+    return (
+        <>
+
+            <ReactLink
+                tabIndex={0}
+                className={cn(cardMixin,
+                    cardClickableMixin,
+                    focusedMixin,
+                    "cursor-pointer flex flex-row items-center px-4 py-2 text-inherit dark:text-inherit visited:text-inherit visited:dark:text-inherit hover:text-inherit hover:dark:text-inherit ")}
+                to={url}
+            >
+
+                <div className="flex flex-row items-center flex-grow gap-2 ">
+                    {icon}
+
+                    <Typography gutterBottom variant="h5"
+                                component="h2"
+                                className="mb-0 ml-4">
+                        {name}
+                    </Typography>
+                </div>
+
+                <div className={"p-4"}>
+                    <ArrowForwardIcon color="primary"/>
+                </div>
+            </ReactLink>
+
+        </>);
+}

package/src/components/HomePage/index.tsx

@@ -1,3 +1,5 @@
 export * from "./DefaultHomePage";
-export * from "./NavigationCollectionCard";
+export * from "./NavigationCardBinding";
 export * from "./NavigationGroup";
+export * from "./NavigationCard";
+export * from "./SmallNavigationCard";

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -17,7 +17,7 @@ import {
 import { ErrorView } from "../ErrorView";
 import { AddIcon, Button, DialogActions, Typography } from "@firecms/ui";
 import { canCreateEntity, fullPathToCollectionSegments, resolveCollection } from "../../util";
-import { useSelectionController } from "../EntityCollectionView/EntityCollectionView";
+import { useSelectionController } from "../EntityCollectionView/useSelectionController";
 import { useColumnIds, useTableSearchHelper } from "../common";
 import { useSideDialogContext } from "../../core";
 import { useAnalyticsController } from "../../hooks/useAnalyticsController";
@@ -109,7 +109,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
 
     const fullPath = navigation.resolveAliasesFrom(pathInput);
 
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(collection);
 
     const [entitiesDisplayedFirst, setEntitiesDisplayedFirst] = useState<Entity<any>[]>([]);
 
@@ -349,7 +349,7 @@ function ReferenceDialogActions({
             onNewClick();
         }
         : undefined;
-    const addButton = canCreateEntity(collection, authController, fullPathToCollectionSegments(path), null) &&
+    const addButton = canCreateEntity(collection, authController, path, null) &&
         onClick && (largeLayout
             ? <Button
                 onClick={onClick}
@@ -360,7 +360,6 @@ function ReferenceDialogActions({
             </Button>
             : <Button
                 onClick={onClick}
-                size="medium"
                 variant="outlined"
                 color="primary"
             >

package/src/components/ReferenceWidget.tsx

@@ -50,11 +50,11 @@ export function ReferenceWidget<M extends Record<string, any>>({
 
     const collection: EntityCollection | undefined = useMemo(() => {
         return navigationController.getCollection(path);
-    }, [path, navigationController]);
+    }, [path, navigationController.getCollection]);
 
-    if (!collection) {
-        throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
-    }
+    // if (!collection) {
+    //     throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
+    // }
 
     const onSingleEntitySelected = useCallback((entity: Entity<M> | null) => {
         if (disabled)

package/src/components/SelectableTable/filters/DateTimeFilterField.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { VirtualTableWhereFilterOp } from "../../VirtualTable";
-import { DateTimeField, Select, SelectItem } from "@firecms/ui";
+import { Checkbox, DateTimeField, Label, Select, SelectItem } from "@firecms/ui";
 import { useCustomizationController } from "../../../hooks";
 
 interface DateTimeFilterFieldProps {
@@ -43,10 +43,10 @@ export function DateTimeFilterField({
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
-    const [internalValue, setInternalValue] = useState<Date | undefined>(fieldValue);
+    const [internalValue, setInternalValue] = useState<Date | null | undefined>(fieldValue);
 
-    function updateFilter(op: VirtualTableWhereFilterOp, val: Date | undefined) {
-        let newValue: Date | undefined = val;
+    function updateFilter(op: VirtualTableWhereFilterOp, val: Date | undefined | null) {
+        let newValue: Date | null | undefined = val;
         const prevOpIsArray = multipleSelectOperations.includes(operation);
         const newOpIsArray = multipleSelectOperations.includes(op);
         if (prevOpIsArray !== newOpIsArray) {
@@ -73,7 +73,7 @@ export function DateTimeFilterField({
 
     return (
 
-        <div className="flex w-[440px] items-center">
+        <div className="flex w-[440px]">
             <div className="w-[80px]">
                 <Select value={operation}
                         onValueChange={(value) => {
@@ -88,19 +88,34 @@ export function DateTimeFilterField({
                 </Select>
             </div>
 
-            <div className="flex-grow ml-2">
+            <div className="flex-grow ml-2 flex flex-col gap-2">
 
                 <DateTimeField
                     mode={mode}
                     size={"medium"}
                     locale={locale}
-                    value={internalValue}
-                    onChange={(dateValue: Date | null) => {
+                    value={internalValue ?? undefined}
+                    onChange={(dateValue: Date | undefined) => {
                         updateFilter(operation, dateValue === null ? undefined : dateValue);
                     }}
                     clearable={true}
                 />
 
+                <Label
+                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
+                    htmlFor="null-filter"
+                >
+                    <Checkbox id="null-filter"
+                              checked={internalValue === null}
+                              size={"small"}
+                              onCheckedChange={(checked) => {
+                                  if (internalValue !== null)
+                                      updateFilter(operation, null);
+                                  else updateFilter(operation, undefined);
+                              }}/>
+                    Filter for null values
+                </Label>
+
             </div>
 
         </div>

package/src/components/SelectableTable/filters/ReferenceFilterField.tsx

@@ -4,7 +4,7 @@ import { Entity, EntityCollection, EntityReference } from "../../../types";
 import { ReferencePreview } from "../../../preview";
 import { getReferenceFrom } from "../../../util";
 import { useNavigationController, useReferenceDialog } from "../../../hooks";
-import { Button, Select, SelectItem } from "@firecms/ui";
+import { Button, Checkbox, Label, Select, SelectItem } from "@firecms/ui";
 
 interface ReferenceFilterFieldProps {
     name: string,
@@ -48,33 +48,31 @@ export function ReferenceFilterField({
         ? ["array-contains"]
         : ["==", "!=", ">", "<", ">=", "<="];
 
-    const [onHover, setOnHover] = React.useState(false);
-
     isArray
         ? possibleOperations.push("array-contains-any")
         : possibleOperations.push("in", "not-in");
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
-    const [internalValue, setInternalValue] = useState<EntityReference | EntityReference[] | undefined>(fieldValue);
+    const [internalValue, setInternalValue] = useState<EntityReference | EntityReference[] | undefined | null>(fieldValue);
 
     const selectedEntityIds = internalValue
         ? (Array.isArray(internalValue) ? internalValue.map((ref) => {
-            if (!(ref.isEntityReference && ref.isEntityReference())) {
+            if (!(ref?.isEntityReference && ref?.isEntityReference())) {
                 return null;
             }
             return ref.id;
         }).filter(Boolean) as string[] : [internalValue.id])
         : [];
 
-    function updateFilter(op: VirtualTableWhereFilterOp, val?: EntityReference | EntityReference[]) {
+    function updateFilter(op: VirtualTableWhereFilterOp, val?: EntityReference | EntityReference[] | null) {
 
         const prevOpIsArray = multipleSelectOperations.includes(operation);
         const newOpIsArray = multipleSelectOperations.includes(op);
         let newValue = val;
         if (prevOpIsArray !== newOpIsArray) {
             // @ts-ignore
-            newValue = newOpIsArray ? (newValue.isEntityReference && newValue.isEntityReference() ? [newValue] : []) : undefined
+            newValue = newOpIsArray ? (newValue?.isEntityReference && newValue?.isEntityReference() ? [newValue] : []) : undefined
         }
 
         setOperation(op);
@@ -129,28 +127,22 @@ export function ReferenceFilterField({
 
     const buildEntry = (reference: EntityReference) => {
         return (
-            <div
-                className="mb-0.5"
-                onMouseEnter={() => setOnHover(true)}
-                onMouseMove={() => setOnHover(true)}
-                onMouseLeave={() => setOnHover(false)}>
-                <ReferencePreview
-                    disabled={!path}
-                    previewProperties={previewProperties}
-                    size={"medium"}
-                    onClick={doOpenDialog}
-                    reference={reference}
-                    onHover={onHover}
-                    allowEntityNavigation={false}
-                />
-            </div>
+            <ReferencePreview
+                disabled={!path}
+                previewProperties={previewProperties}
+                size={"medium"}
+                onClick={doOpenDialog}
+                reference={reference}
+                hover={true}
+                allowEntityNavigation={false}
+            />
         );
     };
 
     return (
 
         <div className="flex w-[440px] flex-row">
-            <div className="w-[120px]">
+            <div className="w-[140px]">
                 <Select value={operation}
                         onValueChange={(value) => {
                             updateFilter(value as VirtualTableWhereFilterOp, internalValue);
@@ -164,21 +156,40 @@ export function ReferenceFilterField({
                 </Select>
             </div>
 
-            <div className="flex-grow ml-2 h-full">
+            <div className="flex-grow ml-2 h-full gap-2 flex flex-col">
 
                 {internalValue && Array.isArray(internalValue) && <div>
                     {internalValue.map((ref, index) => buildEntry(ref))}
                 </div>}
+
                 {internalValue && !Array.isArray(internalValue) && <div>
                     {buildEntry(internalValue)}
                 </div>}
+
                 {(!internalValue || (Array.isArray(internalValue) && internalValue.length === 0)) &&
                     <Button onClick={doOpenDialog}
                             variant={"outlined"}
+                            size={"large"}
                             className="h-full w-full">
                         {multiple ? "Select references" : "Select reference"}
                     </Button>
                 }
+
+                {!isArray && <Label
+                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
+                    htmlFor="null-filter"
+                >
+                    <Checkbox id="null-filter"
+                              checked={internalValue === null}
+                              size={"small"}
+                              onCheckedChange={(checked) => {
+                                  if (internalValue !== null)
+                                      updateFilter(operation, null);
+                                  else updateFilter(operation, undefined);
+                              }}/>
+                    Filter for null values
+                </Label>}
+
             </div>
 
         </div>

package/src/components/SelectableTable/filters/StringNumberFilterField.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { EnumValuesChip } from "../../../preview";
 import { VirtualTableWhereFilterOp } from "../../VirtualTable";
-import { ClearIcon, IconButton, Select, SelectItem, TextField } from "@firecms/ui";
+import { Checkbox, ClearIcon, IconButton, Label, Select, SelectItem, TextField } from "@firecms/ui";
 import { EnumValueConfig } from "../../../types";
 
 interface StringNumberFilterFieldProps {
@@ -50,15 +50,15 @@ export function StringNumberFilterField({
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
-    const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | undefined>(fieldValue);
+    const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | null | undefined>(fieldValue);
 
-    function updateFilter(op: VirtualTableWhereFilterOp, val: string | number | string[] | number[] | undefined) {
+    function updateFilter(op: VirtualTableWhereFilterOp, val: string | number | string[] | number[] | null | undefined) {
         let newValue = val;
         const prevOpIsArray = multipleSelectOperations.includes(operation);
         const newOpIsArray = multipleSelectOperations.includes(op);
         if (prevOpIsArray !== newOpIsArray) {
             // @ts-ignore
-            newValue = newOpIsArray ? (typeof val === "string" || typeof val === "number" ? [val] : []) : "";
+            newValue = newOpIsArray ? (typeof val === "string" || typeof val === "number" ? [val] : []) : undefined;
         }
 
         if (typeof newValue === "number" && isNaN(newValue))
@@ -84,7 +84,7 @@ export function StringNumberFilterField({
     const multiple = multipleSelectOperations.includes(operation);
     return (
 
-        <div className="flex w-[440px] items-center">
+        <div className="flex w-[440px]">
             <div className={"w-[80px]"}>
                 <Select value={operation}
                         position={"item-aligned"}
@@ -100,11 +100,11 @@ export function StringNumberFilterField({
                 </Select>
             </div>
 
-            <div className="flex-grow ml-2">
+            <div className="flex-grow ml-2 flex flex-col gap-2">
 
                 {!enumValues && <TextField
                     type={dataType === "number" ? "number" : undefined}
-                    value={internalValue !== undefined ? String(internalValue) : ""}
+                    value={internalValue !== undefined && internalValue != null ? String(internalValue) : ""}
                     onChange={(evt) => {
                         const val = dataType === "number"
                             ? parseFloat(evt.target.value)
@@ -118,26 +118,31 @@ export function StringNumberFilterField({
                 />}
 
                 {enumValues &&
-
                     <Select
                         position={"item-aligned"}
                         value={internalValue !== undefined
                             ? (Array.isArray(internalValue) ? internalValue.map(e => String(e)) : String(internalValue))
                             : isArray ? [] : ""}
                         onValueChange={(value) => {
-                            updateFilter(operation, dataType === "number" ? parseInt(value as string) : value as string)
+                            if (value !== "")
+                                updateFilter(operation, dataType === "number" ? parseInt(value as string) : value as string)
                         }}
                         multiple={multiple}
                         endAdornment={internalValue && <IconButton
-                            className="absolute right-3 top-2"
+                            className="absolute right-2 top-3"
                             onClick={(e) => updateFilter(operation, undefined)}>
                             <ClearIcon/>
                         </IconButton>}
-                        renderValue={(enumKey) => <EnumValuesChip
-                            key={`select_value_${name}_${enumKey}`}
-                            enumKey={enumKey}
-                            enumValues={enumValues}
-                            size={"small"}/>}>
+                        renderValue={(enumKey) => {
+                            if (enumKey === null)
+                                return "Filter for null values";
+
+                            return <EnumValuesChip
+                                key={`select_value_${name}_${enumKey}`}
+                                enumKey={enumKey}
+                                enumValues={enumValues}
+                                size={"small"}/>;
+                        }}>
                         {enumValues.map((enumConfig) => (
                             <SelectItem key={`select_value_${name}_${enumConfig.id}`}
                                         value={String(enumConfig.id)}>
@@ -150,6 +155,21 @@ export function StringNumberFilterField({
                     </Select>
                 }
 
+                {!isArray && <Label
+                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
+                    htmlFor="null-filter"
+                >
+                    <Checkbox id="null-filter"
+                              checked={internalValue === null}
+                              size={"small"}
+                              onCheckedChange={(checked) => {
+                                  if (internalValue !== null)
+                                      updateFilter(operation, null);
+                                  else updateFilter(operation, undefined);
+                              }}/>
+                    Filter for null values
+                </Label>}
+
             </div>
 
         </div>

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -252,7 +252,7 @@ export type VirtualTableFilterValues<Key extends string> = Partial<Record<Key, [
 
 /**
  * Filter conditions in a `Query.where()` clause are specified using the
- * strings '<', '<=', '==', '>=', '>', 'array-contains', 'in', 'not-in', and 'array-contains-any'.
+ * strings `<`, `<=`, `==`, `>=`, `>`, `array-contains`, `in`, and `array-contains-any`.
  * @see Table
  * @group Models
  */

package/src/components/VirtualTable/fields/VirtualTableDateField.tsx

@@ -25,7 +25,7 @@ export function VirtualTableDateField(props: {
     return (
         <DateTimeField
             value={internalValue ?? undefined}
-            onChange={(dateValue) => updateValue(dateValue)}
+            onChange={(dateValue) => updateValue(dateValue ?? null)}
             size={"medium"}
             invisible={true}
             className={"w-full h-full"}

package/src/components/common/useDataSourceEntityCollectionTableController.tsx

@@ -65,7 +65,7 @@ export function useDataSourceEntityCollectionTableController<M extends Record<st
 
     const [popupCell, setPopupCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
     const navigation = useNavigationController();
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(collection);
     const resolvedPath = useMemo(() => navigation.resolveAliasesFrom(fullPath), [fullPath, navigation.resolveAliasesFrom]);
 
     const forceFilter = forceFilterFromProps ?? forceFilterFromCollection;

package/src/components/index.tsx

@@ -1,8 +1,8 @@
 export type { ErrorViewProps } from "./ErrorView";
 export { ErrorView } from "./ErrorView";
 
-export type { EntityPreviewProps } from "./EntityPreview";
-export { EntityPreview } from "./EntityPreview";
+export type { EntityViewProps } from "./EntityView";
+export { EntityView } from "./EntityView";
 
 export type { ReferenceSelectionInnerProps } from "./ReferenceTable/ReferenceSelectionTable";
 export { ReferenceSelectionTable } from "./ReferenceTable/ReferenceSelectionTable";
@@ -15,6 +15,7 @@ export * from "./HomePage";
 export * from "./SelectableTable/SelectableTable";
 export * from "./EntityCollectionView/EntityCollectionView";
 export * from "./EntityCollectionView/EntityCollectionViewActions";
+export * from "./EntityCollectionView/useSelectionController";
 
 export * from "./PropertyConfigBadge";
 
@@ -31,5 +32,5 @@ export * from "./FireCMSAppBar";
 
 export * from "./ArrayContainer";
 export * from "./ReferenceWidget";
-export * from "./LabelWithIcon";
 export * from "./SearchIconsView";
+export * from "./FieldCaption";

package/src/contexts/AuthControllerContext.tsx

@@ -1,4 +1,4 @@
 import React from "react";
 import { AuthController } from "../types";
 
-export const AuthControllerContext = React.createContext<AuthController>({} as AuthController);
+export const AuthControllerContext = React.createContext<AuthController<any, any>>({} as AuthController<any, any>);

package/src/core/Drawer.tsx

@@ -2,10 +2,10 @@ import React, { useCallback } from "react";
 
 import { useLargeLayout, useNavigationController } from "../hooks";
 
-import { NavLink } from "react-router-dom";
+import { NavLink, useNavigate } from "react-router-dom";
 import { CMSAnalyticsEvent, TopNavigationEntry, TopNavigationResult } from "../types";
 import { IconForView } from "../util";
-import { cn, Tooltip, Typography } from "@firecms/ui";
+import { cn, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip, Typography } from "@firecms/ui";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 
 /**
@@ -33,6 +33,9 @@ export function Drawer({
 
     const tooltipsOpen = hovered && !drawerOpen;
     const largeLayout = useLargeLayout();
+    const navigate = useNavigate();
+
+    const [adminMenuOpen, setAdminMenuOpen] = React.useState(false);
 
     if (!navigation.topLevelNavigation)
         throw Error("Navigation not ready in Drawer");
@@ -42,7 +45,8 @@ export function Drawer({
         groups
     }: TopNavigationResult = navigation.topLevelNavigation;
 
-    const ungroupedNavigationViews = Object.values(navigationEntries).filter(e => !e.group);
+    const adminViews = navigationEntries.filter(e => e.type === "admin") ?? [];
+    const groupsWithoutAdmin = groups.filter(g => g !== "Admin");
 
     const buildGroupHeader = useCallback((group?: string) => {
         if (!drawerOpen) return <div className="h-12 w-full"/>;
@@ -67,41 +71,64 @@ export function Drawer({
     };
 
     return (
-        <div className={"flex-grow overflow-scroll no-scrollbar"}>
-
-            {groups.map((group) => (
-                <React.Fragment
-                    key={`drawer_group_${group}`}>
-                    {buildGroupHeader(group)}
-                    {Object.values(navigationEntries)
-                        .filter(e => e.group === group)
-                        .map((view, index) =>
-                            <DrawerNavigationItem
-                                key={`navigation_${index}`}
-                                icon={<IconForView collectionOrView={view.collection ?? view.view}/>}
-                                tooltipsOpen={tooltipsOpen}
-                                drawerOpen={drawerOpen}
-                                onClick={() => onClick(view)}
-                                url={view.url}
-                                name={view.name}/>)}
-                </React.Fragment>
-            ))}
-
-            {ungroupedNavigationViews.length > 0 && buildGroupHeader()}
-
-            {ungroupedNavigationViews.map((view, index) => {
-
-                return <DrawerNavigationItem
-                    key={`navigation_${index}`}
-                    icon={<IconForView collectionOrView={view.collection ?? view.view}/>}
-                    tooltipsOpen={tooltipsOpen}
-                    onClick={() => onClick(view)}
-                    drawerOpen={drawerOpen}
-                    url={view.url}
-                    name={view.name}/>;
-            })}
-
-        </div>
+        <>
+
+            <div className={"flex-grow overflow-scroll no-scrollbar"}>
+
+                {groupsWithoutAdmin.map((group) => (
+                    <React.Fragment
+                        key={`drawer_group_${group}`}>
+                        {buildGroupHeader(group)}
+                        {Object.values(navigationEntries)
+                            .filter(e => e.group === group)
+                            .map((view, index) =>
+                                <DrawerNavigationItem
+                                    key={`navigation_${index}`}
+                                    icon={<IconForView collectionOrView={view.collection ?? view.view}/>}
+                                    tooltipsOpen={tooltipsOpen}
+                                    drawerOpen={drawerOpen}
+                                    onClick={() => onClick(view)}
+                                    url={view.url}
+                                    name={view.name}/>)}
+                    </React.Fragment>
+                ))}
+
+            </div>
+
+            {adminViews.length > 0 && <Menu
+                open={adminMenuOpen}
+                onOpenChange={setAdminMenuOpen}
+                trigger={
+                    <IconButton
+                        shape={"square"}
+                        className={"m-4 text-gray-900 dark:text-white w-fit"}>
+                        <Tooltip title={"Admin"}
+                                 open={tooltipsOpen}
+                                 side={"right"} sideOffset={28}>
+                            <MoreVertIcon/>
+                        </Tooltip>
+                        {drawerOpen && <div
+                            className={cn(
+                                drawerOpen ? "opacity-100" : "opacity-0 hidden",
+                                "mx-4 font-inherit text-inherit"
+                            )}>
+                            ADMIN
+                        </div>}
+                    </IconButton>}
+            >
+                {adminViews.map((entry, index) =>
+                    <MenuItem
+                        onClick={(event) => {
+                            event.preventDefault();
+                            navigate(entry.path);
+                        }}
+                        key={`navigation_${index}`}>
+                        {<IconForView collectionOrView={entry.view}/>}
+                        {entry.name}
+                    </MenuItem>)}
+
+            </Menu>}
+        </>
     );
 }
 
@@ -133,7 +160,7 @@ export function DrawerNavigationItem({
             transition: drawerOpen ? "width 150ms ease-in" : undefined
         }}
         className={({ isActive }: any) => cn("rounded-r-xl truncate",
-            "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-gray-100",
+            "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-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",