diff --git a/src/Header/DropdownMenu.js b/src/Header/DropdownMenu.js deleted file mode 100644 index dca3cb8..0000000 --- a/src/Header/DropdownMenu.js +++ /dev/null @@ -1,24 +0,0 @@ -import OpenPageButton from "./OpenPageButton"; - -/** - * @param {null} null - Takes in nothing - * @returns {JSX.Element} JSX - HTML tags and JS functionality - * @description Drop down menu elements - * @author Brock - */ -const DropdownMenu = () => { - return ( -
- - -
- ); -}; - -export default DropdownMenu; diff --git a/src/Header/Header.css b/src/Header/Header.css index 5e98d1c..6076cf4 100644 --- a/src/Header/Header.css +++ b/src/Header/Header.css @@ -5,6 +5,12 @@ header { margin-top: 0%; } +header a { + text-decoration: none; + color: inherit; + cursor: pointer; +} + figure { margin: 0px; height: 10%; @@ -19,14 +25,79 @@ header figure { background-color: white; } -/* not sure what these two are for */ -#title { - background-color: blueviolet; +nav a { + text-decoration: none; + color: inherit; + cursor: pointer; } -.banner { + +nav a li { + background-color: none; + padding: 0.5rem; + border: solid 1px gray; +} + +nav a li:hover { + background-color: gray; +} + +nav ul { display: flex; flex-direction: row; - align-items: center; - justify-content: flex-start; - background-color: aqua; + list-style: none; + margin: 0px; + padding: 0px; +} + +.Hide { + display: none; +} + +.DropDown { + cursor: default; + position: relative; +} + +/* makes dropdown visible */ +.DropDown:hover .Hide { + display: block; + position: absolute; + width: 100%; + text-align: center; +} + +header div { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} +header div button { + border: none; + cursor: pointer; + height: 4rem; + width: 4rem; + align-items: center; + background-color: inherit; + border: solid 2px gray; + border-radius: 1rem; +} + +header div button img { + width: 100%; +} + +/* for dark mode */ + +.darkmode { + filter: invert(95%) hue-rotate(180deg); + background-color: white; +} + +#root.darkmode #logo.logoAfterDark { + filter: hue-rotate(180deg); +} + +#root.darkmode #darkModeToggle { + filter: hue-rotate(180deg); } diff --git a/src/Header/Header.js b/src/Header/Header.js index 3165da3..d562d0b 100644 --- a/src/Header/Header.js +++ b/src/Header/Header.js @@ -1,8 +1,6 @@ import logo from "./logo.webp"; -import DropdownMenu from "./DropdownMenu"; -import OpenPageButton from "./OpenPageButton"; -import { useNavigate, Outlet } from "react-router-dom"; -import { useState } from "react"; +import lightDark from "./light-dark.webp"; +import { Outlet, Link } from "react-router-dom"; import "./Header.css"; import Ender from "../Footer/Ender"; @@ -11,72 +9,108 @@ import Ender from "../Footer/Ender"; * @returns {JSX.Element} JSX - HTML tags and JS functionality * @description The top header part of the page includes the naviagtion * @author Brock + * @todo final css add baja but eon (baja leads chat) */ const Header = () => { - const [isDropdownVisible, setDropdownVisible] = useState(false); - const navigate = useNavigate(); - /** - * @param {String} arg - The page that the button goes to - * @returns {JSX.Element} JSX - HTML tags and JS functionality - * @description Function that move you to the specified place + * @param {null} null - Takes in nothing + * @returns {CSSStyleRule} CSS - changes page to darkmode + * @description inverts all of the colors of body without touching the pictures * @author Brock */ - const LinkTo = (arg) => { - navigate(arg); + const switchDarkMode = () => { + const body = document.getElementById("root"); + const logoCss = document.getElementById("logo"); + + body.classList.toggle("darkmode"); + logoCss.classList.toggle("logoAfterDark"); }; - //makes the drop down menu visible when the mouse enters the Club Membership & Upcoming events button area - const handleMouseEnter = () => { - setDropdownVisible(true); - }; - //makes the drop down menu invisible when the mouse leaves the Club Membership & Upcoming events button area - const handleMouseLeave = () => { - setDropdownVisible(false); - }; + /** + * @param {null} null - Takes in nothing + * @returns {CSSStyleRule} CSS - makes it compliant with bowser preferances + * @description checks for what the browser prefers + * @author Brock + */ + document.addEventListener("DOMContentLoaded", () => { + const prefersDarkMode = + window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches; + if (prefersDarkMode) { + switchDarkMode(); + } + }); return ( <>
-
LinkTo("/")}> - -
-

Schulich Offroad

-
-
-
diff --git a/src/Header/light-dark.webp b/src/Header/light-dark.webp new file mode 100644 index 0000000..35bfe94 Binary files /dev/null and b/src/Header/light-dark.webp differ diff --git a/src/index.css b/src/index.css index ec2585e..f47231e 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,20 @@ body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + monospace; +} + +/* for dark mode */ +#root.darkmode img, +#root.darkmode video, +#root.darkmode iframe { + filter: invert(95%) hue-rotate(180deg); }