Nav dropdown mobile

[shaoc23]

Describe what you are trying to do

I redesigned the mobile UI for shubble, and added figma screenshots, implemented the navigation header with a dropdown menu.

Steps for review

Can run it locally and see any changes on the website.

Issues

shubble redesign #109

Screenshots

Additional Information

[jmccand]

Looks like your code is failing the Client Build Check, which indicates that npm run build and npm run dev fail. Try running dev on your machine and fix the errors it raises.

[jmccand]

Fix Client Build Check.

[jmccand]

Fix Client Build Check.

[jmccand]

Remove

[shaoc23]

Hi Joel! Will do! I deeply apologize I didn’t see your previous email… Get Outlook for iOS<https://aka.ms/o0ukef>

________________________________ From: Joel McCandless ***@***.***> Sent: Friday, December 12, 2025 11:18:32 AM To: wtg/shubble ***@***.***> Cc: Shao, Carolyn ***@***.***>; Author ***@***.***> Subject: [EXTERNAL]Re: [wtg/shubble] Nav dropdown mobile (PR #254) CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe. @jmccand requested changes on this pull request. Fix Client Build Check.

________________________________ In client/src/components/DropdownItem/DropdownItem.css<#254 (comment)>:

@@ -0,0 +1,11 @@

+.dropdown-item { + /* padding: 0.5rem; */ + /* margin:0.1rem; */ + padding-top:28px; + width:100%; + border-radius:0.5rem; + cursor:pointer; + +} +/* .dropdown-item:hover { Remove — Reply to this email directly, view it on GitHub<#254 (review)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BW7KKNHWXC5UTHGM7NAVIVD4BLTFRAVCNFSM6AAAAACORUY376VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZTKNZSGU3TSMJUHE>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[jmccand]

No worries, Carolyn. What you're seeing are automatic emails about comments on your PR. If you click on the links in the email, it should take you to the PR page, where it will be easier for you to see comments and requested changes!

[shaoc23]

Good afternoon Joel, I was trying to fix the issues from the PR, but I didn't realize that we had migrated to Typescript. I am trying to work on it, but I also have 2 Principles of Software homeworks due today. Would you be okay if we could briefly meet on Saturday to fix the issues? I know you are very busy and I apologize for the issues! Thank you, Carolyn Shao

…

________________________________ From: Joel McCandless ***@***.***> Sent: Friday, December 12, 2025 11:22 AM To: wtg/shubble ***@***.***> Cc: Shao, Carolyn ***@***.***>; Author ***@***.***> Subject: [EXTERNAL]Re: [wtg/shubble] Nav dropdown mobile (PR #254) CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe. [https://avatars.githubusercontent.com/u/43151496?s=20&v=4]jmccand left a comment (wtg/shubble#254)<#254 (comment)> No worries, Carolyn. What you're seeing are automatic emails about comments on your PR. If you click on the links in the email, it should take you to the PR page, where it will be easier for you to see comments and requested changes! — Reply to this email directly, view it on GitHub<#254 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BW7KKNBVY5XSUNV5GUVU6HD4BLTUJAVCNFSM6AAAAACORUY376VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTMNBXGI2TCNBZGI>. You are receiving this because you authored the thread.Message ID: ***@***.***>