저 다크모드 버튼을 클릭하기 전과 후에 스크롤바가 있다 없다 해서 생기는 레이아웃 변경 현상이 매우 신경쓰였는데, 다른 사람들에게 보여주니 같은 말을 한다..! 고쳐야겠다고 생각했다.
해결 방법은 modal 속성을 false로 설정하는 것이다.
'use client';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Moon, Sun } from 'lucide-react';
import { useTheme } from 'next-themes';
import { Button } from '../ui/button';
const ColorModeButton = () => {
const { setTheme } = useTheme();
return (
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
<Button size="icon" className="rounded-full shadow-lg">
<Sun size={22} className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon size={22} className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme('light')}>밝게</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('dark')}>어둡게</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('system')}>시스템 설정</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
};
export default ColorModeButton;
radix 문서에서 modality 라는 단어를 본 기억이 있어서 찾아보니 이 스크롤바 문제와 관련이 있었다.
The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
드롭다운 메뉴의 모달성입니다. true로 설정하면 외부 요소와의 상호 작용이 비활성화되고 메뉴 콘텐츠만 스크린 리더에 표시됩니다.
modal의 기본값은 true이기 때문에 클릭시 외부 요소와 상호 작용할 수 없도록 스크롤바가 사라진다.
modal={true}인 상태에서 버튼을 토글할 때 변화하는 속성
(드롭다운 클릭 전)
(드롭다운 클릭 후)
DOM 속성에서 보듯이 라이브러리 자체에서 스크롤에 락을 거는 것을 확인할 수 있다. 라이브러리를 까보면 react-remove-scroll을 사용하고 있다고 한다.
20개의 댓글
I'd state which this can be a an excellent publish of the excellent individual, i am very happy to observe this particular. 麻布十番 英会話
Amazing short article. Your article influences a great deal of vital issues of our own modern society. Many of us can not be uninvolved for you to these kind of issues. This specific article presents ideas along with aspects. Quite helpful along with functional. Eliran
I might point out in which it is a a fantastic submit of your fantastic particular person, now i'm pleased to notice this kind of. フラメンコ 教室 東京 スペイン人
Certainly great, remarkable, fact-filled tips these. Ones own content articles Be required to fail, thinking that obviously is true these on top of that. One normally generate an intriguing browse. On earth do you enlighten So i'm shocked?: )#) Compete the great articles and reviews. Loft conversions Surbiton
Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained!zorro4d login
We'd mention the fact that this may be a a good place associated with a terrific man, i will be pleased to look at the. Car Removal Sydney
Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained!link alternatif olxtoto
Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained!bandar toto macau
Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained!
Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained!
Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained!
Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained!
Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained!
Ones new music is usually wonderful. You could have many incredibly proficient painters. When i hope people the most beneficial connected with achievements. 橿原 産後骨盤矯正
A totally free tell you which usually they can be a a superb content from the awesome people, we're very happy to watch this approach. panen300
You could be allowed to put up manufacturers, except for shortcuts, in the event that they've been recognized not to mention concerning content.สล็อตวอเลท
We would claim of which that is a an incredible write-up of any good man or women, now i am pleased to view that.
We would claim of which that is a an incredible write-up of any good man or women, now i am pleased to view that. malaysia gambling site
Thanks for providing recent updates regarding the concern, I look forward to read more. A-1 Service Group
Fantastic write-up, journeyed onward in addition to book-marked your web site. When i can’t hang on to learn to read far more by people.소액 대출