Next.js Discord

Discord Forum

I need design feedback for mobile

Unanswered
WhyFencePost (Ping Reply) posted this in #help-forum
Open in Discord
WhyFencePost (Ping Reply)OP
This is the menu on mobile for the site that I am in the middle of developing. I think I need to do a number of things to the UI but I wanted to get some feedback first. The site is for a private club.
Layout
I wanted to quickly explain the current layout of the app.
- To the right bottom is the current page you are on. It animates down and out of the way when you open the menu
- Up top is a close menu icon
- Bellow that is the profile pic of the user - Ignore the warped image, I have already fixed that
- Bellow that is the name and membership category of the user
- Bellow that are the links

Changes I think I need to make
- Add shadow to the current page in this state
- Add icons to the links
- Add a way to tell which page you are on right now
- Add a way to tell that you can click on the profile to go to your profile page
- Change the colors to something more minimalistic

ANY OTHER CHANGE IDEAS ARE APRICIATED
I ALSO NEED HELP CHOOSING HOW AND WHAT TO IMPLEMENT FROM ABOVE

19 Replies

American Crow
I'd follow something like
https://tailwindui.com/components/application-ui/application-shells/sidebar
or
https://tailwindui.com/components/application-ui/application-shells/multi-column

Just because it's battle tested and i don't have a headache thinking about all the small ux/ui and accessability details because others did it for me
WhyFencePost (Ping Reply)OP
its for mobile, and i want that layout, i just cant figure out how to add icons
@WhyFencePost (Ping Reply) its for mobile, and i want that layout, i just cant figure out how to add icons
American Crow
All of the designs i posted are mobile friendly. You just have to make the window smaller to see the switch
WhyFencePost (Ping Reply)OP
ah, ok
i see, i still want my design, for me its more getting the colors right and adding icons
American Crow
i mean icons is as easy as using an icons libary, no?
https://lucide.dev/icons/
WhyFencePost (Ping Reply)OP
yea, but aligning them correctly
i already use lucid
American Crow
somth like
   <Link
      href="#"
      className="flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary"
    >
      <Package className="h-4 w-4" />
      Products{" "}
    </Link>
WhyFencePost (Ping Reply)OP
k, i have smtn but now i cant choose icons
thats booking: https://lucide.dev/icons/circle-fading-plus
but idk what to do for athletics
all the others i have
and home idk what to do
American Crow
I feel like you are trolling or not putting any effort in your questions.
You don't knowwhat to do because you cant think of how to illustrate "athletics"? And thats your question in a nextjs forum
Either way i am feeling like my time is wasted here ->i am out, gl
WhyFencePost (Ping Reply)OP
Ok, i legit dont know what to do for atheltics tho
Buuuut ok
Also home i dont want to do a basic house, everyone does that
WhyFencePost (Ping Reply)OP
new update, this is how it looks now: