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)}
/>
))}
`
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)} /> ))} `