@colisweb/rescript-toolkit 2.2.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build",

package/src/router/Toolkit__Router.res

@@ -228,6 +228,7 @@ module Make = (Config: RouterConfig) => {
       ~links: array<link>,
       ~isNavOpen: bool,
       ~onLinkClick=() => (),
+      ~openMenu,
     ) => {
       let (isOpen, setIsOpen) = React.useState(() => false)
 
@@ -241,7 +242,12 @@ module Make = (Config: RouterConfig) => {
       }, [isNavOpen])
 
       <>
-        <button onClick=toggle className={cx([commonClassName, "flex items-center w-full"])}>
+        <button
+          onClick={_ => {
+            openMenu()
+            toggle()
+          }}
+          className={cx([commonClassName, "flex items-center w-full"])}>
           <span className={cx(["mr-2 text-neutral-800", isNavOpen ? "pl-2" : "px-2"])}>
             groupInfo.icon
           </span>
@@ -261,6 +267,12 @@ module Make = (Config: RouterConfig) => {
               ])}
             />
           </span>
+          {isNavOpen
+            ? React.null
+            : <div
+                className="sidenav-link-tooltip absolute left-0 p-2 bg-neutral-700 text-white rounded transform top-1/2 -translate-y-1/2 transition-all duration-200 ease-in-out opacity-0 invisible ml-16 whitespace-nowrap">
+                groupInfo.label
+              </div>}
         </button>
         <div
           className={cx([

package/src/ui/Toolkit__Ui_Layout.res

@@ -84,10 +84,17 @@ module App = {
     type sideNavRender = {
       onLinkClick: unit => unit,
       isNavOpen: bool,
+      openMenu: unit => unit,
     }
 
     @react.component
-    let make = (~isNavOpen, ~bottom=?, ~hideMenu, ~children: sideNavRender => React.element) => {
+    let make = (
+      ~isNavOpen,
+      ~bottom=?,
+      ~hideMenu,
+      ~children: sideNavRender => React.element,
+      ~openMenu,
+    ) => {
       let {isLg} = Toolkit__Hooks.useMediaQuery()
 
       let onLinkClick = () => isLg ? () : hideMenu()
@@ -99,17 +106,13 @@ module App = {
             "lg:flex border-r px-2 py-3 fixed flex-col bg-white justify-between transition-all duration-300 ease-in-out z-40",
             isNavOpen ? "w-64 overflow-y-auto" : "w-16 hidden sidenav--closed",
           ])}>
-          {children({onLinkClick: onLinkClick, isNavOpen: isNavOpen})}
+          {children({onLinkClick: onLinkClick, isNavOpen: isNavOpen, openMenu: openMenu})}
           {bottom->Option.mapWithDefault(React.null, content =>
             <div className={!isNavOpen ? "overflow-hidden" : ""}>
               <div
                 className={cx([
-                  "flex flex-col justify-end transition-all duration-300 ease-in-out",
+                  "flex flex-col justify-end transition-all duration-300 ease-in-out w-[14.75rem]",
                   isNavOpen ? "opacity-100" : "opacity-0",
-                  {
-                    open Css
-                    style(list{width(14.75->rem)})
-                  },
                 ])}>
                 content
               </div>
@@ -161,12 +164,15 @@ module App = {
     )
 
     let hideMenu = React.useCallback(_ => setOpen(_ => false))
+    let openMenu = React.useCallback(_ => setOpen(_ => true))
 
     <NavOpenContext.Provider value={isNavOpen}>
       <div>
         <TopNavigationBar username logout logoutLabel toggleMenu onLogoClick />
         <div className="flex">
-          <LeftNavigationBar isNavOpen ?bottom hideMenu> sideNavRender </LeftNavigationBar>
+          <LeftNavigationBar isNavOpen ?bottom hideMenu openMenu>
+            {sideNavRender}
+          </LeftNavigationBar>
           <main
             className={cx([
               className,