如何用纯UIKit原生组件打造无依赖响应式后台可折叠侧边栏？

Hey there! 针对你想要用UIKit原生组件打造无外部依赖的可折叠侧边栏，还希望响应式调整uk-width而非用显隐工具的需求，我整理了一套完全贴合你思路的可行方案，用到了你提到的grid + accordion + animation + sticky + cards组合：

核心思路 #

不用uk-hidden/uk-visible这类显隐工具，而是通过自定义媒体查询 + 原生JS监听窗口 resize，配合UIKit的动画组件实现宽度平滑过渡，同时保留侧边栏的所有交互功能。

1. 基础布局结构（Grid + Sticky + Cards + Accordion） #

先搭好主内容区和侧边栏的Grid框架，侧边栏用uk-sticky固定，内部嵌套折叠菜单和卡片组件：

<div class="uk-grid" uk-grid>
  <!-- 可折叠侧边栏 -->
  <div id="sidebar" class="sidebar uk-width-1-4@m uk-animation-slide-left-medium">
    <div uk-sticky="offset: 40; media: @m;">
      <!-- 折叠菜单（Accordion） -->
      <ul class="uk-accordion" uk-accordion>
        <li class="uk-open">
          <a class="uk-accordion-title" href="#"><span uk-icon="icon: menu"></span> 菜单组1</a>
          <div class="uk-accordion-content">
            <ul class="uk-nav uk-nav-default">
              <li><a href="#"><span uk-icon="icon: file-text"></span> 子项1</a></li>
              <li><a href="#"><span uk-icon="icon: file-text"></span> 子项2</a></li>
            </ul>
          </div>
        </li>
        <li>
          <a class="uk-accordion-title" href="#"><span uk-icon="icon: users"></span> 菜单组2</a>
          <div class="uk-accordion-content">
            <ul class="uk-nav uk-nav-default">
              <li><a href="#"><span uk-icon="icon: user"></span> 子项3</a></li>
            </ul>
          </div>
        </li>
      </ul>
      <!-- 侧边卡片 -->
      <div class="uk-card uk-card-default uk-card-small uk-margin-top">
        <div class="uk-card-body">
          <h5 class="uk-card-title">辅助信息</h5>
          <p>这里是侧边栏的补充内容</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 主内容区 -->
  <div class="main-content uk-width-3-4@m">
    <h1>主页面内容</h1>
    <p>这里是页面的核心展示区域，侧边栏宽度变化时会自动适配...</p>
  </div>
</div>
<!-- 侧边栏切换按钮 -->
<button id="sidebar-toggle" class="uk-button uk-button-default uk-position-fixed uk-bottom-right uk-margin">
  <span uk-icon="icon: menu"></span>
</button>

2. 自定义CSS：过渡动画 + 响应式宽度规则 #

给侧边栏添加平滑过渡效果，同时定义不同断点下的宽度逻辑，以及折叠状态的样式：

/* 侧边栏基础样式 + 宽度过渡动画 */
.sidebar {
  transition: width 0.3s ease-in-out;
  overflow: hidden;
  background-color: #f8f9fa;
}
/* 折叠状态的窄宽度 */
.sidebar.collapsed {
  width: 60px !important;
}
/* 折叠时隐藏文字，只留图标 */
.sidebar.collapsed .uk-accordion-title span + span,
.sidebar.collapsed .uk-card-body {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}
/* 移动端响应式规则 */
@media (max-width: 959px) {
  .sidebar {
    width: 60px !important;
  }
  .sidebar:not(.collapsed) {
    width: 280px !important;
  }
  .main-content {
    width: calc(100% - 60px) !important;
  }
  .main-content.sidebar-expanded {
    width: calc(100% - 280px) !important;
  }
}

3. 原生JS：监听窗口变化 + 切换逻辑 #

用纯JS处理侧边栏的切换，以及窗口resize时的响应式适配：

const sidebar = document.getElementById('sidebar');
const mainContent = document.querySelector('.main-content');
const toggleBtn = document.getElementById('sidebar-toggle');

// 切换侧边栏展开/折叠状态
function toggleSidebar() {
  sidebar.classList.toggle('collapsed');
  mainContent.classList.toggle('sidebar-expanded');
}

// 窗口resize时自动适配响应式状态
function handleResize() {
  if (window.innerWidth <= 959) {
    // 移动端：根据侧边栏状态调整主内容宽度
    mainContent.classList.toggle('sidebar-expanded', !sidebar.classList.contains('collapsed'));
  } else {
    // 桌面端：恢复默认宽度，移除折叠状态
    sidebar.classList.remove('collapsed');
    mainContent.classList.remove('sidebar-expanded');
  }
}

// 绑定事件
toggleBtn.addEventListener('click', toggleSidebar);
window.addEventListener('resize', handleResize);

// 页面初始化时执行一次适配
handleResize();

4. 优化细节 #

• 给uk-sticky添加media: @m参数，只在桌面端固定侧边栏，移动端随内容滚动更友好
• 折叠状态下只保留图标，既节省空间又保持交互性
• 利用UIKit的uk-animation类增强过渡流畅度，比如给侧边栏添加uk-animation-slide-left-medium

这套方案完全基于UIKit原生组件，没有外部依赖，通过动态调整宽度而非显隐元素实现响应式折叠，完美匹配你的需求。

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