TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated styling for small mobile screens

Browse Source
This commit is contained in:
Toba Ojo
2025-11-11 15:44:06 +00:00
parent be0a047d30
commit b86830a3c3
10 changed files with 43 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/UI/Header.tsx
View File

@@ -1,15 +1,26 @@
import { Link } from "react-router";
import Logo from "/MAV.svg";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGear, faHome, faListCheck, faMaximize, faMinimize, faRotate } from "@fortawesome/free-solid-svg-icons";
import {
faBars,
faGear,
faHome,
faListCheck,
faMaximize,
faMinimize,
faRotate,
} from "@fortawesome/free-solid-svg-icons";
import { useState } from "react";
import SoundBtn from "./SoundBtn";
import { useIntegrationsContext } from "../../context/IntegrationsContext";
export default function Header() {
const [isFullscreen, setIsFullscreen] = useState(false);
const [isMenuOpen, setIsMenuOpen] = useState(false);
const { state } = useIntegrationsContext();
const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
const sessionStarted = state.sessionStarted;
const sessionPaused = state.sessionPaused;
@@ -36,7 +47,7 @@ export default function Header() {
</Link>
</div>
<div className="flex flex-col lg:flex-row items-center space-x-24 justify-items-center">
<div className="flex flex-row lg:flex-row space-x-2">
<div className="flex flex-row lg:flex-row space-x-2 mx-auto p-2 md:p-0 items-center">
{sessionStarted && sessionPaused ? (
<p className="text-gray-400 font-bold">Session Paused</p>
) : (
@@ -44,7 +55,7 @@ export default function Header() {
)}
</div>
<div className="flex flex-row space-x-8">
<div className="flex flex-row space-x-6 md:space-x-8 items-center">
<Link to={"/"}>
<FontAwesomeIcon className="text-white" icon={faHome} size="2x" />
</Link>
@@ -58,24 +69,11 @@ export default function Header() {
<div onClick={refreshBrowser}>
<FontAwesomeIcon icon={faRotate} size="2x" />
</div>
<div className="flex">
<SoundBtn />
<SoundBtn />
<div className="md:hidden">
<FontAwesomeIcon icon={faBars} size="2x" onClick={toggleMenu} />
</div>
<div className="md:hidden">
<ul className="flex flex-col">
<li>
<Link to={"/session-settings"}>
<FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
</Link>
</li>
<li>
<Link to={"/system-settings"}>
<FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
</Link>
</li>
</ul>
</div>
<Link className="hidden md:flex" to={"/session-settings"}>
<FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
</Link>
@@ -85,6 +83,22 @@ export default function Header() {
</Link>
</div>
</div>
{isMenuOpen && (
<div className="md:hidden">
<ul className="flex flex-row gap-5">
<li onClick={() => setIsMenuOpen(false)}>
<Link to={"/session-settings"}>
<FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
</Link>
</li>
<li onClick={() => setIsMenuOpen(false)}>
<Link to={"/system-settings"}>
<FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
</Link>
</li>
</ul>
</div>
)}
</div>
);
}