@cypress-design/react-docmenu 0.5.4 → 0.7.0

package/.turbo/turbo-build.log

@@ -2,5 +2,5 @@ $ yarn build:module && yarn build:types
 $ rollup -c ./rollup.config.mjs
 
 ./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
-created ./dist/index.umd.js, ./dist/index.es.mjs in 11.7s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 17.8s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @cypress-design/react-docmenu
 
+## 0.7.0
+
+### Minor Changes
+
+- [#388](https://github.com/cypress-io/cypress-design/pull/388) [`7839c67`](https://github.com/cypress-io/cypress-design/commit/7839c670d8a83f8339db1a5d4395bd0dd5eaf987) Thanks [@elevatebart](https://github.com/elevatebart)! - make docmenu scroll to active path if necessary
+
+## 0.6.0
+
+### Minor Changes
+
+- [`bb4e507`](https://github.com/cypress-io/cypress-design/commit/bb4e507ca14e57e3400f0444446e1b3a0eb598ad) Thanks [@elevatebart](https://github.com/elevatebart)! - add a test and the names of components in dev tools
+
+### Patch Changes
+
+- [#387](https://github.com/cypress-io/cypress-design/pull/387) [`05b67c5`](https://github.com/cypress-io/cypress-design/commit/05b67c5389df1c0619d2f01e2b36fb5bd6bb30b9) Thanks [@elevatebart](https://github.com/elevatebart)! - when activePath changes, expand sections that contain the newly activated element
+
 ## 0.5.4
 
 ### Patch Changes

package/DocMenuReact.cy.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react'
 import { mount } from 'cypress/react18'
 import DocMenu from './index'
-import assertions from '../assertions'
+import assertions, { BIG_ITEMS_SET } from '../assertions'
 import { NavGroup, NavItemLink } from '../constants'
 
 describe('<DocMenu/>', () => {
@@ -57,75 +57,7 @@ describe('<DocMenu/>', () => {
                   {children}
                 </div>
               )}
-              items={[
-                {
-                  href: '/fooTop',
-                  label: 'Foo Top',
-                },
-                {
-                  href: '/test',
-                  label: 'Getting started',
-                },
-                {
-                  href: '/faaz',
-                  label:
-                    'lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,',
-                },
-                {
-                  label: 'Baaaaaaz',
-                  items: [
-                    {
-                      label: 'Bar',
-                      items: [
-                        {
-                          href: '/foo',
-                          label: 'Foo',
-                        },
-                        {
-                          href: '/test',
-                          label: 'Getting started',
-                        },
-                      ],
-                    },
-                    {
-                      label: 'Code',
-                      collapsed: true,
-                      items: [
-                        {
-                          href: '/faa',
-                          label: 'sasassa',
-                        },
-                        {
-                          href: '/faa1',
-                          label: 'sasassa2',
-                        },
-                        {
-                          href: '/faa2',
-                          label: 'sasassa3',
-                        },
-                        {
-                          href: '/faa3',
-                          label: 'sasassa4',
-                        },
-                        {
-                          href: '/faa4',
-                          label:
-                            'lorem ipsum dolor sit amet consectetur adipisicing elit',
-                        },
-                        {
-                          href: '/faa5',
-                          label: 'sasassa5',
-                        },
-                        {
-                          href: '/faa6',
-                          label:
-                            'lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos',
-                        },
-                      ],
-                    },
-                  ],
-                },
-              ]}
+              items={BIG_ITEMS_SET}
             />
           </div>
         )
@@ -169,8 +101,89 @@ describe('<DocMenu/>', () => {
       </div>,
     )
   }
-  assertions(mountStory)
-})
 
-// pseudo text
-// lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos
+  assertions(mountStory, () => {
+    const SUT = () => {
+      const [pathState, setPathState] = React.useState<string>('/foo')
+      return (
+        <>
+          <button onClick={() => setPathState('/kephren')}>
+            Set path to /kephren
+          </button>
+          <DocMenu
+            items={[
+              {
+                label: 'Section 1',
+                items: [
+                  { href: '/foo', label: 'Foo' },
+                  {
+                    label: 'Subsection',
+                    items: [{ href: '/sub', label: 'Sub' }],
+                  },
+                ],
+              },
+              {
+                label: 'Pyramid',
+                items: [{ href: '/kephren', label: 'Kephren' }],
+                collapsed: true,
+              },
+            ]}
+            LinkComponent={({ href, children, style, ...props }) => (
+              <button
+                onClick={() => setPathState(href)}
+                {...props}
+                style={{ ...style, textAlign: 'left' }}
+              >
+                {children}
+              </button>
+            )}
+            activePath={pathState}
+            collapsible
+          />
+        </>
+      )
+    }
+    mount(<SUT />)
+  })
+
+  it('scrolls the active item into view', { viewportHeight: 200 }, () => {
+    const SUT = () => {
+      const [pathState, setPathState] = React.useState<string>('/foo')
+      return (
+        <>
+          <button
+            onClick={() => setPathState('/faa6')}
+            className="p-2 m-2 rounded bg-gray-100 border border-gray-300"
+          >
+            Set path to <code>/faa6</code>
+          </button>
+          <DocMenu
+            items={BIG_ITEMS_SET}
+            LinkComponent={({ href, children, style, ...props }) => (
+              <button
+                onClick={() => setPathState(href)}
+                {...props}
+                style={{ ...style, textAlign: 'left' }}
+              >
+                {children}
+              </button>
+            )}
+            activePath={pathState}
+            collapsible
+          />
+        </>
+      )
+    }
+    mount(<SUT />)
+
+    cy.findByText('Code').click()
+    cy.contains('Set path to').click()
+    cy.contains('Quisquam, quos').then(($el) => {
+      const windowInnerHeight = Cypress.config(`viewportHeight`)
+
+      const rect = ($el?.[0] as any).getBoundingClientRect()
+
+      expect(windowInnerHeight).to.be.greaterThan(rect.top)
+    })
+  })
+})

