@colisweb/rescript-toolkit 2.62.4 → 2.63.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.62.4",
+  "version": "2.63.0",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build -with-deps",

package/src/router/Toolkit__Router.res

@@ -148,6 +148,7 @@ module Make = (Config: RouterConfig) => {
   and groupInfo = {
     label: React.element,
     icon: React.element,
+    activeForCurrentRoute?: Config.t => bool,
   }
   and appLink = {
     route: Config.t,
@@ -198,7 +199,7 @@ module Make = (Config: RouterConfig) => {
         <Link
           route
           className={cx([commonClassName, isSubLink ? "ml-3" : "", "sidenav-link"])}
-          activeClassName="bg-primary-100 text-neutral-700"
+          activeClassName="bg-primary-100/75 text-neutral-700"
           onClick={_ => onLinkClick()}>
           <span className="overflow-hidden flex">
             <span className={cx(["text-neutral-800", isNavOpen ? "pl-2" : "px-2"])}> icon </span>
@@ -231,8 +232,14 @@ module Make = (Config: RouterConfig) => {
       ~openMenu,
     ) => {
       let (isOpen, setIsOpen) = React.useState(() => false)
-
+      let currentRoute = useRoute()
       let toggle = React.useCallback0(_ => setIsOpen(v => !v))
+      let hasActiveSubRoute = links->Array.some(link => {
+        switch link {
+        | Legacy(_) => false
+        | App({route}) => isRouteEqual(currentRoute, route)
+        }
+      })
 
       React.useEffect1(() => {
         if !isNavOpen {
@@ -247,7 +254,15 @@ module Make = (Config: RouterConfig) => {
             openMenu()
             toggle()
           }}
-          className={cx([commonClassName, "flex items-center w-full sidenav-link"])}>
+          className={cx([
+            commonClassName,
+            "flex items-center w-full sidenav-link",
+            switch (hasActiveSubRoute, isNavOpen) {
+            | (true, true) => "bg-primary-100/50"
+            | (true, false) => "bg-primary-100/75"
+            | (false, _) => ""
+            },
+          ])}>
           <span className={cx(["mr-2 text-neutral-800", isNavOpen ? "pl-2" : "px-2"])}>
             groupInfo.icon
           </span>