feat(ui): calendar sidebar redesign

src/views/components/calendar/Calendar.tsx

@@ -13,6 +13,7 @@ import { CalendarContext } from '@views/contexts/CalendarContext';
 import useCourseFromUrl from '@views/hooks/useCourseFromUrl';
 import { useFlattenedCourseSchedule } from '@views/hooks/useFlattenedCourseSchedule';
 import { MessageListener } from 'chrome-extension-toolkit';
+import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 
 import OutwardArrowIcon from '~icons/material-symbols/arrow-outward';
@@ -61,43 +62,55 @@ export default function Calendar(): JSX.Element {
         <CalendarContext.Provider value>
             <div className='h-full w-full flex flex-col'>
                 <div className='h-screen flex overflow-auto'>
-                    {showSidebar && (
-                        <div className='px-spacing7 py-spacing5 h-full min-w-[20.3125rem] flex flex-none flex-col justify-between border-r border-ut-offwhite/75 shadow-[2px_0_10px,rgba(214_210_196_/_.1)] screenshot:hidden'>
-                            <div className='gap-y-spacing5 h-full w-fit flex flex-col overflow-auto'>
-                                <div className='pb-spacing6 sticky top-0 z-50 w-full flex items-center justify-between gap-x-3xl bg-white'>
-                                    <LargeLogo />
-                                    <Button
-                                        variant='single'
-                                        color='theme-black'
-                                        onClick={() => {
-                                            setShowSidebar(!showSidebar);
-                                        }}
-                                        className='h-fit screenshot:hidden !p-0'
-                                        icon={MenuIcon}
-                                    />
-                                </div>
-                                <CalendarSchedules />
-                                <Divider orientation='horizontal' size='100%' />
-                                <ResourceLinks />
-                                <Divider orientation='horizontal' size='100%' />
-                                {/* <TeamLinks /> */}
-                                <a
-                                    href={CRX_PAGES.REPORT}
-                                    className='gap-spacing1 flex items-center text-ut-burntorange underline-offset-2 hover:underline'
-                                    target='_blank'
-                                    rel='noreferrer'
-                                    onClick={event => {
-                                        event.preventDefault();
-                                        openReportWindow();
-                                    }}
-                                >
-                                    <Text variant='p'>Send us Feedback!</Text>
-                                    <OutwardArrowIcon className='h-3 w-3' />
-                                </a>
-                            </div>
-                            <CalendarFooter />
+                    <div
+                        className={clsx(
+                            'gap-y-spacing6 py-spacing5 relative h-full min-h-screen w-full flex flex-none flex-col justify-between overflow-clip whitespace-nowrap border-r border-ut-offwhite/75 shadow-[2px_0_10px,rgba(214_210_196_/_.1)] duration-300 ease-out-expo transition-property-max-width screenshot:hidden',
+                            {
+                                'max-w-[20.3125rem] ': showSidebar,
+                                'max-w-0 pointer-events-none': !showSidebar,
+                            }
+                        )}
+                        tabIndex={showSidebar ? 0 : -1}
+                        aria-hidden={!showSidebar}
+                        {...{ inert: !showSidebar ? '' : undefined }}
+                    >
+                        <div className='px-spacing7 sticky top-0 z-50 w-full flex items-center justify-between gap-x-3xl bg-white'>
+                            <LargeLogo />
+                            <Button
+                                variant='single'
+                                color='theme-black'
+                                onClick={() => {
+                                    setShowSidebar(!showSidebar);
+                                }}
+                                className='h-fit screenshot:hidden !p-0'
+                                icon={MenuIcon}
+                            />
                         </div>
-                    )}
+
+                        <div className='gap-y-spacing5 py-spacing5 px-spacing7 relative h-full w-full flex grow flex-col overflow-x-clip overflow-y-auto'>
+                            <CalendarSchedules />
+                            <Divider orientation='horizontal' size='100%' />
+                            <ResourceLinks />
+                            <Divider orientation='horizontal' size='100%' />
+                            {/* <TeamLinks /> */}
+                            <a
+                                href={CRX_PAGES.REPORT}
+                                className='gap-spacing1 flex items-center text-ut-burntorange underline-offset-2 hover:underline'
+                                target='_blank'
+                                rel='noreferrer'
+                                onClick={event => {
+                                    event.preventDefault();
+                                    openReportWindow();
+                                }}
+                            >
+                                <Text variant='p'>Send us Feedback!</Text>
+                                <OutwardArrowIcon className='h-3 w-3' />
+                            </a>
+                        </div>
+
+                        <CalendarFooter />
+                    </div>
+
                     <div className='h-full min-w-5xl flex flex-grow flex-col overflow-y-auto'>
                         <CalendarHeader
                             sidebarOpen={showSidebar}

src/views/components/calendar/CalendarFooter.tsx

@@ -25,7 +25,7 @@ const handleOpenOptions = async (): Promise<void> => {
  */
 export default function CalendarFooter(): JSX.Element {
     return (
-        <footer className='min-w-full w-0 flex items-center justify-between'>
+        <footer className='px-spacing7 pt-spacing3 min-w-full w-0 flex items-center justify-between bg-white'>
             <div className='gap-spacing4 flex'>
                 <Link className='linkanimate' href='https://www.instagram.com/longhorndevelopers'>
                     <InstagramIcon className='h-6 w-6 fill-ut-black' />
@@ -43,7 +43,15 @@ export default function CalendarFooter(): JSX.Element {
                     <LinkedinIcon className='h-6 w-6 fill-ut-black -mx-0.75' />
                 </Link>
             </div>
-            <Button variant='single' icon={SettingsIcon} color='ut-black' onClick={handleOpenOptions} />
+            <div>
+                <Button
+                    className='h-fit !p-0'
+                    variant='single'
+                    icon={SettingsIcon}
+                    color='ut-black'
+                    onClick={handleOpenOptions}
+                />
+            </div>
         </footer>
     );
 }