package/_DocGroup.tsx

@@ -63,6 +63,12 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
       React.useState<NodeJS.Timeout>()
     const $groupElements = React.useRef<DocGroupElementsForward>(null)
 
+    React.useEffect(() => {
+      if (hasActiveItemRecursivelyMemo && !open) {
+        setOpen(true)
+      }
+    }, [hasActiveItemRecursivelyMemo, activePath, open])
+
     const toggleMenu = (localOpen: boolean) => {
       if (!collapsible || markerIsMoving) return
       setMarkerIsMoving(true)
@@ -197,6 +203,8 @@ export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
   },
 )
 
+DocGroup.displayName = 'DocMenuDocGroup'
+
 export interface DocGroupElementsProps
   extends React.HTMLAttributes<HTMLUListElement> {
   items: (NavGroup | NavItemLink)[]
@@ -312,3 +320,5 @@ export const DocGroupElements = React.forwardRef<
     )
   },
 )
+
+DocGroupElements.displayName = 'DocMenuDocGroupElements'

package/_DocLink.tsx

@@ -30,22 +30,16 @@ export interface DocLinkForward {
 }
 
 export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
-  (
-    {
-      item: { label, ...itemRest },
-      depth,
-      markerIsMoving,
-      context,
-      onActive,
-      LinkComponent,
-    },
-    ref,
-  ) => {
+  ({ item, depth, markerIsMoving, context, onActive, LinkComponent }, ref) => {
     const activeLIRef = React.useRef<HTMLLIElement>(null)
 
-    const { collapsible, activePath } = context
+    const active = React.useMemo(
+      () => item.href === context.activePath,
+      [item.href, context.activePath],
+    )
 
-    const active = itemRest.href === activePath
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { label, ...itemRest } = item
 
     const setActiveMarkerPosition = () => {
       if (active) {
@@ -62,6 +56,27 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
     // send the top position to the parent
     React.useEffect(setActiveMarkerPosition, [onActive, active])
 
+    React.useEffect(() => {
+      if (active && activeLIRef.current) {
+        // if active check if the item is visible in the
+        // viewport and scrollIntoView if not
+        const rect = activeLIRef.current.getBoundingClientRect()
+
+        if (rect.top > 0 && rect.bottom < window.innerHeight) {
+          return
+        }
+
+        if (rect.left > 0 && rect.right < window.innerWidth) {
+          return
+        }
+
+        activeLIRef.current.scrollIntoView({
+          block: 'nearest',
+          inline: 'nearest',
+        })
+      }
+    }, [active])
+
     React.useImperativeHandle(ref, () => ({
       setActiveMarkerPosition,
     }))
@@ -86,15 +101,18 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
                 'left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full',
                 {
                   hidden: !markerIsMoving || !active,
-                  'group-hover:block bg-gray-300': !active && collapsible,
+                  'group-hover:block bg-gray-300':
+                    !active && context.collapsible,
                   'bg-indigo-500 dark:bg-indigo-400': active && markerIsMoving,
                 },
               )}
             />
           ) : null}
-          {label}
+          {item.label}
         </LinkComponent>
       </li>
     )
   },
 )
+
+DocLink.displayName = 'DocMenuDocLink'

