Whatsapp Focus by webenadam

/* ==UserStyle==
@name         Whatsapp Focus
@version      20240407.16.07
@namespace    https://userstyles.world/user/webenadam
@description  Hides the sidebar until hovered.
@author       webenadam
@license      No License
==/UserStyle== */

@-moz-document domain("whatsapp.com") {
/* remove right empty gap */
html, ._9dls {
    overflow-y:hidden!important;
}

/* Target the main sidebar with updated class names */
._aigv._aigw {
    max-width: 75px !important;
    /* Shrink width to 75px using max-width */
    transition: max-width 0.3s ease-in-out;
    /* Smooth transition for max-width change */
}

/* Expand the sidebar to its original width on hover */
._aigv._aigw:hover {
    max-width: 320px !important;
    /* Adjust this value based on the original sidebar width */
}

/* Ensure smooth transitions for elements inside the sidebar that might be affected */
._aigv._aigw * {
    transition: opacity 0.3s ease-in-out;
}

/* Optionally, hide elements inside the sidebar to prevent overflow or layout issues */
._aigv._aigw *:not(.badge) {
    opacity: 0;
}

/* Show elements when the sidebar is hovered */
._aigv._aigw:hover * {
    opacity: 1;
}

/* Adjust the rule for the "new message" badge if necessary */
._aigv._aigw .badge {
    /* You might need to adjust this selector to target the badge specifically */
    opacity: 1;
    /* Keep the badge always visible */
}
}