From 20e007f45865188edb75cba7b20297f2522a6740 Mon Sep 17 00:00:00 2001
From: Ashraf Alhaj <87209980+ISNewton@users.noreply.github.com>
Date: Thu, 9 May 2024 14:20:21 +0200
Subject: [PATCH] Show headless sidebar in all window sizes (#6605)

* Show headless sidebar in all window sizes

* Update headlessdoc.js

---------

Co-authored-by: Melloware <mellowaredev@gmail.com>
---
 components/doc/sidebar/headlessdoc.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/doc/sidebar/headlessdoc.js b/components/doc/sidebar/headlessdoc.js
index d4e86effd3..8101676d41 100644
--- a/components/doc/sidebar/headlessdoc.js
+++ b/components/doc/sidebar/headlessdoc.js
@@ -21,7 +21,7 @@ export function HeadlessDoc(props) {
     onHide={() => setVisible(false)}
     content={({ closeIconRef, hide }) => (
         <div className="min-h-screen flex relative lg:static surface-ground">
-            <div id="app-sidebar-2" className="surface-section h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
+            <div id="app-sidebar-2" className="surface-section h-screen block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
                 <div className="flex flex-column h-full">
                     <div className="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
                         <span className="inline-flex align-items-center gap-2">
@@ -215,7 +215,7 @@ export default function HeadlessDemo() {
                 onHide={() => setVisible(false)}
                 content={({ closeIconRef, hide }) => (
                     <div className="min-h-screen flex relative lg:static surface-ground">
-                        <div id="app-sidebar-2" className="surface-section h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
+                        <div id="app-sidebar-2" className="surface-section h-screen block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
                             <div className="flex flex-column h-full">
                                 <div className="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
                                     <span className="inline-flex align-items-center gap-2">
@@ -422,7 +422,7 @@ export default function HeadlessDemo() {
                 onHide={() => setVisible(false)}
                 content={({ closeIconRef, hide }) => (
                     <div className="min-h-screen flex relative lg:static surface-ground">
-                        <div id="app-sidebar-2" className="surface-section h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
+                        <div id="app-sidebar-2" className="surface-section h-screen block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
                             <div className="flex flex-column h-full">
                                 <div className="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
                                     <span className="inline-flex align-items-center gap-2">
@@ -622,7 +622,7 @@ export default function HeadlessDemo() {
                     onHide={() => setVisible(false)}
                     content={({ closeIconRef, hide }) => (
                         <div className="min-h-screen flex relative lg:static surface-ground">
-                            <div id="app-sidebar-2" className="surface-section h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
+                            <div id="app-sidebar-2" className="surface-section h-screen block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
                                 <div className="flex flex-column h-full">
                                     <div className="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
                                         <span className="inline-flex align-items-center gap-2">