Skip to content
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

Tab Editor Fix to open and close when pressing on icon #60

Open
jayjay2397 opened this issue Feb 7, 2024 · 0 comments
Open

Tab Editor Fix to open and close when pressing on icon #60

jayjay2397 opened this issue Feb 7, 2024 · 0 comments

Comments

@jayjay2397
Copy link

Hi,

As I was working through this beautiful project, I noticed, once I launched it, that the editor tabs would not close when pressed on the icons. As someone who enjoys testing responsiveness on phones and tablets, I noticed this wasn't the biggest issue on a computer monitor but more so on a phone and tablet screen. It would cover the screen and not allow closing it to look at a design on a phone or tablet screen. Attached below is a quick snippet of code to fix that—nothing crazy. This is Just in case some people want this simple but effective enhancement for the UI. This bit of code will be added inside the Customizer.jsx page. I've attached a small clip below to show how it would look after.

`// Adjust the handleClick function for EditorTabs
const toggleTab = (tabName) => {
// Toggle the tab: close if it's already active, or open the clicked tab
setActiveEditorTab(currentTab => currentTab === tabName ? "" : tabName);
};

// Inside your return statement where you map over EditorTabs
{EditorTabs.map((tab) => (
<Tab
key={tab.name}
tab={tab}
handleClick={() => toggleTab(tab.name)}
/>
))}
`

Untitled-ezgif com-optimize

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant