CSS實現側邊欄收縮，可以讓網站頁面更加美觀和清晰。下面介紹一種實現方法：

/* 定義側邊欄寬度 */
.sidebar {
width: 250px;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #f0f0f0;
transition: width 0.2s ease-out;
}
/* 定義主區域寬度 */
.main-content {
margin-left: 250px;
transition: margin-left 0.2s ease-out;
}
/* 定義折疊樣式 */
.sidebar.collapsed {
width: 50px;
}
.main-content.collapsed {
margin-left: 50px;
}

以上代碼中，首先定義了側邊欄的初始寬度為250px，主區域則為距離側邊欄250px。接下來，定義折疊樣式，將側邊欄和主區域寬度縮小至50px。

在JavaScript中，可以通過添加類名來切換側邊欄的狀態。代碼如下：

var sidebar = document.querySelector('.sidebar');
var mainContent = document.querySelector('.main-content');
sidebar.addEventListener('click', function() {
sidebar.classList.toggle('collapsed');
mainContent.classList.toggle('collapsed');
});

以上代碼中，定義了sidebar和mainContent變量，監聽click事件，通過classList.toggle()方法來添加或移除collapsed類名實現兩種狀態的切換。