Mobile app like experience
Unanswered
Norwegian Forest Cat posted this in #help-forum
Norwegian Forest CatOP
Hi everyone. Currently I'm working on a web app an I want to achieve mobile app like experience.
The web app should have a bottom navigation bar and top bar, like we can see in many mobile apps. These components would be used on many pages, although not on every page.
My question is, what is the best way to implement this. I took a look at layouts but it seems that it does not suit my needs. According to documentation, layout should stay intact. For example each page should have different title in top bar, also there can be a custom button and I don't not want to render entire component, only that parts that need to be changed. From some pages I want to hide bottom navigation bar.
What is the recommended way how to implement this?
Thanks for any help
The web app should have a bottom navigation bar and top bar, like we can see in many mobile apps. These components would be used on many pages, although not on every page.
My question is, what is the best way to implement this. I took a look at layouts but it seems that it does not suit my needs. According to documentation, layout should stay intact. For example each page should have different title in top bar, also there can be a custom button and I don't not want to render entire component, only that parts that need to be changed. From some pages I want to hide bottom navigation bar.
What is the recommended way how to implement this?
Thanks for any help
11 Replies
Assuming that you would be using app router, since it provides a common layout file, you can provide in a common header and footer (top bar and bottom nav bar in other words), you can achieve the functionality by means of using usePathname() hook. With it, you can check for pathnames and load the content in both top bar and bottom bar according to pages.
Example:
For /marketplace route,
You could set bottom nav bar to hidden mode via css and you are good to go.
Example:
For /marketplace route,
You could set bottom nav bar to hidden mode via css and you are good to go.
@<Milind ツ /> Assuming that you would be using app router, since it provides a common layout file, you can provide in a common header and footer (top bar and bottom nav bar in other words), you can achieve the functionality by means of using usePathname() hook. With it, you can check for pathnames and load the content in both top bar and bottom bar according to pages.
Example:
For /marketplace route,
You could set bottom nav bar to hidden mode via css and you are good to go.
Norwegian Forest CatOP
Thanks for response. Can you please elaborate on that last part? You mean that I will apply display: none according to pathname?
Also what if I want to create separate separate button in top bar for each page?
@Norwegian Forest Cat Also what if I want to create separate separate button in top bar for each page?
Say you made a header with hamburger menu, logo and profile icon for home page (this is true for / route)
Now when u come to /marketplace, say you want to render out back button, marketplace title, fav and cart icon buttons
So depending upon pathname, you would replace the children inside header component
Now when u come to /marketplace, say you want to render out back button, marketplace title, fav and cart icon buttons
So depending upon pathname, you would replace the children inside header component
Thus everything stays in header component.
<header
{Children}
</header>
{Children}
</header>
Norwegian Forest CatOP
But that seems to me that im bringing page specific logic to general layout
Then you would have to do per page header instead of common header
Norwegian Forest CatOP
Uhm, ok thanks a lot for guidance
Again, I am not the best at this mobile development using web. Probably someone could have much better approach for this