Feature/refactor header

package.json

@@ -19,6 +19,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.7.1",
     "@fortawesome/free-solid-svg-icons": "^6.7.1",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/themes": "^3.2.1",
     "@reduxjs/toolkit": "^2.4.0",
     "@tanstack/match-sorter-utils": "^8.19.4",

src/App.tsx

@@ -24,6 +24,7 @@ import 'styles/Main.scss';
 /* Import Components */
 import Notifications from 'components/elements/notifications/Notifications';
 import Mobile from './Mobile';
+import { Header } from 'components/elements/Elements';
 
 
 /* Props type */
@@ -65,10 +66,11 @@ const App = (props: Props) => {
   }, []);
 
   /* If booted: return routes for application, otherwise show loading screen */
-  if (!isMobile) {
+  // if (!isMobile) {
     return (
       <div className="h-full w-full">
         <Router>
+          <Header />
           <Routes>
             {AppRoutes}
           </Routes>
@@ -77,11 +79,11 @@ const App = (props: Props) => {
         <Notifications />
       </div>
     );
-  } else {
-    return (
-      <Mobile />
-    );
-  }
+  // } else {
+  //   return (
+  //     <Mobile />
+  //   );
+  // }
 };
 
 export default App;

src/components/dataExport/DataExport.tsx

@@ -18,7 +18,7 @@ import ScheduleDataExport from "api/dataExport/ScheduleDataExport";
 import GetSourceSystems from "api/sourceSystem/GetSourceSystems";
 
 /* Import Components */
-import { Header, Footer } from "components/elements/Elements";
+import { Footer } from "components/elements/Elements";
 import { Button, Dropdown, LoadingScreen } from "components/elements/customUI/CustomUI";
 
 
