-
Notifications
You must be signed in to change notification settings - Fork 19
Feat/mobile menu drawer #509
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
…ind v4 util classes
…pushed to further pr
{/* Items */} | ||
<nav className="p-3 space-y-1"> | ||
{menuItems.map((item, idx) => ( | ||
<div onClick={handleClose}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You’re missing a unique key
for each child, React will warn about that.
Possible fixes:
key={item.urlTemplate.toString()}
- or add an
id
field tomenuItems
and usekey={item.id}
</button> | ||
</div> | ||
|
||
<Search /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👀
Noticed eslint-plugin-tailwindcss
was removed here: is that because it’s still in beta for Tailwind v4?
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I noticed that buttons appear to have lost the pointer.
const [layout, setLayout] = useLayout() | ||
const isOpen = !!layout.isDrawerMenuExpanded | ||
|
||
const menuItems = useMemo( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should be able to extract the json out into a seperate file and share with the left side menu component.
🚀 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.