如何在指定页面隐藏daisyUI抽屉并显示切换按钮？

我用基于Tailwind CSS的daisyUI做了一个抽屉组件，代码如下：

<div class="drawer drawer-mobile">

    <!-- hidden checkbox to toggle the visibility of the sidebar -->
    <input id="main-drawer" type="checkbox" class="drawer-toggle" />

    <!-- All your page content goes here -->
<!--    <div class="drawer-content flex flex-col !z-20">-->
    <div class="drawer-content flex flex-col">

        <div class="text-gray-800 w-full">
        <div class="mr-8 lg:hidden">
            <label for="main-drawer" class="btn btn-square btn-ghost">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-6 h-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
            </label>
        </div>
            
        </div>

        <!-- Main content -->
        <main class="items-center min-h-screen justify-center w-full pt-12 p-12 border-accent-content/5 bg-gray-100">
            <slot />
        </main>

    </div>

    <!-- Sidebar wrapper -->
    <div class="drawer-side bg-slate-700">
        <label for="main-drawer" class="drawer-overlay"></label>
        <ul class="menu p-4 overflow-y-auto w-80 bg-base-200 text-base-content">
            <!-- Sidebar content here -->
            <li><a>Main</a></li>
            <li><a>Dashboard</a></li>
            <li><a href="/pos">POS</a></li>
            <li><a href="/categories">Categories</a></li>
    </div>

</div>

正常状态下，桌面端抽屉始终可见，移动端抽屉隐藏并显示切换按钮。现在需要实现特殊需求：访问/pos页面时，无论桌面还是移动端，抽屉均隐藏，切换按钮显示，让/pos页面占满屏幕。请问能否仅用CSS实现？若不行，在Svelte中需增减哪些类来实现该功能？

一、能否仅用CSS实现？ #

纯CSS无法直接实现，因为CSS无法感知当前页面的路由路径（如/pos），没办法基于路由状态切换样式。必须借助前端框架的路由状态判断，或者给特定页面的根元素添加专属类名，再用CSS做样式覆盖。

二、Svelte中的实现方案 #

在Svelte里，我们可以通过路由状态判断（比如SvelteKit的$page对象，或自定义路由状态），给抽屉组件动态调整类名，实现需求：

1. 核心修改逻辑 #

• 强制/pos页面使用移动端抽屉逻辑，让抽屉默认隐藏
• 移除切换按钮的lg:hidden类，使其在所有屏幕尺寸下可见
• 在/pos页面隐藏侧边栏容器

2. 修改后的代码示例（基于SvelteKit） #

<script>
    import { page } from '$app/stores';
</script>

<div class="drawer">
    <!-- POS页面下抽屉默认不勾选（隐藏） -->
    <input 
        id="main-drawer" 
        type="checkbox" 
        class="drawer-toggle" 
        checked={$page.url.pathname !== '/pos'}
    />

    <div class="drawer-content flex flex-col">
        <div class="text-gray-800 w-full">
            <!-- POS页面下切换按钮始终显示 -->
            <div class="mr-8 {$page.url.pathname === '/pos' ? '' : 'lg:hidden'}">
                <label for="main-drawer" class="btn btn-square btn-ghost">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-6 h-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                </label>
            </div>
        </div>

        <main class="items-center min-h-screen justify-center w-full pt-12 p-12 border-accent-content/5 bg-gray-100">
            <slot />
        </main>
    </div>

    <!-- POS页面下隐藏侧边栏 -->
    <div class="drawer-side bg-slate-700 {$page.url.pathname === '/pos' ? 'hidden' : ''}">
        <label for="main-drawer" class="drawer-overlay"></label>
        <ul class="menu p-4 overflow-y-auto w-80 bg-base-200 text-base-content">
            <li><a>Main</a></li>
            <li><a>Dashboard</a></li>
            <li><a href="/pos">POS</a></li>
            <li><a href="/categories">Categories</a></li>
        </ul>
    </div>
</div>

3. 非SvelteKit项目适配 #

如果是普通Svelte项目，可通过svelte-routing等路由库获取当前路径，逻辑完全一致；也可以在/pos页面的根组件上添加pos-page类，再通过全局CSS控制：

.pos-page .drawer-side {
    display: none;
}
.pos-page .mr-8.lg-hidden {
    display: block;
}
.pos-page .drawer-toggle {
    display: none;
}

内容的提问来源于stack exchange，提问作者MrCujo