chore: add container-queries tailwind plugin

This commit is contained in:
Steven
2023-10-14 14:13:55 +08:00
parent c58820fa64
commit 5359d5a66d
7 changed files with 21 additions and 8 deletions

View File

@ -9,18 +9,18 @@ const HomeSidebar = () => {
return (
<div
className={`fixed lg:sticky top-0 left-0 w-full lg:w-56 h-full shrink-0 pointer-events-none lg:pointer-events-auto z-10 ${
className={`fixed @lg:sticky top-0 left-0 w-full @lg:w-56 h-full shrink-0 pointer-events-none @lg:pointer-events-auto z-10 ${
showHomeSidebar && "pointer-events-auto"
}`}
>
<div
className={`fixed top-0 left-0 w-full h-full bg-black opacity-0 pointer-events-none transition-opacity duration-300 lg:!hidden ${
className={`fixed top-0 left-0 w-full h-full opacity-0 pointer-events-none transition-opacity duration-300 @lg:!hidden ${
showHomeSidebar && "opacity-60 pointer-events-auto"
}`}
onClick={() => layoutStore.setHomeSidebarStatus(false)}
></div>
<aside
className={`absolute lg:relative top-0 right-0 w-56 pr-2 lg:w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-zinc-100 dark:bg-zinc-800 lg:bg-transparent lg:shadow-none transition-all duration-300 translate-x-full lg:translate-x-0 ${
className={`absolute @lg:relative top-0 right-0 w-56 pr-2 @lg:w-full h-full max-h-screen border-l sm:border-none dark:border-l-zinc-700 overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-zinc-100 dark:bg-zinc-800 @lg:bg-transparent @lg:shadow-none transition-all duration-300 translate-x-full @lg:translate-x-0 ${
showHomeSidebar && "!translate-x-0 shadow-2xl"
}`}
>