shinymaterial应用侧边导航关闭时仅显示图标的实现方法咨询

首先厘清认知误区：shinymaterial是对Materialize CSS 1.x版本的R语言封装，和之前查阅的Material Design Lite是完全独立的两套组件库，类名、DOM结构没有通用性，之前照搬MDL的样式不生效是正常的。
这个需求完全可以用纯CSS实现，不需要改动框架核心的JS逻辑。

核心效果逻辑 #

要实现的收窄状态为：侧边导航固定在页面左侧，不随交互滑出屏幕，仅把宽度从默认的250px调整为仅能容纳功能图标的宽度，隐藏所有导航文字。

分步实现（纯CSS代码） #

1. 定义收窄态的容器尺寸
   Materialize默认固定定位的sidenav展开宽度为250px，我们自定义收窄态的宽度为80px，刚好适配居中的Material Icon尺寸：

   /* 收窄状态下的侧边导航容器 */
   .sidenav.sidenav-fixed.sidenav-collapsed {
     width: 80px !important;
     overflow: hidden; /* 强制隐藏溢出的文字内容，避免露白 */
   }
   

2. 调整导航项的布局，隐藏文字
   shinymaterial生成的导航项结构为「<a>标签包裹图标<i> + 导航说明文字」，不需要修改HTML结构，通过字号、内边距调整就可以只显示图标：

   /* 收窄态下的导航项样式重置 */
   .sidenav.sidenav-fixed.sidenav-collapsed a {
     padding: 0 28px; /* 调整内边距让图标居中 */
     line-height: 48px; /* 保持导航项的垂直高度和展开态一致 */
   }
   /* 隐藏导航文字 */
   .sidenav.sidenav-fixed.sidenav-collapsed a {
     font-size: 0;
   }
   /* 保证图标正常显示，不被字号调整影响 */
   .sidenav.sidenav-fixed.sidenav-collapsed a > i.material-icons {
     font-size: 24px;
     display: inline-flex;
     vertical-align: middle;
   }
   

3. 适配主内容区的边距
   默认展开状态下，Materialize会给主内容区<main>元素自动加上margin-left:250px的偏移，收窄状态下要同步调整这个边距，否则会出现内容区错位：

   /* 展开态保持原有边距 */
   main {
     margin-left: 250px;
   }
   /* 收窄态匹配侧边导航的80px宽度 */
   body.sidenav-collapsed main {
     margin-left: 80px;
   }
   

状态切换的适配 #

shinymaterial默认的导航开关是控制sidenav完全滑出/滑入屏幕，我们可以在现有按钮的点击交互里，给<body>和侧边导航容器同步加/移除.sidenav-collapsed类，就可以实现「全宽带文字-窄栏纯图标」的两态切换，和原生的完全隐藏逻辑不冲突。

常见踩坑提示 #

• 不要直接照搬MDL的侧边导航样式：MDL使用的类名是.mdl-layout__drawer，和shinymaterial的.sidenav类体系完全独立，样式选择器匹配不到不会生效
• 收窄态一定要给sidenav容器加overflow:hidden，否则导航文字会溢出到侧边导航的宽度范围外，破坏界面布局
• 收窄态下要重置导航项的左右padding，否则原来为文字预留的大边距会把图标挤到导航的最左侧，无法居中

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