Here are two quick tips for IHP:
Use the classes helper
...to dynamically assign classes to elements in your views. It's an easy way to simplify your code by a lot:
-- BEFORE
<a class={usersLinkClasses} href={UsersAction}>Users</a>
<a class={invitesLinkClasses} href={InvitesAction}>Invites</a>
...
where
usersLinkClasses = "nav-link" ++ if isActivePath UsersAction
then " active"
else ""
invitesLinkClasses = "nav-link" ++ if isActivePath InvitesAction
then " active"
else ""
-- AFTER
<a class={classes ["nav-link", ("active", isActivePath UsersAction)]} href={UsersAction}>Users</a>
<a class={classes ["nav-link", ("active", isActivePath InvitesAction)]} href={InvitesAction}>Invites</a>
Use isActivePathOrSub
instead of isActivePath
If you read the previous example, you might have noticed that I used isActivePath
to dynamically assign the active
class to the links. Well, using isActivePathOrSub
this will also work if the path is a sub-path. In the following example, both /Settings
and /Settings/Profile
would match and cause the link to get the active
class. Learn more in the documentation.
<a class={classes ["nav-link", ("active", isActivePathOrSub "/Settings")]} href={SettingsAction}>Settings</a>
If this peaked your interest, get started with IHP now and tell us what you think!
Top comments (0)