Feat/mobile menu drawer #509
Conversation
…ind v4 util classes
…pushed to further pr
Deploying algokit-lora with
|
| Latest commit: |
aeaa4f1
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e19d0037.algokit-lora.pages.dev |
| Branch Preview URL: | https://feat-mobile-menu-drawer.algokit-lora.pages.dev |
| {/* Items */} | ||
| <nav className="p-3 space-y-1"> | ||
| {menuItems.map((item, idx) => ( | ||
| <div onClick={handleClose}> |
There was a problem hiding this comment.
You’re missing a unique key for each child, React will warn about that.
Possible fixes:
key={item.urlTemplate.toString()}- or add an
idfield tomenuItemsand usekey={item.id}
| </button> | ||
| </div> | ||
|
|
||
| <Search /> |
There was a problem hiding this comment.
Might be missing className="w-full" on the <Search /> unless the design intentionally limits its width.
| <Search /> | |
| <Search className="w-full"/> |
| "eslint-plugin-react": "^7.37.2", | ||
| "eslint-plugin-react-hooks": "^5.0.0", | ||
| "eslint-plugin-react-refresh": "^0.4.20", | ||
| "eslint-plugin-tailwindcss": "^3.17.5", |
There was a problem hiding this comment.
👀
Noticed eslint-plugin-tailwindcss was removed here: is that because it’s still in beta for Tailwind v4?
There was a problem hiding this comment.
Installed eslint-plugin-tailwindcss@beta version that has major support for tailwind 4
| formAction={ | ||
| <FormActions> | ||
| {/* eslint-disable-next-line tailwindcss/no-custom-classname */} | ||
| <SubmitButton className="plausible-event-name=app-lab-use-existing-app-id">Use existing</SubmitButton> |
There was a problem hiding this comment.
I noticed that buttons appear to have lost the pointer.
There was a problem hiding this comment.
Nice catch! might've been something to do with the tailwind migration script. I'll fix this
There was a problem hiding this comment.
Tailwind v3’s preflight automatically set buttons to cursor: pointer, but that was removed in v4.
I restored this behavior by adding a global rule in the index CSS so all buttons have it again—keeping everything consistent with existing tests.
| const [layout, setLayout] = useLayout() | ||
| const isOpen = !!layout.isDrawerMenuExpanded | ||
|
|
||
| const menuItems = useMemo( |
There was a problem hiding this comment.
We should be able to extract the json out into a seperate file and share with the left side menu component.
3 participants
🚀 Tailwind v4 Upgrade & New Mobile Drawer
Summary
Upgraded Tailwind CSS to v4 and implemented a new menu drawer for mobile and tablet to improve responsiveness and accessibility.
Changes
Result
Cleaner mobile layout, better navigation flow, and consistent styling across breakpoints.