Refactor sidebar to fix position of close (X) icon

app/soapbox/components/sidebar-menu.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/interactive-supports-focus */
 import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
@@ -136,18 +137,28 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
   return (
     <div
-      className={classNames('sidebar-menu__root', {
-        'sidebar-menu__root--visible': sidebarOpen,
-      })}
       aria-expanded={sidebarOpen}
+      className={
+        classNames({
+          'z-[1000]': sidebarOpen,
+          hidden: !sidebarOpen,
+        })
+      }
     >
       <div
-        className={classNames({
-          'fixed inset-0 bg-gray-500/90 dark:bg-gray-700/90 z-1000': true,
-          'hidden': !sidebarOpen,
-        })}
+        className='fixed inset-0 bg-gray-500/90 dark:bg-gray-700/90'
         role='button'
         onClick={handleClose}
+      />
+
+      <div className='fixed inset-0 z-[1000] flex'>
+        <div
+          className={
+            classNames({
+              'flex flex-col flex-1 bg-white dark:bg-primary-900 -translate-x-full rtl:translate-x-full w-full max-w-xs': true,
+              '!translate-x-0': sidebarOpen,
+            })
+          }
         >
           <IconButton
             title={intl.formatMessage(messages.close)}
@@ -155,11 +166,9 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
             src={require('@tabler/icons/x.svg')}
             ref={closeButtonRef}
             iconClassName='h-6 w-6'
-          className='fixed top-5 right-5 text-gray-600 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
+            className='absolute top-0 right-0 -mr-11 mt-2 text-gray-600 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
           />
-      </div>
 
-      <div className='sidebar-menu'>
           <div className='relative overflow-y-scroll overflow-auto h-full w-full'>
             <div className='p-4'>
               <Stack space={4}>
@@ -349,6 +358,14 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
             </div>
           </div>
         </div>
+
+        {/* Dummy element to keep Close Icon visible */}
+        <div
+          aria-hidden
+          className='w-14 flex-shrink-0'
+          onClick={handleClose}
+        />
+      </div>
     </div>
   );
 };

app/styles/application.scss

@@ -34,7 +34,6 @@
 @import 'components/modal';
 @import 'components/account-header';
 @import 'components/compose-form';
-@import 'components/sidebar-menu';
 @import 'components/emoji-reacts';
 @import 'components/status';
 @import 'components/reply-mentions';

app/styles/components/sidebar-menu.scss

@@ -1,17 +0,0 @@
-.sidebar-menu {
-  @apply flex inset-0 fixed flex-col w-80 bg-white dark:bg-primary-900 transition-all ease-linear -translate-x-80 rtl:translate-x-80 z-1000;
-
-  @media (max-width: 400px) {
-    @apply w-[90vw] -translate-x-[90vw] rtl:translate-x-[90vw];
-  }
-
-  hr {
-    @apply border-gray-200 dark:border-gray-700;
-  }
-}
-
-.sidebar-menu__root--visible {
-  .sidebar-menu {
-    transform: translateX(0);
-  }
-}