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 {
    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^="linkTop_"]
    > [class^="children_"],
  div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
    [class^="containerDefault_"]
    [class^="iconVisibility_"][class*="modeSelected_"]
    [class^="linkTop_"]
    > [class^="children_"],
  div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
    [class^="iconVisibility_"]:not([class*="typeThread_"])
    [class^="linkTop_"]
    > [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^="linkTop_"]
    > [class^="icons_"],
  div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
    [class^="containerDefault_"]
    [class^="voiceUser_"]
    [class^="linkTop_"]
    > [class*="username_"] {
    display: none;
  }

  div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
    [class^="containerDefault_"]
    [class^="iconVisibility_"][class*="typeThread_"]
    [class^="linkTop_"]
    > [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,
  div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
    [class^="devBanner_"] {
    display: none;
  }

  div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
    > nav[class^="container_"]
    > [class^="scroller_"]
    > ul
    > [class*="containerWithMargin_"] {
    display: none;
  }

  div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
    > nav[class^="container_"]
    > [class^="container_"][class*="bottom_"]
    > [class^="containerPadding_"]
    > [class^="bar_"] {
    width: 32px !important;
  }

  div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
    > nav[class^="container_"]
    > [class^="container_"][class*="bottom_"]
    > [class^="containerPadding_"]
    > [class^="bar_"]
    > svg {
    display: none;
  }

  div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
    [class*="unreadBar_"]
    > span,
  div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
    > nav[class^="container_"]
    > [class^="container_"][class*="bottom_"]
    > [class^="containerPadding_"]
    > [class^="bar_"]
    > [class*="barText_"] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    margin-left: 8px;
  }

  div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
    [class^="voiceChannelsButton_"] {
    display: none;
  }
}