feat: Create User menu page

packages/frontend/src/MobileApp.tsx

@@ -8,6 +8,9 @@ import "@alphaday/ui-kit/global.scss";
 const SuperfeedPage = lazyRetry(() => import("./mobile-pages/superfeed"));
 const AuthPage = lazyRetry(() => import("./mobile-pages/auth"));
 const FiltersPage = lazyRetry(() => import("./mobile-pages/filters"));
+const UserSettingsPage = lazyRetry(
+    () => import("./mobile-pages/user-settings")
+);
 
 const MobileApp: React.FC = () => {
     useAppInit();
@@ -19,6 +22,11 @@ const MobileApp: React.FC = () => {
                     <Route path="/" exact component={SuperfeedPage} />
                     <Route path="/auth*" exact component={AuthPage} />
                     <Route path="/filters" exact component={FiltersPage} />
+                    <Route
+                        path="/user-settings"
+                        exact
+                        component={UserSettingsPage}
+                    />
                     {/* Add more routes as needed */}
                 </Suspense>
             </Switch>

packages/frontend/src/components/mobile-filters/MobileFiltersModule.tsx

@@ -8,7 +8,7 @@ import {
     twMerge,
 } from "@alphaday/ui-kit";
 import { ReactComponent as CheckedSVG } from "src/assets/icons/checkmark.svg";
-import { ReactComponent as ChevronSVG } from "src/assets/icons/chevron-down2.svg";
+import { ReactComponent as ChevronSVG } from "src/assets/icons/chevron-right.svg";
 
 enum EOptionCategory {
     MEDIA = "mediaOptions",

packages/frontend/src/mobile-components/profile/UserMenu.tsx

@@ -0,0 +1,163 @@
+import { FC } from "react";
+import { twMerge } from "@alphaday/ui-kit";
+import { Link, useHistory } from "react-router-dom";
+import { ReactComponent as ChevronSVG } from "src/assets/icons/chevron-down2.svg";
+import { ReactComponent as DocSVG } from "src/assets/icons/doc.svg";
+import { ReactComponent as LogoutSVG } from "src/assets/icons/logout.svg";
+import { ReactComponent as StarSVG } from "src/assets/icons/star.svg";
+import { ReactComponent as UserSVG } from "src/assets/icons/user.svg";
+
+const menu = [
+    {
+        id: 1,
+        icon: UserSVG,
+        title: "Edit profile",
+        subtext: "Edit your profile",
+        link: "/profile",
+    },
+    {
+        id: 2,
+        icon: DocSVG,
+        title: "Privacy policy",
+        subtext: "How we work & use your data",
+        link: "profile/privacy",
+    },
+    {
+        id: 3,
+        icon: StarSVG,
+        title: "Rate us",
+        subtext: "Tell us what we think",
+        link: "profile/rate",
+    },
+    {
+        id: 4,
+        icon: LogoutSVG,
+        title: "Log out",
+        subtext: null,
+        link: "profile/log-out",
+    },
+];
+
+const NonAuthenticatedSection = () => {
+    return (
+        <div className="flex flex-col flex-start w-full items-start mb-4">
+            <p className="mb-0 fontGroup-highlight">
+                Sign up to unlock the complete experience{" "}
+            </p>
+            <Link
+                to="/auth"
+                className="flex fontGroup-highlight !font-semibold py-3 px-4 bg-accentVariant100 hover:bg-accentVariant200 w-full mt-5 justify-center rounded-lg"
+            >
+                Sign up
+            </Link>
+            <p className="mt-6">
+                <span className="mt-6">Already have an account?</span>
+                <Link
+                    to="/auth"
+                    className="ml-2 font-semibold border-b border-accentVariant100"
+                >
+                    Log in here
+                </Link>
+            </p>
+        </div>
+    );
+};
+
+const AuthenticatedSection = () => {
+    return (
+        <div className="flex flex-col flex-start w-full items-start mb-4">
+            <div className="flex">
+                <img
+                    src="	https://tailwindui.com/img/avatar-3.jpg"
+                    alt="username"
+                    className="mr-3 w-[60px] h-[60px] rounded-full border border-solid border-green-400"
+                />
+                <p className="m-0 fontGroup-major self-center">Hi Username!</p>
+            </div>
+            <div className="relative flex flex-col items-center fontGroup-highlight !font-semibold py-4 px-4 bg-backgroundVariant300 w-full mt-5 justify-center rounded-lg">
+                <span className="w-1.5 h-1.5 rounded-full bg-secondaryOrangeSoda absolute top-4 right-4" />
+                <p className="block ">Some major notification here...</p>
+                <Link
+                    to="/notifications"
+                    className="fontGroup-highlight border-b border-accentVariant100 m-0"
+                >
+                    See all notifications
+                </Link>
+            </div>
+            <p className="mt-6">
+                <span className="mt-6">Already have an account?</span>
+                <Link
+                    to="/#"
+                    className="ml-2 font-semibold border-b border-accentVariant100"
+                >
+                    Log in here
+                </Link>
+            </p>
+        </div>
+    );
+};
+
+interface IUserMenu {
+    // avatar: string;
+    // username: string;
+    // isOpen: boolean;
+    // onClose: () => void;
+    isAuthenticated: boolean;
+}
+const UserMenu: FC<IUserMenu> = ({ isAuthenticated }) => {
+    const history = useHistory();
+
+    const navigate = (link: string) => {
+        history.push(link);
+    };
+    return (
+        <div className="mx-5">
+            {/* <div className="flex flex-start w-full items-center mb-4">
+                <ChevronSVG
+                    onClick={onClose}
+                    tabIndex={0}
+                    role="button"
+                    className="w-6 h-6 mr-2 rotate-180 self-center -ml-1.5"
+                />
+            </div> */}
+            {isAuthenticated ? (
+                <AuthenticatedSection />
+            ) : (
+                <NonAuthenticatedSection />
+            )}
+            <div className="mt-10 w-full">
+                {menu.map((item) => (
+                    <div
+                        onClick={() =>
+                            isAuthenticated ? navigate(item.link) : {}
+                        }
+                        tabIndex={0}
+                        role="button"
+                        key={item.id}
+                        className={twMerge(
+                            "flex w-full justify-start items-center border-b border-primaryVariant100 pb-2.5 pt-2.5 last:pb-0 last:border-none first:pt-0 cursor-pointer",
+                            isAuthenticated
+                                ? "text-primary"
+                                : "text-primaryVariant100"
+                        )}
+                    >
+                        <item.icon className="mr-4 w-6 h-6" />
+                        <div className="flex flex-grow min-w-max justify-between items-center">
+                            <div className="flex flex-col w-full">
+                                <span className="block fontGroup-highlightSemi">
+                                    {item.title}
+                                </span>
+                                <span className="fontGroup-support">
+                                    {item.subtext}
+                                </span>
+                            </div>
+                            <ChevronSVG className="h-3.5" />
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default UserMenu;

packages/frontend/src/mobile-pages/superfeed.tsx

@@ -13,8 +13,8 @@ const SuperfeedPage = () => {
                 onToggleFeedFilters={toggleFeedFilters}
                 show={showFeedFilters}
             />
-            <SuperfeedContainer onToggleFeedFilters={toggleFeedFilters} />
             <AuthPromptContainer />
+            <SuperfeedContainer onToggleFeedFilters={toggleFeedFilters} />
         </MobileLayout>
     );
 };

packages/frontend/src/mobile-pages/user-settings.tsx

@@ -0,0 +1,22 @@
+import { useHistory } from "react-router-dom";
+import { useAuth } from "src/api/hooks";
+import PagedMobileLayout from "src/layout/PagedMobileLayout";
+import UserMenu from "src/mobile-components/profile/UserMenu";
+
+const UserSettings: React.FC = () => {
+    const history = useHistory();
+    const { isAuthenticated } = useAuth();
+
+    return (
+        <PagedMobileLayout
+            title=""
+            handleBack={() =>
+                history.length > 1 ? history.goBack() : history.push("/")
+            }
+        >
+            <UserMenu isAuthenticated={isAuthenticated} />
+        </PagedMobileLayout>
+    );
+};
+
+export default UserSettings;

packages/ui-kit/src/App.tsx

@@ -11,7 +11,6 @@ import {
     FormTextArea,
 } from "./mobile-components/form-elements/FormElements";
 import { NavBottom } from "./mobile-components/navigation/NavBottom";
-import { NavHeader } from "./mobile-components/navigation/NavHeader";
 
 setupIonicReact();
 
@@ -20,7 +19,6 @@ function App() {
     const [checked, setChecked] = useState(false);
     return (
         <>
-            <NavHeader avatar={undefined} />
             <div className="flex h-screen w-screen flex-col items-center justify-center">
                 <h1 className="text-primary text-lg font-semibold">
                     Vite + React + Ionic + Tailwind

packages/ui-kit/src/mobile-components/navigation/NavHeader.tsx

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import { Link } from "react-router-dom";
 import { ReactComponent as SearchSVG } from "src/assets/svg/search.svg";
 import { ReactComponent as UserSVG } from "src/assets/svg/user.svg";
 
@@ -8,8 +9,13 @@ interface IProps {
 
 export const NavHeader: FC<IProps> = ({ avatar }) => {
     return (
-        <div className="flex w-full justify-between px-5 py-2">
-            <div className="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
+        <div className="w-full flex justify-between py-2 px-5">
+            <Link
+                to="/user-settings"
+                role="button"
+                tabIndex={0}
+                className="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
+            >
                 <span className="absolute -inset-1.5" />
                 <span className="sr-only">Open user menu</span>
                 {avatar ? (
@@ -23,7 +29,7 @@ export const NavHeader: FC<IProps> = ({ avatar }) => {
                         <UserSVG className="fill-primary h-7 w-7" />
                     </div>
                 )}
-            </div>
+            </Link>
             <div className="bg-backgroundVariant300 self-center rounded-lg p-2">
                 <SearchSVG className="h-4 w-4" aria-hidden="true" />
             </div>

packages/ui-kit/src/mobile-components/pager/Pager.tsx

@@ -24,13 +24,15 @@ export const Pager: React.FC<PagerProps> = ({
             <div className="flex flex-grow justify-center uppercase font-bold text-base">
                 {title}
             </div>
-            <button
-                type="button"
-                className="flex flex-grow justify-end"
-                onClick={handleClose}
-            >
-                <Close3Icon />
-            </button>
+            {handleClose && (
+                <button
+                    type="button"
+                    className="flex flex-grow justify-end"
+                    onClick={handleClose}
+                >
+                    <Close3Icon />
+                </button>
+            )}
         </div>
     );
 };