How can we hide sidebars for all document at once

[Mubasher]

HI there
we has an option to disable side bar but it is only hidding the fields and the left side space is left empty how to hide it completely for all document types

LIKE THIS

[shubham2025]

hello @Mubasher go to list view and follow ss

[shubham2025]

click on toggle sidebar

[Mubasher]

i know this one i want to hide for all users wy we have to press toggle everytime

[Mubasher]

we can also hide by clickng this but this is not proper way @NCP

[sione]

We create a custom css and loaded in hooks of our custom app to hide

[Mubasher]

but this is also hiding the dashboard sidebar right ???

[sione]

Yes we wanted to hide the dashborad, you can change it to what you want, here is the css that hide and other stuff too

/* Hide sidebar and icons*/

span.sidebar-toggle-icon,
span.list-liked-by-me,
.sidebar-toggle-btn,
span.like-action,
.menu-btn-group,
.custom-btn-group,
.col-lg-2.layout-side-section,
span.comment-count.d-flex.align-items-center {
  display: none !important;
}

[Mubasher]

actually in the erp the css class of doctype and dashboard sidebar is same so if i hide one both are hidden thats the main problem

[rs115199789]

just create a custom script,

for eg. I freezed the side bar so i can view the attachments tab while scroll down, you can use and modify this script to hide the side bar.

frappe.ui.form.on('Purchase Invoice', {
onload_post_render: function(frm) {
    if (window.innerWidth > 992) {
        var targetDiv = $(".col-lg-2.layout-side-section");
        targetDiv.css({
            position: 'fixed',
            zIndex: '1020',
        });

        $('.layout-main-section-wrapper').css({
            marginLeft: "16.70%"
        });
    }
}
});

HIDE SIDE BAR

    frappe.ui.form.on('Purchase Invoice', {
    onload_post_render: function(frm) {
    if (window.innerWidth > 992) {
        var targetDiv = $(".col-lg-2.layout-side-section");
        
        // Hide the sidebar
        targetDiv.css('display', 'none');
        
        // Adjust the main content width to fill the space
        $('.layout-main-section-wrapper').css({
            marginLeft: "0"
        });
    }
}
});