tailwind dashboard current state
hey guys im currently making school project with tailwindUI and i use their dashboard, the problem is when i changes pages the current doesnt changes any idea how?
19 Replies
as you can see im at item pages but the ui doesnt change
With tailwind ui u need to add the logic for changing it doesn't do that for you
I can't post code because it's against the licence to do it
But essentially tailwind ui will give u some states and you need to code in your logic
By states I mean the css portion
Background info first:
Tailwind is just a css framework, so it just gives you a collection of css classes you can add to your markup (html) to style your pages more easily.
On tailwindcss.com you can find a bunch of examples that adds some tailwind classes to some markup, so you can easily copy paste common components like buttons, navbars, etc. Same for your dashboard probably.
As needmorewood already told you, there is no logic included. So if you'd like to add some behavior, you have to do that by yourself.
the part that and still confused is im using next js layouts
useEffect(() => {
if (asPath) {
const sidebarNavigationMap = sidebarNavigation.map(element => {
return element.href === asPath ? { ...element, current: true } : { ...element, current: false }
})
setSidebarNavigation(sidebarNavigationMap)
}
}, [asPath]);
import { useRouter } from 'next/router';
my implementation
lemme copy and try your code first🫡
using Full-width with narrow sidebar and secondary column on right template
need to convert your navigation variable into a react state
Using the State Hook – React
A JavaScript library for building user interfaces
Roadmap to implement the logic in your case:
To add the behaviour you like, you could first remove the
current: boolean prop from your sidebar items since it is just there hardcoded for demponstration purpose.
Then read the current route from your router using useRouter() in your sidebar component.
Finally find your current sidebar item by iterating through all of them and comparing their href value with your router's path, like const currentItem = navigation.find((n) => n.href === currentRoutePath), and highlight the fitting one in your markup with a condition like "if this item i'm rendering right now is currentItem, then add my highlight status to its markup" (e.g. by adding the className "bg-red-500" or so)const { asPath } = useRouter();
i forgot about ^
Since you're a student and probably lack a bit of the basics, I updated my answers to hopefully bring a bit more clarification. Feel free to ask again if that doesn't help
yeaa😅 but i think your explaination is sufficient enough thanksss
did this what you mean by converting to react state?
replace your const navigation with const [ navigation, setNavigation]
no
replace this
change sidebarNavigation to navigation and setSidebarNavigation to setNavigation
it worked!!!!!
thanks shenggg🤩🤩🤩🤩
optionally you can rename sidebarNavigationMap to navigationMap
welcome but do note this might not be the best implementation of the feature
you might want to try optimize it further
ahh ok ok but for now this is the best thing i can at least for now
thanks all @Sheng @Froxx @needmorewood
gdluck w ur project