xmc/modular/collapsing_sidebar/dynamic_+_compact-er_support.css

@media (width < 1300px) {
  div[class^="sidebar-"]:not(:has(> [class^="side-"])) > nav {
    width: unset;
    z-index: 9;
  }

  div[class^="sidebar-"]:not(:has(> [class^="side-"])) {
    width: 56px;
  }
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover {
    width: 240px;
  }

  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    > [class^="panels-"]
    > *:not(:last-child),
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    > [class^="panels-"]
    > [class^="container-"]:last-child
    > [class^="avatarWrapper-"]
    > [class^="nameTag-"],
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    > [class^="panels-"]
    > [class^="container-"]:last-child
    > div:last-child {
    display: none;
  }

  div[class^="sidebar-"]:not(:has(> [class^="side-"]))
    > [class^="panels-"]
    > [class^="container-"]:last-child {
    width: 224px;
    position: relative;
    bottom: 0;
  }
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    > [class^="panels-"]
    > [class^="container-"]:last-child {
    width: 40px;
  }

  div[class^="sidebar-"]:not(:has(> [class^="side-"]))
    > nav
    > [class^="scroller-"] {
    margin-top: 32px;
  }

  div[class^="sidebar-"]:not(:has(> [class^="side-"]))
    > nav[class^="container-"]
    > [class^="container-"][class*="clickable-"],
  div[class^="sidebar-"]:not(:has(> [class^="side-"]))
    > nav[class^="privateChannels-"]
    > [class^="searchBar-"] {
    position: fixed;
    top: 0;
    width: 240px;
    z-index: 101;
    background: var(--background-secondary);
    padding: 0;
  }

  div[class^="sidebar-"]:not(:has(> [class^="side-"]))
    > nav[class^="container-"]
    > [class^="container-"][class*="clickable-"]
    > [class^="animatedContainer-"] {
    height: 32px !important;
  }

  div[class^="sidebar-"]:not(:has(> [class^="side-"]))
    > nav[class^="container-"]
    > [class^="container-"][class*="clickable-"]
    > [class^="animatedContainer-"]
    > [class^="bannerImage-"] {
    height: 32px !important;
  }
  div[class^="sidebar-"]:not(:has(> [class^="side-"]))
    > nav[class^="container-"]
    > [class^="container-"][class*="clickable-"]
    > [class^="animatedContainer-"]
    > [class^="bannerImage-"]:after {
    content: "";
    height: 32px !important;
    width: 240px;
    top: 0;
    left: 0;
    position: absolute;
    background: linear-gradient(
      0deg,
      var(--background-secondary) 5%,
      transparent 100%
    );
  }

  div[class^="sidebar-"]:not(:has(> [class^="side-"]))
    > nav[class^="container-"]
    > [class^="container-"][class*="clickable-"]
    > [class^="animatedContainer-"]
    [class^="bannerImg-"] {
    top: -67px;
    position: relative;
  }

  div[class^="sidebar-"]:not(:has(> [class^="side-"]))
    > nav[class^="container-"]
    > [class^="scroller-"]
    > ul
    > div[style="height: 84px;"] {
    height: 0 !important;
  }

  div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover
    ~ [class^="chat-"]
    [class^="chatContent-"]
    > form
    > [class^="channelTextArea"] {
    margin-left: 0;
  }

  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    ~ [class^="chat-"]
    [class^="title-"] {
    margin-left: 184px;
    width: calc(100% - 184px);
  }
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover
    ~ [class^="chat-"]
    [class^="title-"] {
    margin-left: 0;
  }

  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="channelInfo-"],
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="containerDefault-"][class*="selected-"]
    [class^="iconVisibility-"]
    > [class^="content-"]
    > [class^="children-"],
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="containerDefault-"]
    [class^="iconVisibility-"]:not([class*="typeThread-"])
    > [class^="content-"]
    > [class^="mainContent-"]
    > [class^="name-"],
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="containerDefault-"]
    > [class^="iconVisibility-"][class*="clickable-"],
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="containerDefault-"]
    [class^="voiceUser-"]
    > [class^="content-"]
    > [class^="icons-"],
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="containerDefault-"]
    [class^="voiceUser-"]
    > [class^="content-"]
    > [class*="username-"] {
    display: none;
  }

  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    [class^="containerDefault-"]
    [class^="iconVisibility-"][class*="typeThread-"]
    > [class^="content-"]
    > [class^="mainContent-"]
    > [class^="name-"] {
    margin-left: 20px;
  }

  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    > [class^="privateChannels-"]
    ul[class^="content-"]
    > [class*="privateChannelsHeaderContainer-"] {
    height: 0;
  }
  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    > [class^="privateChannels-"]
    ul[class^="content-"]
    > [class*="privateChannelsHeaderContainer-"]
    > * {
    display: none;
  }

  div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
    .channel-typing-indicator {
    display: none;
  }
}