[Glitch] Change navigation layout on small screens in web UI

Port a13b33d851 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/column_header.tsx

@@ -9,7 +9,8 @@ import ArrowBackIcon from '@/material-icons/400-24px/arrow_back.svg?react';
 import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
 import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
-import SettingsIcon from '@/material-icons/400-24px/settings.svg?react';
+import UnfoldLessIcon from '@/material-icons/400-24px/unfold_less.svg?react';
+import UnfoldMoreIcon from '@/material-icons/400-24px/unfold_more.svg?react';
 import type { IconProp } from 'flavours/glitch/components/icon';
 import { Icon } from 'flavours/glitch/components/icon';
 import { ButtonInTabsBar } from 'flavours/glitch/features/ui/util/columns_context';
@@ -238,7 +239,10 @@ export const ColumnHeader: React.FC<Props> = ({
         onClick={handleToggleClick}
       >
         <i className='icon-with-badge'>
-          <Icon id='sliders' icon={SettingsIcon} />
+          <Icon
+            id='sliders'
+            icon={collapsed ? UnfoldMoreIcon : UnfoldLessIcon}
+          />
           {collapseIssues && <i className='icon-with-badge__issue-badge' />}
         </i>
       </button>

app/javascript/flavours/glitch/components/icon_button.tsx

@@ -27,6 +27,7 @@ interface Props {
   counter?: number;
   href?: string;
   ariaHidden?: boolean;
+  ariaControls?: string;
   label?: string;
   obfuscateCount?: boolean;
 }
@@ -54,6 +55,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(
       overlay = false,
       tabIndex = 0,
       ariaHidden = false,
+      ariaControls,
       label,
       obfuscateCount,
     },
@@ -158,6 +160,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(
         aria-label={title}
         aria-expanded={expanded}
         aria-hidden={ariaHidden}
+        aria-controls={ariaControls}
         title={title}
         className={classes}
         onClick={handleClick}

app/javascript/flavours/glitch/components/icon_with_badge.tsx

@@ -7,7 +7,7 @@ interface Props {
   id: string;
   icon: IconProp;
   count: number;
-  issueBadge: boolean;
+  issueBadge?: boolean;
   className: string;
 }
 export const IconWithBadge: React.FC<Props> = ({