Instagram Direct collapsible sidebar by vufly

/* ==UserStyle==
@name         Instagram Direct collapsible sidebar
@version      20220606.12.12
@namespace    userstyles.world/user/vufly
@description  A collapsible sidebar for Instagram direct when your browser window width is less than 700px. Expand on hover.
@author       vufly
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://www.instagram.com/direct") {
:root {
	--sidebar-hover-delay: .3s;
	--sidebar-out-delay: .1s;
	--sidebar-duration: .5s;
	--sidebar-transition-function: cubic-bezier(.16, 1.08, .38, .98);
}

@media only screen and (max-width: 700px) {
	/* Left sidebar */
	._aa5c {
		width: 100px !important;
		position: absolute !important;
		z-index: 3;
		left: 0;
		top: 6px;
		transition: width .5s var(--sidebar-transition-function) var(--sidebar-out-delay);
	}

	._aa5c ._aa4j {
		height: 54px !important;
	}

	._aa5c:hover {
		width: 350px !important;
		transition: width var(--sidebar-duration) var(--sidebar-transition-function) var(--sidebar-hover-delay);
	}

	/* Switch account label */
	._aa5c:not(:hover) ._aa4j {
		padding: 0 15px !important;
	}
	._aa5c:not(:hover) ._abyj {
		transform: scaleX(0);
	}
	._aa5c:not(:hover) ._aa4m._aa4n {
		flex-basis: 0;
	}
	._aa5c:not(:hover) ._aa4k {
		justify-content: flex-end;
	}

	._aa5c ._aa4j,
	._aa5c ._abyj,
	._aa5c ._aa4m._aa4n,
	._aa5c ._aa4k,
	._aa5c ._aa4o {
		transition-duration: var(--sidebar-duration);
		transition-timing-function: var(--sidebar-transition-function);
		transition-delay: var(--sidebar-out-delay);
	}

	._aa5c:hover ._aa4j,
	._aa5c:hover ._abyj,
	._aa5c:hover ._aa4m._aa4n,
	._aa5c:hover ._aa4k,
	._aa5c:hover ._aa4o {
		transition-delay: var(--sidebar-hover-delay);
	}

	._aa5c ._aa4j {
		transition-property: padding;
	}
	._aa5c ._abyj {
		transition-property: transform;
	}
	._aa5c ._aa4m._aa4n {
		transition-property: flex-basis;
	}
	._aa5c ._aa4k {
		transition-property: justify-content;
	}

	._aa5c ._ab8w._ab94._ab99._ab9f._ab9k._ab9p._abaj._abbz._ab9_._abcm {
		display: none;
	}

	/* Main content*/
	._ab8s._ab8w._ab94._ab99._ab9f._ab9m._ab9o {
		padding-left: 100px;
	}
	._a3gq ._ab61 {
		width: calc(100% - 100px);
	}
}

/* Scrollbar */
._9dls {
	overflow-y: unset !important;
}

._abyk,
._ab5z._ab5_ {
	scrollbar-width: thin;
}

._abyk::-webkit-scrollbar,
._ab5z._ab5_::-webkit-scrollbar {
	width: 11px;
	height: 11px;
}
}