Slack UI UX design with collapsable columns

Question

I want to duplicate the collapsible functionality that slack has on its column. It lets you view 3 columns at a time. Upon expanding the the thrid column, the second column shrinks. When the second col reaches its min width, first column automatically collapses and second column takes it place.

Using Split js, second column collapses upon expanding the third column.

Answer 1

To replicate Slack's collapsible functionality using Split.js, you can define a few rules for the column widths and the minimum sizes. Here's a sample code snippet that demonstrates how you can achieve this:

<div class="split">
  <div class="split-item" style="min-width: 300px; flex-basis: 25%;">
    <!-- First column content -->
  </div>
  <div class="split-item" style="min-width: 300px; flex-basis: 50%;">
    <!-- Second column content -->
  </div>
  <div class="split-item" style="min-width: 300px; flex-basis: 25%;">
    <!-- Third column content -->
  </div>
</div>

The above code defines a Split.js container with three columns, each with a minimum width of 300 pixels and a flex-basis of 25%, 50%, and 25%, respectively. You can adjust these values based on your requirements.

To make the second column collapse when the third column is expanded, you can add an event listener to the third column's expand button and trigger a collapse on the second column.

const split = Split(['.split-item'], {
  sizes: [25, 50, 25],
  minSize: [300, 300, 300]
});

const thirdColumnExpandButton = document.querySelector('.third-column-expand-button');
thirdColumnExpandButton.addEventListener('click', () => {
  split.collapse(1);
});

The above code initializes the Split.js container and defines the column sizes and minimum sizes. It also adds an event listener to the third column's expand button and triggers a collapse on the second column when the button is clicked.

With the above code, when the third column is expanded, the second column will collapse to its minimum width, and when the second column reaches its minimum size, the first column will collapse, and the second column will take its place.

To know more about UI UX, It's recommended to join UI UX Design Certification Course today.