[QF-3593] Update the burger menu

locales/en/common.json

@@ -93,13 +93,15 @@
   },
   "ayah": "Ayah",
   "ayahs": "Ayahs",
+  "become-monthly-donor": "Become A Monthly Donor",
   "back": "Back",
   "beta": "Beta",
   "beyond-ramadan": "Grow Beyond Ramadan!",
   "bookmark": "Bookmark",
   "bookmarked": "Bookmarked",
   "both": "Both",
   "cancel": "Cancel",
+  "change-theme": "Change Theme",
   "click-here": "Click here",
   "close": "Close",
   "command-bar": {
@@ -259,6 +261,7 @@
   "juz": "Juz",
   "language": "Language",
   "languages": "Languages",
+  "learn": "Learn",
   "learn-more": "Learn more",
   "learning-plans": "Learning Plans",
   "less": "Less",
@@ -275,6 +278,7 @@
   "mode": "Mode",
   "more": "More",
   "my-learning-plans": "My Learning Plans",
+  "my-quran": "My Quran",
   "navigate": "Navigate",
   "network": "Network",
   "new": "New!",
@@ -327,6 +331,7 @@
   "q-reflect": "QuranReflect",
   "quran-com": "Quran.com",
   "quran-radio": "Quran Radio",
+  "read": "Read",
   "reading-history": "Reading history",
   "reading-preference": {
     "reading": "Reading",
@@ -366,6 +371,7 @@
   },
   "seconds": "Seconds",
   "see-new": "See What's New",
+  "select-language": "Select Language",
   "settings": {
     "no-tafsir-selected": "No tafsir selected",
     "no-translation-selected": "No translation selected",

src/components/AppContent/AppContent.module.scss

@@ -0,0 +1,25 @@
+.contentContainer {
+  position: relative;
+  transition: var(--transition-fast);
+
+  &::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-text-black);
+    opacity: 0;
+    pointer-events: none;
+    transition: var(--transition-fast);
+    z-index: var(--z-index-smaller-modal);
+  }
+
+  &.dimmed {
+    &::before {
+      opacity: var(--opacity-50);
+      pointer-events: auto;
+    }
+  }
+}

src/components/AppContent/AppContent.tsx

@@ -1,6 +1,10 @@
+import classNames from 'classnames';
 import { useRouter } from 'next/router';
 import { DefaultSeo } from 'next-seo';
 import useTranslation from 'next-translate/useTranslation';
+import { shallowEqual, useSelector } from 'react-redux';
+
+import styles from './AppContent.module.scss';
 
 import AudioPlayer from '@/components/AudioPlayer/AudioPlayer';
 import AuthRedirects from '@/components/Auth/AuthRedirects';
@@ -10,6 +14,7 @@ import GlobalListeners from '@/components/GlobalListeners';
 import Navbar from '@/components/Navbar/Navbar';
 import Footer from '@/dls/Footer/Footer';
 import useAuthData from '@/hooks/auth/useAuthData';
+import { selectNavbar } from '@/redux/slices/navbar';
 import { isAuthPage } from '@/utils/routes';
 import { createSEOConfig } from '@/utils/seo';
 
