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.

Sign up for GitHub

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

fix[dark-mode-toggle]: fix dark/light mode toggle on mobile #1332

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+55 −15
Open

fix[dark-mode-toggle]: fix dark/light mode toggle on mobile #1332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ae44bf
fix[dark-mode-toggle]: fix dark/light mode toggle on mobile
Karan-Palan Jan 19, 2025
661e73d
fix[dark-mode-toggle]: add tests
Karan-Palan Jan 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 31 additions & 9 deletions components/DarkModeToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import React from 'react';
import Image from 'next/image';

Expand Down Expand Up @@ -35,6 +35,7 @@ export default function DarkModeToggle() {
const [activeThemeIcon, setActiveThemeIcon] = useState(
'/icons/theme-switch.svg',
);

useEffect(() => {
switch (theme) {
case 'system':
Expand All @@ -46,8 +47,30 @@ export default function DarkModeToggle() {
}
}, [theme, resolvedTheme]);

const dropdownRef = useRef<HTMLDivElement>(null);

useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node)
) {
setShowSelect(false);
}
};

document.addEventListener('mousedown', handleClickOutside);

return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);

return (
<div className='relative w-10 h-10 dark-mode-toggle-container'>
<div
ref={dropdownRef}
className='relative w-10 h-10 dark-mode-toggle-container'
>
<button
onClick={() => setShowSelect(!showSelect)}
className='dark-mode-toggle rounded-md dark:hover:bg-gray-700 p-1.5 hover:bg-gray-100 transition duration-150 '
Expand All @@ -66,11 +89,10 @@ export default function DarkModeToggle() {
/>
</button>
<div
className='absolute right-0 p-2 bg-white dark:bg-gray-800 rounded-lg border dark:border-gray-700 z-10 w-max'
style={{ display: showSelect ? 'block' : 'none' }}
onMouseLeave={() => {
setShowSelect(false);
}}
onMouseLeave={() => setShowSelect(false)}
className={`absolute right-0 p-2 bg-white dark:bg-gray-800 rounded-lg border dark:border-gray-700 z-10 w-max ${
showSelect ? 'block' : 'hidden'
}`}
tabIndex={0}
data-test='theme-dropdown'
>
Expand All @@ -93,7 +115,7 @@ export default function DarkModeToggle() {
>
<Image
src={'/icons/sun.svg'}
alt='System theme'
alt='Light theme'
width={18}
height={18}
style={{ filter: isDarkMode ? 'invert(1)' : 'invert(0)' }}
Expand All @@ -106,7 +128,7 @@ export default function DarkModeToggle() {
>
<Image
src={'/icons/moon.svg'}
alt='System theme'
alt='Dark theme'
width={18}
height={18}
style={{ filter: isDarkMode ? 'invert(1)' : 'invert(0)' }}
Expand Down
30 changes: 24 additions & 6 deletions cypress/components/DarkModeToggle.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,13 @@ describe('DarkModeToggle Component', () => {
cy.get(TOGGLE_BUTTON).click();

// check if the menu is open
cy.get(THEME_DROPDOWN).should('have.css', 'display', 'block');
cy.get(THEME_DROPDOWN).should('be.visible');

// click on the toggle button again to close the menu
cy.get(TOGGLE_BUTTON).click();

// check if the menu is closed
cy.get(THEME_DROPDOWN).should('have.css', 'display', 'none');
cy.get(THEME_DROPDOWN).should('not.be.visible');
});

// Should close the menu on mouse leave
Expand All @@ -58,13 +58,31 @@ describe('DarkModeToggle Component', () => {
cy.get(TOGGLE_BUTTON).click();

// check if the menu is open
cy.get(THEME_DROPDOWN).should('have.css', 'display', 'block');
cy.get(THEME_DROPDOWN).should('be.visible');

// trigger mouse leave event on the menu
cy.get(THEME_DROPDOWN).trigger('mouseout');
// simulate mouse leave event on the menu
cy.get(THEME_DROPDOWN).then(($el) => {
const mouseOutEvent = new Event('mouseout', { bubbles: true });
$el[0].dispatchEvent(mouseOutEvent);
});

// check if the menu is closed
cy.get(THEME_DROPDOWN).should('have.css', 'display', 'none');
cy.get(THEME_DROPDOWN).should('not.be.visible');
});

// Should close the menu when clicking outside
it('should close the menu when clicking outside', () => {
// Click on the toggle button to open the menu
cy.get(TOGGLE_BUTTON).click();

// Check if the menu is open
cy.get(THEME_DROPDOWN).should('be.visible');

// Simulate clicking outside the dropdown
cy.get('body').click(0, 0); // Click at the top-left corner of the body

// Check if the menu is closed
cy.get(THEME_DROPDOWN).should('not.be.visible');
});
});

Expand Down
Loading