package/dist/_DocGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_DocGroup.d.ts","sourceRoot":"./","sources":["_DocGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,WAAW,EAEjB,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAEL,KAAK,OAAO,EAEZ,KAAK,iBAAiB,EACvB,MAAM,YAAY,CAAA;AAEnB,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,QAAQ,CAAA;IACf,OAAO,EAAE,OAAO,CAAA;IAChB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,oBAAoB,EAAE,MAAM,IAAI,CAAA;IAChC,cAAc,EAAE,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,MAAM,WAAW,eAAe;IAC9B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAcD,eAAO,MAAM,QAAQ,uFA4JpB,CAAA;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9C,KAAK,EAAE,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE,CAAA;IACjC,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,cAAc,EAAE,OAAO,CAAA;IACvB,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,iBAAiB,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,uBAAuB,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAClD;AAED,eAAO,MAAM,gBAAgB,uGAkG5B,CAAA"}
+{"version":3,"file":"_DocGroup.d.ts","sourceRoot":"./","sources":["_DocGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,WAAW,EAEjB,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAEL,KAAK,OAAO,EAEZ,KAAK,iBAAiB,EACvB,MAAM,YAAY,CAAA;AAEnB,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,QAAQ,CAAA;IACf,OAAO,EAAE,OAAO,CAAA;IAChB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,oBAAoB,EAAE,MAAM,IAAI,CAAA;IAChC,cAAc,EAAE,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,MAAM,WAAW,eAAe;IAC9B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAcD,eAAO,MAAM,QAAQ,uFAkKpB,CAAA;AAID,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9C,KAAK,EAAE,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE,CAAA;IACjC,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,cAAc,EAAE,OAAO,CAAA;IACvB,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,iBAAiB,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,uBAAuB,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAClD;AAED,eAAO,MAAM,gBAAgB,uGAkG5B,CAAA"}

package/dist/_DocLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_DocLink.d.ts","sourceRoot":"./","sources":["_DocLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAE/D,MAAM,WAAW,OAAO;IACtB,iBAAiB,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAA;IACpD,WAAW,EAAE,OAAO,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAA;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAC,CAAA;AAEF,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,cAAc,EAAE,OAAO,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACzD,aAAa,EAAE,iBAAiB,CAAA;CACjC;AAED,MAAM,WAAW,cAAc;IAC7B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,OAAO,qFAoEnB,CAAA"}
+{"version":3,"file":"_DocLink.d.ts","sourceRoot":"./","sources":["_DocLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAE/D,MAAM,WAAW,OAAO;IACtB,iBAAiB,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAA;IACpD,WAAW,EAAE,OAAO,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAA;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAC,CAAA;AAEF,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,cAAc,EAAE,OAAO,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACzD,aAAa,EAAE,iBAAiB,CAAA;CACjC;AAED,MAAM,WAAW,cAAc;IAC7B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,OAAO,qFAoFnB,CAAA"}

package/dist/index.es.mjs

@@ -162,10 +162,11 @@ const classes = {
 };
 
 var DocLink = React.forwardRef(function (_a, ref) {
-    var _b = _a.item, label = _b.label, itemRest = __rest$1(_b, ["label"]), depth = _a.depth, markerIsMoving = _a.markerIsMoving, context = _a.context, onActive = _a.onActive, LinkComponent = _a.LinkComponent;
+    var item = _a.item, depth = _a.depth, markerIsMoving = _a.markerIsMoving, context = _a.context, onActive = _a.onActive, LinkComponent = _a.LinkComponent;
     var activeLIRef = React.useRef(null);
-    var collapsible = context.collapsible, activePath = context.activePath;
-    var active = itemRest.href === activePath;
+    var active = React.useMemo(function () { return item.href === context.activePath; }, [item.href, context.activePath]);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    item.label; var itemRest = __rest$1(item, ["label"]);
     var setActiveMarkerPosition = function () {
         var _a;
         if (active) {
@@ -179,6 +180,23 @@ var DocLink = React.forwardRef(function (_a, ref) {
     // on mount, if the item is active,
     // send the top position to the parent
     React.useEffect(setActiveMarkerPosition, [onActive, active]);
+    React.useEffect(function () {
+        if (active && activeLIRef.current) {
+            // if active check if the item is visible in the
+            // viewport and scrollIntoView if not
+            var rect = activeLIRef.current.getBoundingClientRect();
+            if (rect.top > 0 && rect.bottom < window.innerHeight) {
+                return;
+            }
+            if (rect.left > 0 && rect.right < window.innerWidth) {
+                return;
+            }
+            activeLIRef.current.scrollIntoView({
+                block: 'nearest',
+                inline: 'nearest',
+            });
+        }
+    }, [active]);
     React.useImperativeHandle(ref, function () { return ({
         setActiveMarkerPosition: setActiveMarkerPosition,
     }); });
@@ -193,11 +211,12 @@ var DocLink = React.forwardRef(function (_a, ref) {
             } }),
             depth >= 0 ? (React.createElement("div", { className: clsx('left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full', {
                     hidden: !markerIsMoving || !active,
-                    'group-hover:block bg-gray-300': !active && collapsible,
+                    'group-hover:block bg-gray-300': !active && context.collapsible,
                     'bg-indigo-500 dark:bg-indigo-400': active && markerIsMoving,
                 }) })) : null,
-            label)));
+            item.label)));
 });
