web_toolset/web/html/body/nas/side.html

<div class="layui-side layui-bg-black" id='myside'>
    <div class="layui-side-scroll side-bg" id="myside_div"  >
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree side-bg" lay-filter="test" >
            <li class="layui-nav-item">
                <a class="" href="javascript:;">本体管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="/html/body/nas/ip.html">查看IP</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a class="" href="/html/body/nas/switchAdmin.html">管理后台</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">功能管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="/html/body/nas/bilidown.html">B站直播下载器</a></dd>
                </dl>
                <dl class="layui-nav-child">
                    <dd><a href="/html/body/nas/animrss.html">番剧订阅器</a></dd>
                </dl>
            </li>
        </ul>
    </div>
</div>
<script>
    $(document).ready(function () {
        let mobile = navigator.userAgent.toLowerCase().match(/android/i) === "android" || navigator.userAgent.toLowerCase().match(/iphone os/i) === "iphone os";
        if (mobile) {
           $('#myside').removeClass('layui-side')
           $('#myside_div').removeClass('layui-side-scroll')
           $('#myside').addClass('layui-header')
           $('#myside').css('height','100%')

        } else {
            $('#myside').removeClass('layui-header')
           $('#myside').addClass('layui-side')
           $('#myside_div').addClass('layui-side-scroll')
        }
    })
</script>
<style>
    .side-bg{
        background-color: #2983BB;
    }
</style>