WIP 5

apps/link/app/(main)/_components/Sidebar.tsx

@@ -35,6 +35,7 @@ import LinkLogo from "public/link-logo-small.png";
 import { useSession, signOut } from "next-auth/react";
 import { getTicketOverviewCountsQuery } from "app/_graphql/getTicketOverviewCountsQuery";
 import { SearchBox } from "./SearchBox";
+import { fonts } from "app/_styles/theme";
 
 const openWidth = 270;
 const closedWidth = 100;
@@ -49,8 +50,10 @@ const MenuItem = ({
   open = true,
   badge,
   target = "_self",
-}: any) => (
-  <Link href={href} target={target}>
+}: any) => {
+  const { roboto } = fonts;
+
+  return  (<Link href={href} target={target}>
     <ListItemButton
       sx={{
         p: 0,
@@ -123,7 +126,7 @@ const MenuItem = ({
               variant="body1"
               sx={{
                 fontSize: 16,
-                fontFamily: "Roboto",
+                fontFamily: roboto.style.fontFamily,
                 fontWeight: "bold",
                 border: 0,
                 textAlign: "left",
@@ -157,6 +160,7 @@ const MenuItem = ({
     </ListItemButton>
   </Link>
 );
+}
 
 interface SidebarProps {
   open: boolean;
@@ -166,6 +170,7 @@ interface SidebarProps {
 export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
   const pathname = usePathname();
   const { data: session } = useSession();
+  const { poppins } = fonts;
   const username = session?.user?.name || "User";
   // @ts-ignore
   const roles = session?.user?.roles || [];
@@ -272,7 +277,7 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
                   fontWeight: 700,
                   mt: 1,
                   ml: 0.5,
-                  fontFamily: "Poppins",
+                  fontFamily: poppins.style.fontFamily,
                 }}
               >
                 CDR Link