@@ -24,6 +29,7 @@ function AppContent({ Component, pageProps }: AppContentProps) {
   const { t } = useTranslation('common');
   const { userData } = useAuthData();
   const isAuth = isAuthPage(router);
+  const { isNavigationDrawerOpen } = useSelector(selectNavbar, shallowEqual);
 
   return (
     <>
@@ -33,7 +39,13 @@ function AppContent({ Component, pageProps }: AppContentProps) {
       <GlobalListeners />
       {!isAuth && <Navbar />}
       <DeveloperUtility />
-      <Component {...pageProps} />
+      <div
+        className={classNames(styles.contentContainer, {
+          [styles.dimmed]: isNavigationDrawerOpen,
+        })}
+      >
+        <Component {...pageProps} />
+      </div>
       <AudioPlayer />
       {!isAuth && <Footer />}
     </>

src/components/Navbar/NavbarBody/NavbarBody.module.scss

@@ -1,12 +1,34 @@
-@use "src/styles/utility";
-@use "src/styles/breakpoints";
+@use 'src/styles/utility';
+@use 'src/styles/breakpoints';
 
 .itemsContainer {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   height: 100%;
   background-color: var(--color-background-elevated);
+  position: relative;
+
+  &::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-text-black);
+    opacity: 0;
+    pointer-events: none;
+    transition: var(--transition-fast);
+    z-index: var(--z-index-smaller-modal);
+  }
+
+  &.dimmed {
+    &::before {
+      opacity: var(--opacity-50);
+      pointer-events: auto;
+    }
+  }
 }
 
 .centerVertically {

src/components/Navbar/NavbarBody/ProfileAvatarButton.tsx

@@ -7,15 +7,17 @@ import { useDispatch } from 'react-redux';
 import styles from './ProfileAvatarButton.module.scss';
 
 import Button, { ButtonShape, ButtonSize, ButtonVariant } from '@/dls/Button/Button';
+import IconContainer, { IconColor } from '@/dls/IconContainer/IconContainer';
 import PopoverMenu from '@/dls/PopoverMenu/PopoverMenu';
 import useLogout from '@/hooks/auth/useLogout';
+import BookmarkIcon from '@/icons/bookmark.svg';
 import ClockIcon from '@/icons/clock.svg';
-import ArrowIcon from '@/icons/east.svg';
 import ReaderIcon from '@/icons/learning-plan.svg';
 import LogoutIcon from '@/icons/logout.svg';
 import NotesIcon from '@/icons/notes-with-pencil.svg';
 import NotificationBellIcon from '@/icons/notification-bell.svg';
 import IconPerson from '@/icons/person.svg';
+import { setIsNavigationDrawerOpen } from '@/redux/slices/navbar';
 import { setIsSidebarNavigationVisible } from '@/redux/slices/QuranReader/sidebarNavigation';
 import { isLoggedIn } from '@/utils/auth/login';
 import { logButtonClick } from '@/utils/eventLogger';
@@ -28,7 +30,11 @@ import {
   getReadingGoalProgressNavigationUrl,
 } from '@/utils/navigation';
 
-const ProfileAvatarButton = () => {
+type ProfileAvatarButtonProps = {
+  isPopoverPortalled?: boolean;
+};
+
+const ProfileAvatarButton = ({ isPopoverPortalled = true }: ProfileAvatarButtonProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const { t } = useTranslation('common');
   const router = useRouter();
@@ -53,6 +59,13 @@ const ProfileAvatarButton = () => {
     });
   };
 
+  const onMyQuranClicked = () => {
+    logButtonClick('profile_avatar_my_quran');
+    router.push(getProfileNavigationUrl()).then(() => {
+      setIsOpen(false);
+    });
+  };
+
   const onNotificationSettingsClicked = () => {
     logButtonClick('profile_avatar_notification_settings');
     router.push(getNotificationSettingsNavigationUrl()).then(() => {
@@ -85,6 +98,7 @@ const ProfileAvatarButton = () => {
     return (
       <PopoverMenu
         isModal={false}
+        isPortalled={isPopoverPortalled}
         trigger={
           <Button
             tooltip={t('profile')}
@@ -101,9 +115,15 @@ const ProfileAvatarButton = () => {
         isOpen={isOpen}
         onOpenChange={setIsOpen}
       >
-        <PopoverMenu.Item onClick={onProfileClicked} icon={<ArrowIcon />}>
+        <PopoverMenu.Item onClick={onProfileClicked} icon={<IconPerson />}>
           {t('profile')}
         </PopoverMenu.Item>
+        <PopoverMenu.Item
+          onClick={onMyQuranClicked}
+          icon={<IconContainer icon={<BookmarkIcon />} color={IconColor.accent} />}
+        >
+          {t('my-quran')}
+        </PopoverMenu.Item>
         <PopoverMenu.Item onClick={onNotificationSettingsClicked} icon={<NotificationBellIcon />}>
           {t('notification-settings')}
         </PopoverMenu.Item>
@@ -127,10 +147,13 @@ const ProfileAvatarButton = () => {
     <Button
       tooltip={t('sign-in')}
       ariaLabel={t('sign-in')}
-      variant={ButtonVariant.Simplified}
+      variant={ButtonVariant.SimplifiedAccent}
       size={ButtonSize.Small}
       href={getLoginNavigationUrl(router.asPath)}
-      onClick={onTriggerClicked}
+      onClick={() => {
+        dispatch({ type: setIsNavigationDrawerOpen.type, payload: false });
+        onTriggerClicked;
+      }}
       id="login-button"
       className={styles.loginButton}
     >