+DocLink.displayName = 'DocMenuDocLink';
 
 var hasActiveItemRecursively = function (items, localActivePath) {
     return items.some(function (item) {
@@ -217,6 +236,11 @@ var DocGroup = React.forwardRef(function (_a, ref) {
     var _e = React.useState(!group.collapsed), open = _e[0], setOpen = _e[1];
     var _f = React.useState(), markerIsMovingTimeout = _f[0], setMarkerIsMovingTimeout = _f[1];
     var $groupElements = React.useRef(null);
+    React.useEffect(function () {
+        if (hasActiveItemRecursivelyMemo && !open) {
+            setOpen(true);
+        }
+    }, [hasActiveItemRecursivelyMemo, activePath, open]);
     var toggleMenu = function (localOpen) {
         if (!collapsible || markerIsMoving)
             return;
@@ -306,6 +330,7 @@ var DocGroup = React.forwardRef(function (_a, ref) {
             open && collapsible && depth === 0 ? (React.createElement("div", { className: classes.openListBorderLeft })) : null,
             React.createElement(DocGroupElements, { ref: $groupElements, className: "overflow-hidden", items: group.items, depth: depth, context: context, markerIsMoving: markerIsMoving, onActivePosition: setActivePosition, updateMarkerPosition: onUpdateMarkerPosition, LinkComponent: LinkComponent }))));
 });
+DocGroup.displayName = 'DocMenuDocGroup';
 var DocGroupElements = React.forwardRef(function (_a, ref) {
     var items = _a.items, _b = _a.depth, depth = _b === void 0 ? 0 : _b, onActivePosition = _a.onActivePosition, updateMarkerPosition = _a.updateMarkerPosition, markerIsMoving = _a.markerIsMoving, LinkComponent = _a.LinkComponent, className = _a.className, context = _a.context, rest = __rest$1(_a, ["items", "depth", "onActivePosition", "updateMarkerPosition", "markerIsMoving", "LinkComponent", "className", "context"]);
     var $groups = React.useRef([]);
@@ -350,6 +375,7 @@ var DocGroupElements = React.forwardRef(function (_a, ref) {
             }, LinkComponent: LinkComponent }));
     })));
 });
+DocGroupElements.displayName = 'DocMenuDocGroupElements';
 
 var DocMenu = function (_a) {
     var items = _a.items, _b = _a.activePath, activePath = _b === void 0 ? '<unknown>' : _b, _c = _a.collapsible, collapsible = _c === void 0 ? true : _c, _d = _a.LinkComponent, LinkComponent = _d === void 0 ? 'a' : _d, rest = __rest$1(_a, ["items", "activePath", "collapsible", "LinkComponent"]);
@@ -397,4 +423,4 @@ var DocMenu = function (_a) {
 export { DocMenu as default };
 //# sourceMappingURL=index.es.mjs.map
 
-/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 dark:bg-indigo-400 ml-[6.5px] mt-[4px] transition ease-in-out text-indigo-500 dark:text-indigo-400 text-gray-900 dark:text-gray-100 text-gray-800 dark:text-gray-200 rotate-0 -rotate-90 transition-all grid grid-rows-[0fr] grid-rows-[1fr] overflow-hidden filter list-none p-0 block w-full pl-[24px] text-gray-700 dark:text-gray-500 py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] left-[6.5px] top-[4px] bottom-[4px] z-10 hidden group-hover:block bg-gray-300 text-indigo-400 text-gray-500 bg-indigo-400 left-0 transform transition-transform text-gray-400 dark:text-gray-700 flex py-[10px] items-center text-start font-medium pl-[48px] left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900"> */
+/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 dark:bg-indigo-400 ml-[6.5px] mt-[4px] transition ease-in-out text-indigo-500 dark:text-indigo-400 text-gray-900 dark:text-gray-100 text-gray-800 dark:text-gray-200 rotate-0 -rotate-90 transition-all grid grid-rows-[0fr] grid-rows-[1fr] overflow-hidden filter list-none p-0 visible block inline w-full pl-[24px] text-gray-700 dark:text-gray-500 py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] left-[6.5px] top-[4px] bottom-[4px] z-10 hidden group-hover:block bg-gray-300 text-indigo-400 text-gray-500 bg-indigo-400 left-0 transform transition-transform text-gray-400 dark:text-gray-700 flex py-[10px] items-center text-start font-medium pl-[48px] left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900"> */