diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 208e8f723f407..9e3ad66753133 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1631,15 +1631,18 @@ details.undocumented[open] > summary::before { display: none; } + /* We do NOT hide this element so that alternative device readers still have this information + available. */ .sidebar-elems { position: fixed; z-index: 1; - left: 0; top: 45px; bottom: 0; + width: 246px; + /* We move the sidebar to the left by its own width so it doesn't appear. */ + left: -246px; overflow-y: auto; border-right: 1px solid; - display: none; } .sidebar > .block.version { @@ -1727,8 +1730,7 @@ details.undocumented[open] > summary::before { } .show-it { - display: block; - width: 246px; + left: 0; } .show-it > .block.items { diff --git a/src/test/rustdoc-gui/sidebar-mobile.goml b/src/test/rustdoc-gui/sidebar-mobile.goml new file mode 100644 index 0000000000000..9a1442e48a9ea --- /dev/null +++ b/src/test/rustdoc-gui/sidebar-mobile.goml @@ -0,0 +1,10 @@ +// This test ensure that the sidebar isn't "hidden" on mobile but instead moved out of the viewport. +// This is especially important for devices for "text-first" content (like for users with +// sight issues). +goto: file://|DOC_PATH|/test_docs/struct.Foo.html +// Switching to "mobile view" by reducing the width to 600px. +size: (600, 600) +assert-css: (".sidebar-elems", {"display": "block", "left": "-246px"}) +// Opening the sidebar menu. +click: ".sidebar-menu" +assert-css: (".sidebar-elems", {"display": "block", "left": "0px"})