fix(code/frontend): structure tab highlight, align and collapse (#35221)

Author: WangQianliang

x-pack/plugins/code/public/components/symbol_tree/__test__/__snapshots__/symbol_tree.test.tsx.snap

@@ -33,6 +33,7 @@ const Symbol = styled.div<{ isContainer: boolean }>`
   align-items: center;
   height: 1.5rem;
   margin-left: ${props => (props.isContainer ? '0.75rem' : '2rem')};
+  z-index: 2;
 `;
 
 const Token = styled(EuiToken)`
@@ -106,7 +107,7 @@ export class CodeSymbolTree extends React.PureComponent<Props, { activePath?: st
                 pathname: RepositoryUtils.locationToUrl(location),
                 query: { tab: 'structure' },
               })}
-              className="code-link"
+              className="code-symbol-link"
               onClick={this.getClickHandler(path)}
             >
               <EuiFlexGroup gutterSize="none" alignItems="center" className="code-structure-node">
@@ -131,8 +132,10 @@ export class CodeSymbolTree extends React.PureComponent<Props, { activePath?: st
         onClick: () => void 0,
       };
       if (s.members) {
-        item.items = this.symbolsToSideNavItems(s.members);
         item.forceOpen = !this.props.closedPaths.includes(s.path!);
+        if (item.forceOpen) {
+          item.items = this.symbolsToSideNavItems(s.members);
+        }
         item.renderItem = this.getStructureTreeItemRenderer(
           s.location,
           s.name,

x-pack/plugins/code/public/components/symbol_tree/code_symbol_tree.tsx

@@ -8,7 +8,6 @@
   background: $euiColorLightShade;
   left: 0;
   height: 1.5rem;
-  z-index: -1;
 }
 
 .euiSideNavItem__items {
@@ -18,3 +17,9 @@
 .codeStructureTree--icon {
   margin: auto 0.25rem;
 }
+
+.code-symbol-link {
+  &:focus {
+    animation: none !important;
+  }
+}