I recently came across a mobile menu style that I really like: https://www.w3schools.com/html/default.asp
What I appreciate about this style is that even on smaller screens, it still displays some main navigation items. This allows for popular links to be easily accessible without the need to open the full mobile menu.
Now, I am looking to replicate this behavior using react.
For simplicity's sake, I have created a function that returns all my links through mapping and then renders them in the layout:
getNavigationItems(){
const items = this.props.routes.slice(0, this.state.cutOffIndex).map((link) =>
<a
className="DNavigationContainer-LinkItem"
href="#"
>{link.title}</a>
);
return items;
}
The 'cutOffIndex' variable determines how many items should be displayed. As the page width decreases, the cut-off index is reduced to show fewer links.
This method works well, but the issue arises with different link sizes based on text length.
I am seeking a solution that can dynamically calculate each link size to determine how many links can fit within the given width limit.
Initially, I thought of iterating through the links in the constructor and storing their lengths in an array. Then, based on available space, select links that collectively fall under the maximum width.
for(var i = 0; i < this.props.routes.length; i++){
var textLength = this.props.routes[i].title.length;
//store text length in an array?
}
However, this approach seems complex. I am curious if there is a simpler CSS-based solution or a preferred method to achieve this?