From b2a04c487e83c9efcf66fc54016e0c7e3e352696 Mon Sep 17 00:00:00 2001
From: Ashraf Alhaj <ashrfalhag.11@gmail.com>
Date: Thu, 9 May 2024 13:38:03 +0200
Subject: [PATCH 1/2] Show headless sidebar in all window sizes

---
 components/doc/sidebar/headlessdoc.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/doc/sidebar/headlessdoc.js b/components/doc/sidebar/headlessdoc.js
index d4e86effd3..ed29fa25c1 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">

From e0a4953be7bc15f5e7599d6529ce268128a7743e Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Thu, 9 May 2024 08:19:43 -0400
Subject: [PATCH 2/2] Update headlessdoc.js

---
 components/doc/sidebar/headlessdoc.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/doc/sidebar/headlessdoc.js b/components/doc/sidebar/headlessdoc.js
index ed29fa25c1..8101676d41 100644
--- a/components/doc/sidebar/headlessdoc.js
+++ b/components/doc/sidebar/headlessdoc.js
@@ -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">