Theo's Typesafe Cult•2y ago

ts file for sidebar/drawer structure

Wanted to build a ts file that stores the structure of my drawer. Currently thinking of having the following type for a drawer tab -

type DrawerTab = {
  name: string,
  icon: React.ReactElement,
  route: Route,
}

type Route = "/home" | "/settings" | ......

type DrawerTab = {
  name: string,
  icon: React.ReactElement,
  route: Route,
}

type Route = "/home" | "/settings" | ......

Wanted to then store an array of DrawerTab[] in a ts file which can be used by my drawer. This is to just separate out the structure from the html. Am also setting up my app such that you can toggle which tab is visible or not but I would only know this at run time (since the settings of visibility would be stored in the db). So I was thinking that in my Drawer component, I'd import drawerTabs and then for each drawer tab check if the tab is active or not and only add it if it were visible. Only issue there is I'd need to have a map of Route: boolean in the db. Does this approach make sense or is there a simpler way to do this?

1 Reply

Lois•2y ago

Search the next.js 13 app_playground template they have the navbar. The file they use is called demo.js inside the directory. You can also find how they parse the pathname in either layout or globalnav file For toggling which tab is visible you can either do it manually with `if xxx === xxx' or put the boolean value: disabled: true/false inside the object. Not sure if this is clear enough. But the useSelectedLayoutSegment is app dir only so if you use that to build your nav bar following the template remember to read the doc/swap it out if you are in pages dir

Gaming

Programming

ts file for sidebar/drawer structure