@@ -87,12 +87,7 @@ const DataExport = () => {
     });
 
     return (
-        <div className="h-100 d-flex flex-column">
-            {/* Render header*/}
-            <Header span={10}
-                offset={1}
-            />
-
+        <div className="h-90 d-flex flex-column">
             <Container fluid className="flex-grow-1 overflow-hidden py-5">
                 <Row className="h-100">
                     <Col lg={{ span: 6, offset: 3 }}

src/components/demo/Demo.tsx

@@ -1,10 +1,10 @@
 /* Import Dependencies */
-import {useState} from 'react';
-import {Formik, Form, Field} from 'formik';
-import {Container, Row, Col} from 'react-bootstrap';
+import { useState } from 'react';
+import { Formik, Form, Field } from 'formik';
+import { Container, Row, Col } from 'react-bootstrap';
 
 /* Import Components */
-import {Header, Footer} from 'components/elements/Elements';
+import { Footer } from 'components/elements/Elements';
 import DOITooltipDemo from 'components/demo/DOITooltipDemo';
 
 
@@ -17,11 +17,7 @@ const Demo = () => {
     const [inputDOI, setInputDOI] = useState<string>();
 
     return (
-        <div className="h-100 d-flex flex-column overflow-scroll">
-            <Header span={10}
-                    offset={1}
-            />
-
+        <div className="h-90 d-flex flex-column overflow-scroll">
             <Container fluid className="flex-grow-1">
                 <Row className="h-100 align-items-center">
                     <Col>

src/components/digitalMedia/DigitalMedia.tsx

@@ -27,7 +27,7 @@ import ScheduleDigitalMediaMas from "api/digitalMedia/ScheduleDigitalMediaMas";
 
 /* Import Components */
 import { ContentBlock, IdCard, TopBar } from "./components/DigitalMediaComponents";
-import { AnnotationSidePanel, ContentNavigation, Footer, Header } from "components/elements/Elements";
+import { AnnotationSidePanel, ContentNavigation, Footer } from "components/elements/Elements";
 import { LoadingScreen } from "components/elements/customUI/CustomUI";
 
 
@@ -88,15 +88,12 @@ const DigitalMedia = () => {
     });
 
     return (
-        <div className="h-100 d-flex flex-column">
+        <div className="h-90 d-flex flex-column">
             {/* Main container, acting as the body for the digital specimen page and additionally, the annotation side panel */}
             <Container fluid className="h-100 overflow-hidden">
                 <Row className="h-100">
                     <Col className={`${digitalMediaBodyClass} h-100 tr-smooth`}>
                         <div className={`${digitalMediaContentClass} h-100 d-flex flex-column tr-smooth`}>
-                            {/* Render header*/}
-                            <Header />
-
                             {/* Digital specimen page body */}
                             <Container fluid className="flex-grow-1 overflow-hidden my-5">
                                 <Row className="h-100">

src/components/digitalSpecimen/DigitalSpecimen.tsx

@@ -29,7 +29,7 @@ import ScheduleDigitalSpecimenMas from 'api/digitalSpecimen/ScheduleDigitalSpeci
 
 /* Import Components */
 import { ContentBlock, IdCard, TopBar } from './components/DigitalSpecimenComponents';
-import { AnnotationSidePanel, ContentNavigation, Header, Footer } from 'components/elements/Elements';
+import { AnnotationSidePanel, ContentNavigation, Footer } from 'components/elements/Elements';
 import { LoadingScreen } from 'components/elements/customUI/CustomUI';
 
 /**
@@ -104,15 +104,12 @@ const DigitalSpecimen = () => {
     });
 
     return (
-        <div className="h-100 d-flex flex-column">
+        <div className="h-90 d-flex flex-column">
             {/* Main container, acting as the body for the digital specimen page and additionally, the annotation side panel */}
             <Container fluid className="h-100 overflow-hidden">
                 <Row className="h-100">
                     <Col className={`${digitalSpecimenBodyClass} h-100 tr-smooth`}>
                         <div className={`${digitalSpecimenContentClass} h-100 d-flex flex-column tr-smooth`}>
-                            {/* Render header*/}
-                            <Header />
-
                             {/* Digital specimen page body */}
                             <Container fluid className="flex-grow-1 overflow-hidden my-5">
                                 <Row className="h-100">

src/components/elements/header/Header.tsx

@@ -1,74 +1,88 @@
-/* Import Components */
-import classNames from 'classnames';
-import { Container, Row, Col } from 'react-bootstrap';
-import { Link } from 'react-router-dom';
-
-/* Import Utilities */
-import KeycloakService from 'app/Keycloak';
+/* Import Dependencies */
+import KeycloakService from "app/Keycloak";
+import { Link, useNavigate } from "react-router-dom";
+import { useState } from "react";
 
 /* Import Components */
-import Navigation from './Navigation';
-import UserMenu from './UserMenu';
-import { Button } from 'components/elements/customUI/CustomUI';
-
+import { Button, DropdownMenu } from "@radix-ui/themes";
+import { ChevronDownIcon, ChevronUpIcon, Cross1Icon, HamburgerMenuIcon } from "@radix-ui/react-icons";
 
 
-/* Props Type */
-type Props = {
-    span?: number,
-    offset?: number,
-};
+export const Header = () => {
+    /* Hooks */
+    const navigate = useNavigate();
 
-
-/**
- * Component that renders the application's header
- * @param span The width in Bootstrap span (grid based on 12 columns)
- * @param offset the offset width in Bootstrap span (grid based on 12 columns)
- * @returns JSX Component
- */
-export const Header = (props: Props) => {
-    const { span, offset } = props;
-
-    /* Class Names */
-    const headerClass = classNames({
-        'p-0': !span
-    });
+    /* Base variables */
+    const [isOpen, setIsOpen] = useState(false);
+    const navItems = [
+        { url: '/search', label: 'Specimens' },
+        { url: '/virtual-collections', label: 'Virtual Collections' },
+        ...(KeycloakService.IsLoggedIn() ? [{ url: '/data-export', label: 'Data Export' }] : []),
+        { url: '/about', label: 'About' }
+    ];
 
     return (
-        <Container fluid>
-            <Row className="py-3">
-                <Col lg={{ span: span ?? 12, offset }}
-                    className={headerClass}
-                >
-                    <Row>
-                        {/* Title */}
-                        <Col lg="auto">
-                            <Link to="/">
-                                <h2 className="fs-1 tc-primary fw-bold">DiSSCover</h2>
-                            </Link>
-                        </Col>
-                        {/* Navigation */}
-                        <Col>
-                            <Navigation />
-                        </Col>
-                        <Col lg="auto"
-                            className="d-flex align-items-center"
-                        >
-                            {KeycloakService.IsLoggedIn() ?
-                                <UserMenu />
-                                : <Button type="button"
-                                    variant="blank"
-                                    className="fw-lightBold"
-                                    OnClick={() => KeycloakService.Login()}
-                                >
-                                    Login / Sign-up
+        <nav>
+            <Link to="/">
+                <span id="text-logo">DiSSCover</span>
+            </Link>
+
+            {/* Desktop navigation */}
+            <ul className="desktop-nav">
+                {navItems.map((item) => (
+                    <li key={item.url}><Button variant="ghost" className="nav-buttons" onClick={() => navigate(item.url)}>{item.label}</Button></li>
+                ))}
+                {KeycloakService.IsLoggedIn() ?
+                    <li>
+                        <DropdownMenu.Root onOpenChange={(isOpen) => setIsOpen(isOpen)}>
+                            <DropdownMenu.Trigger>
+                                <Button variant="outline">
+                                    MyDiSSCover
+                                    {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
                                 </Button>
-                            }
-                        </Col>
-                    </Row>
-                </Col>
+                            </DropdownMenu.Trigger>
+                            <DropdownMenu.Content size="2">
+                            <>
+                                <DropdownMenu.Item>
+                                    <Link to="/profile">Profile</Link>
+                                </DropdownMenu.Item>
+                                <Button className="login-btn" variant="outline" onClick={() => KeycloakService.Logout()}>Logout</Button>
+                            </>
+                            </DropdownMenu.Content>
+                        </DropdownMenu.Root>
+                    </li>
+                : <li><Button variant="outline" onClick={() => KeycloakService.Login()}>Login / Sign-up</Button></li>
+                }
 
-            </Row>
-        </Container>
-    );
-};
+            </ul>
+
+            {/* Mobile navigation */}
+            <div className="mobile-nav">
+                <DropdownMenu.Root onOpenChange={(isOpen) => setIsOpen(isOpen)}>
+                    <DropdownMenu.Trigger>
+                        <Button variant="outline">
+                            Menu
+                            {isOpen ? <Cross1Icon /> : <HamburgerMenuIcon />}
+                        </Button>
+                    </DropdownMenu.Trigger>
+                    <DropdownMenu.Content size="2">
+                        {navItems.map((item) => (
+                            <DropdownMenu.Item key={item.url}>
+                                <Link to={item.url}>{item.label}</Link>
+                            </DropdownMenu.Item>
+                        ))}
+                        {KeycloakService.IsLoggedIn() ?
+                            <>
+                                <DropdownMenu.Item>
+                                    <Link to="/profile">Profile</Link>
+                                </DropdownMenu.Item>
+                                <Button className="login-btn" variant="outline" onClick={() => KeycloakService.Logout()}>Logout</Button>
+                            </>
+                        : <Button className="login-btn" variant="outline" onClick={() => KeycloakService.Login()}>Login / Sign-up</Button>
+                        }
+                    </DropdownMenu.Content>
+                </DropdownMenu.Root>
+            </div>
+        </nav>
+    )
+}