feat: updated sidebar

app/[locale]/[...uriSegments]/page.tsx

@@ -107,7 +107,6 @@ const sectionMap = {
   searchResults: SearchPageTemplate,
   slideshows: SlideshowPageTemplate,
   staffProfiles: StaffPageTemplate,
-  // userProfilePage: UserProfilePageTemplate,
 };
 
 const UriSegmentsPage: FunctionComponent<UriSegmentProps> = async ({

components/atomic/Button/Hamburger/index.tsx

@@ -0,0 +1,36 @@
+"use client";
+import { FunctionComponent } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { IconComposer } from "@rubin-epo/epo-react-lib";
+import styles from "./styles.module.scss";
+
+interface HamburgerProps {
+  active: boolean;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  className?: string;
+}
+
+const Hamburger: FunctionComponent<HamburgerProps> = ({
+  active,
+  onClick,
+  className,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <button
+      aria-haspopup="dialog"
+      aria-expanded={active}
+      onClick={onClick}
+      className={classNames(styles.hamburger, className)}
+    >
+      <span className="a-hidden">{t("toggle-nav")}</span>
+      <IconComposer icon="Hamburger" />
+    </button>
+  );
+};
+
+Hamburger.displayName = "Atom.Button.Hamburger";
+
+export default Hamburger;

components/atomic/Button/Hamburger/styles.module.scss

@@ -0,0 +1,22 @@
+@use "abstracts/mixins/base";
+@use "abstracts/functions";
+
+.hamburger {
+  @include base.fluid-scale(
+    width,
+    functions.header(button-width-tablet),
+    functions.header(button-width-mobile),
+    functions.break(tablet),
+    functions.break(mobile)
+  );
+
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+
+  &[aria-expanded="true"] {
+    background-color: var(--color-rubin-teal-600, #0c4a47);
+  }
+}

components/atomic/Button/patterns/GoogleSSOButton.js

@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import { useGoogleLogin } from "@react-oauth/google";
 import { usePathname, useRouter } from "next/navigation";

components/atomic/Button/patterns/SSOButton.js

@@ -1,3 +1,4 @@
+"use client";
 /* eslint-disable react/prop-types */
 import { useState, useEffect } from "react";
 import PropTypes from "prop-types";

components/auth/AuthorizePage/index.js

@@ -9,14 +9,12 @@ const AUTHORIZED_TYPES = {
   pages: false,
   educatorPages: true,
   studentPages: false,
-  userProfilePage: true,
   investigationLandingPage: false,
 };
 
 function isAuthorized(typeHandle, user, status) {
   if (typeHandle === "educatorPages")
     return user?.group === "educators" && status === "active";
-  if (typeHandle === "userProfilePage") return !!user && status === "active";
   return false;
 }
 
@@ -95,7 +93,6 @@ AuthorizePage.propTypes = {
     "pages",
     "educatorPages",
     "studentPages",
-    "userProfilePage",
     "investigationLandingPage",
   ]),
   children: PropTypes.node,