Navigation: Change collapse icon + behaviour (#61496)

* adjust positioning and switch icon

* hide collapse button unless collapsed/focused

* use Button instead of IconButton

packages/grafana-data/src/types/icon.ts

@@ -20,6 +20,7 @@ export const availableIconsIndex = {
   'arrow-left': true,
   'arrow-random': true,
   'arrow-right': true,
+  'arrow-to-right': true,
   'arrow-up': true,
   'arrows-h': true,
   'arrows-v': true,

public/app/core/components/PageNew/SectionNav.tsx

@@ -21,7 +21,7 @@ export function SectionNav({ model }: Props) {
   }
 
   return (
-    <>
+    <div className={styles.navContainer}>
       <nav
         className={cx(styles.nav, {
           [styles.navExpanded]: isExpanded,
@@ -33,8 +33,14 @@ export function SectionNav({ model }: Props) {
           </div>
         </CustomScrollbar>
       </nav>
-      <SectionNavToggle className={styles.collapseIcon} isExpanded={Boolean(isExpanded)} onClick={onToggleSectionNav} />
-    </>
+      <SectionNavToggle
+        className={cx(styles.collapseIcon, {
+          [styles.collapseIconExpanded]: isExpanded,
+        })}
+        isExpanded={Boolean(isExpanded)}
+        onClick={onToggleSectionNav}
+      />
+    </div>
   );
 }
 
@@ -65,6 +71,14 @@ function useSectionNavState() {
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
+    navContainer: css({
+      display: 'flex',
+      flexDirection: 'column',
+
+      [theme.breakpoints.up('md')]: {
+        flexDirection: 'row',
+      },
+    }),
     nav: css({
       display: 'flex',
       flexDirection: 'column',
@@ -96,16 +110,28 @@ const getStyles = (theme: GrafanaTheme2) => {
       },
     }),
     collapseIcon: css({
-      border: `1px solid ${theme.colors.border.weak}`,
-      left: '50%',
-      transform: 'translate(-50%, 50%) rotate(90deg)',
+      alignSelf: 'center',
+      margin: theme.spacing(1, 0),
+      position: 'relative',
       top: theme.spacing(0),
+      transform: 'rotate(90deg)',
+      transition: theme.transitions.create('opacity'),
 
       [theme.breakpoints.up('md')]: {
-        transform: 'translateX(50%)',
-        top: theme.spacing(8),
-        left: theme.spacing(1),
-        right: theme.spacing(-1),
+        alignSelf: 'flex-start',
+        left: 0,
+        margin: theme.spacing(0, 0, 0, 1),
+        top: theme.spacing(2),
+        transform: 'none',
+      },
+
+      'div:hover > &, &:focus': {
+        opacity: 1,
+      },
+    }),
+    collapseIconExpanded: css({
+      [theme.breakpoints.up('md')]: {
+        opacity: 0,
       },
     }),
   };

public/app/core/components/PageNew/SectionNavToggle.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { IconButton, useTheme2 } from '@grafana/ui';
+import { Button, useTheme2 } from '@grafana/ui';
 
 export interface Props {
   className?: string;
@@ -16,12 +16,16 @@ export const SectionNavToggle = ({ className, isExpanded, onClick }: Props) => {
   const styles = getStyles(theme);
 
   return (
-    <IconButton
-      tooltip={'Toggle section navigation'}
+    <Button
+      title={'Toggle section navigation'}
       aria-label={isExpanded ? 'Close section navigation' : 'Open section navigation'}
-      name={isExpanded ? 'angle-left' : 'angle-right'}
-      className={classnames(className, styles.icon)}
-      size="xl"
+      icon="arrow-to-right"
+      className={classnames(className, styles.icon, {
+        [styles.iconExpanded]: isExpanded,
+      })}
+      variant="secondary"
+      fill="text"
+      size="md"
       onClick={onClick}
     />
   );
@@ -31,10 +35,11 @@ SectionNavToggle.displayName = 'SectionNavToggle';
 
 const getStyles = (theme: GrafanaTheme2) => ({
   icon: css({
-    backgroundColor: theme.colors.background.secondary,
-    border: `1px solid ${theme.colors.border.weak}`,
-    borderRadius: '50%',
+    color: theme.colors.text.secondary,
     marginRight: 0,
     zIndex: 1,
   }),
+  iconExpanded: css({
+    rotate: '180deg',
+  }),
 });