Merge pull request #27 from Rhymlore/main

Added OSDF to the header

src/app/page.tsx

@@ -90,6 +90,7 @@ export default function Home() {
                         </Grid>
                         <Grid item xs={12} md={6} sx={{display: "flex"}}>
                             <Box sx={{paddingBottom:"1rem", paddingTop:"1rem", display: "flex", flexDirection: "column"}}>
+                            <Box height={"0.5rem"} bgcolor={"#f4b627"} width={"3rem"} marginBottom={"1rem"}> </Box>
                                 <Typography variant={"h4"} sx={{paddingBottom: "1.5rem"}}>The Open Science Data Federation</Typography>
                                 <Box sx={{display: "flex", flexDirection: "column", flexGrow: "1"}}>
                                     <Box>

src/components/BurgerMenu.tsx

@@ -16,6 +16,9 @@ export const BurgerMenu = () => {
     const handleDrawer = () => {
         setOpenDrawer(!openDrawer);
     };
+
+    const ImageIcon = ({ src, alt }: { src: string, alt: string }) => <img src={src} alt={alt} style={{ width: '24px', height: '24px' }} />;
+
 
   return (
     <Box sx={{display: "flex", alignItems:"center", justifyContent:"space-between" , width: "100%"}}>
@@ -89,7 +92,9 @@ export const BurgerMenu = () => {
                     <HeaderLink name={"Release Plan"} href={"/release-plan"} icon={<CalendarMonth />} target="_self" onClick={handleDrawer}/>
                     <HeaderLink name={"Releases"} href={"/releases"} icon={<FileDownload />} target="_self" onClick={handleDrawer}/>
                 </HeaderDropdown>
+
 
+                <HeaderMainLink name={"OSDF"} href={"https://osg-htc.org/services/osdf"} icon={<ImageIcon src={"/static/images/osg-logo.png"} alt="OSG Logo"/>} target="_blank" onClick={handleDrawer}/>
                 <HeaderMainLink name={"Documentation"} href={"https://docs.pelicanplatform.org/"} icon={<Description />} target="_blank" onClick={handleDrawer}/>
                 <HeaderMainLink name={"GitHub"} href={"https://github.com/PelicanPlatform"} icon={<GitHub />} target="_blank" onClick={handleDrawer}/>
             </List>

src/components/layout/Header.tsx

@@ -2,7 +2,7 @@
 
 import ExportedImage from "next-image-export-optimizer";
 import BurgerMenu from "@/components/BurgerMenu";
-import React, {useState, useEffect, useRef} from "react";
+import React, { useState, useEffect } from "react";
 import { Box, Menu, MenuItem } from "@mui/material"
 import styles from "../../app/page.module.css"
 import Link from "next/link";
@@ -127,6 +127,12 @@ export const Header = () => {
 				<Link href={"https://docs.pelicanplatform.org/"} style={{display: "flex"}} target="_blank">
 					<Typography id="docs-header" my={"auto"} pl={2} lineHeight={1} variant={"h6"}>Documentation</Typography>
 				</Link>
+
+				<Link href={"https://osg-htc.org/services/osdf"} style={{display: "flex"}} target="_blank">
+					<Typography id="osdf-header" my={"auto"} pl={2} lineHeight={1} variant={"h6"}>
+						OSDF
+					</Typography>
+				</Link>
 				<Menu
 						id="community-menu"
 						anchorEl={anchorEl}