@firecms/core 3.0.0-beta.7 → 3.0.0-beta.9

package/src/core/DrawerNavigationItem.tsx

@@ -7,6 +7,7 @@ export function DrawerNavigationItem({
                                          name,
                                          icon,
                                          drawerOpen,
+                                         adminMenuOpen,
                                          tooltipsOpen,
                                          url,
                                          onClick
@@ -15,6 +16,7 @@ export function DrawerNavigationItem({
     name: string,
     tooltipsOpen: boolean,
     drawerOpen: boolean,
+    adminMenuOpen?: boolean,
     url: string,
     onClick?: () => void,
 }) {
@@ -24,37 +26,39 @@ export function DrawerNavigationItem({
         {icon}
     </div>;
 
-    const listItem = <NavLink
-        onClick={onClick}
-        style={{
-            width: !drawerOpen ? "72px" : "280px",
-            transition: drawerOpen ? "width 150ms ease-in" : undefined
-        }}
-        className={({ isActive }: any) => cls("rounded-r-lg 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-white",
-            "flex flex-row items-center mr-8",
-            // "transition-all ease-in-out delay-100 duration-300",
-            // drawerOpen ? "w-full" : "w-18",
-            drawerOpen ? "pl-8 h-12" : "pl-6 h-11",
-            "font-medium text-sm",
-            isActive ? "bg-slate-200 bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-30" : ""
-        )}
-        to={url}
-    >
+    const listItem = <div>
+        <NavLink
+            onClick={onClick}
+            style={{
+                width: "100%",
+                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",
+                "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" : ""
+            )}
+            to={url}
+        >
 
-        {iconWrap}
+            {iconWrap}
 
-        <div
-            className={cls(
-                drawerOpen ? "opacity-100" : "opacity-0 hidden",
-                "ml-4 font-inherit text-inherit"
-            )}>
-            {name.toUpperCase()}
-        </div>
-    </NavLink>;
+            <div
+                className={cls(
+                    drawerOpen ? "opacity-100" : "opacity-0 hidden",
+                    "ml-4 font-inherit text-inherit"
+                )}>
+                {name.toUpperCase()}
+            </div>
+        </NavLink>
+    </div>;
 
     return <Tooltip
-        open={drawerOpen ? false : tooltipsOpen}
+        open={drawerOpen || adminMenuOpen ? false : tooltipsOpen}
         side="right"
         title={name}>
         {listItem}