Fix responsiveness

docs/src/components/DocsHeader.tsx

@@ -12,7 +12,7 @@ export function DocsHeader(props: DocsHeaderProps) {
 
   return (
     <>
-      <div className="border-b flex items-center justify-between" docs-header>
+      <div className="border-b flex items-center justify-between">
         <div className="text-right flex justify-end py-3 px-6">
           <a href="/" className="flex items-center justify-end text-xl font-bold">
             <img src="/driver-head.svg" alt="Astro" className="w-10 h-10 mr-2" />

docs/src/components/Sidebar.astro

@@ -9,7 +9,7 @@ export interface Props {
 
 const { activePath, groupedGuides, activeGuideTitle } = Astro.props;
 ---
-<div class="hidden md:block w-[200px] lg:w-[350px] border-r border-gray-200 text-right min-h-screen flex-shrink-0">
+<div id="docs-sidebar" class="hidden md:block w-[200px] lg:w-[350px] border-r border-gray-200 text-right min-h-screen flex-shrink-0">
   <div class="relative sh:sticky top-0">
     <div class="justify-end flex pt-10 pb-5 px-5">
       <a href="/" class="block items-center justify-end mb-2">

docs/src/content/guides/animated-tour.mdx

@@ -22,7 +22,7 @@ The following example shows how to create a simple tour with a few steps. Click
     { element: '.line:nth-child(4) span:nth-child(7)', popover: { title: 'Create Driver', description: 'Simply call the driver function to create a driver.js instance', side: "left", align: 'start' }},
     { element: '.line:nth-child(17)', popover: { title: 'Start Tour', description: 'Call the drive method to start the tour and your tour will be started.', side: "top", align: 'start' }},
     { element: '.line:nth-child(5)', popover: { title: 'Hide Progress', description: 'Progress shown in the bottom left is hidden by default. You can make driver show/hide the progress using this option.', side: "top", align: 'start' }},
-    { element: 'a[href="/docs/configuration"]', popover: { title: 'More Configuration', description: 'Look at this page for all the configuration options you can pass.', side: "right", align: 'start' }},
+    { element: '#docs-sidebar a[href="/docs/configuration"]', popover: { title: 'More Configuration', description: 'Look at this page for all the configuration options you can pass.', side: "right", align: 'start' }},
     { popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }
   ]}
   id={"tour-example"}

docs/src/content/guides/static-tour.mdx

@@ -22,7 +22,7 @@ You can simply set `animate` option to `false` to make the tour static. This wil
     { element: '.line:nth-child(4) span:nth-child(7)', popover: { title: 'Create Driver', description: 'Simply call the driver function to create a driver.js instance', side: "left", align: 'start' }},
     { element: '.line:nth-child(19)', popover: { title: 'Start Tour', description: 'Call the drive method to start the tour and your tour will be started.', side: "top", align: 'start' }},
     { element: '.line:nth-child(6)', popover: { title: 'Hide Progress', description: 'Progress shown in the bottom left is hidden by default. You can make driver show/hide the progress using this option.', side: "top", align: 'start' }},
-    { element: 'a[href="/docs/configuration"]', popover: { title: 'More Configuration', description: 'Look at this page for all the configuration options you can pass.', side: "right", align: 'start' }},
+    { element: '#docs-sidebar a[href="/docs/configuration"]', popover: { title: 'More Configuration', description: 'Look at this page for all the configuration options you can pass.', side: "right", align: 'start' }},
     { popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }
   ]}
   id={"tour-example"}
@@ -42,7 +42,7 @@ You can simply set `animate` option to `false` to make the tour static. This wil
       { element: 'code .line:nth-child(2)', popover: { title: 'Importing CSS', description: 'Import the CSS which gives you the default styling for popover and overlay.', side: "bottom", align: 'start' }},
       { element: 'code .line:nth-child(4) span:nth-child(7)', popover: { title: 'Create Driver', description: 'Simply call the driver function to create a driver.js instance', side: "left", align: 'start' }},
       { element: 'code .line:nth-child(18)', popover: { title: 'Start Tour', description: 'Call the drive method to start the tour and your tour will be started.', side: "top", align: 'start' }},
-      { element: 'a[href="/docs/configuration"]', popover: { title: 'More Configuration', description: 'Look at this page for all the configuration options you can pass.', side: "right", align: 'start' }},
+      { element: '#docs-sidebar a[href="/docs/configuration"]', popover: { title: 'More Configuration', description: 'Look at this page for all the configuration options you can pass.', side: "right", align: 'start' }},
       { popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }
     ]
   });