@colisweb/rescript-toolkit 2.62.4 → 2.63.1

package/package.json

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

package/src/router/Toolkit__Router.res

@@ -57,8 +57,23 @@ module Make = (Config: RouterConfig) => {
 
   let useRoute = (): Config.t => RescriptReactRouter.useUrl()->Config.make
 
-  let isRouteEqual = (routeA: Config.t, routeB: Config.t): bool =>
-    routeA->Config.toString === routeB->Config.toString
+  let isRouteEqual = (routeA: Config.t, routeB: Config.t): bool => {
+    let routeA = {
+      let url = routeA->Config.toString
+      let queryParamsIndex = url->Js.String2.indexOf("?")
+
+      queryParamsIndex === -1 ? url : url->Js.String2.slice(~from=0, ~to_=queryParamsIndex)
+    }
+
+    let routeB = {
+      let url = routeB->Config.toString
+      let queryParamsIndex = url->Js.String2.indexOf("?")
+
+      queryParamsIndex === -1 ? url : url->Js.String2.slice(~from=0, ~to_=queryParamsIndex)
+    }
+
+    routeA === routeB
+  }
 
   let useIsCurrentRoute = (route: Config.t): bool => {
     let {currentRoute} = React.useContext(routerContext)
@@ -148,6 +163,7 @@ module Make = (Config: RouterConfig) => {
   and groupInfo = {
     label: React.element,
     icon: React.element,
+    activeForCurrentRoute?: Config.t => bool,
   }
   and appLink = {
     route: Config.t,
@@ -198,7 +214,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 +247,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 +269,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>