Skip to content
Snippets Groups Projects
Commit a00c8874 authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

icon und versehentlich reversed changes

parent c8d20997
No related branches found
No related tags found
No related merge requests found
Pipeline #466066 failed
Stage: build
Hide whitespace changes
Inline Side-by-side
index.html
+ 2
− 3
View file @ a00c8874
......@@ -3,9 +3,8 @@
<head>
<meta charset="UTF-8" />
<link
rel="shortcut icon"
href="https://static.igem.wiki/teams/5247/logos-team/precyse-no-slogan.png"
type="image/x-icon"
rel="icon"
href="https://static.igem.wiki/teams/5247/logos-team/precyse-no-slogan.ico"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
......
src/App/App.css
+ 23
− 0
View file @ a00c8874
......@@ -3982,4 +3982,27 @@ figure img{
.lorem{
background-color: red !important;
}
.navbar .scroll-progress {
position: absolute;
bottom: 0;
left: 0;
height: 5px;
width: 100%;
background: linear-gradient(90deg,var(--lightblue),var(--text-primary));
z-index: 10;
overflow: visible;
}
.navbar .scroll-progress img {
position: absolute;
top: -20px;
height: 25px;
width: 30px;
z-index: 11;
transition: transform .5s ease-in-out;
}
\ No newline at end of file
src/App/App.tsx
+ 1
− 9
View file @ a00c8874
import { useEffect, useState } from "react";
import { useEffect } from "react";
import "./App.css";
import "./HP.css"
import "./mediarules.css"
......@@ -21,7 +21,6 @@ import { stringToSlug } from "../utils/stringToSlug.ts";
import { Villbuttonrow } from "../components/Buttons.tsx";
import "../utils/Highlight-functions.js";
import "./LoadingScreen.css";
import { useScroll, motion } from "framer-motion";
import "./calendar.css"
import { useLoading } from "../utils/LoadingContext.tsx";
......@@ -29,9 +28,6 @@ import { useLoading } from "../utils/LoadingContext.tsx";
const App = () => {
const { isLoading, setIsLoading } = useLoading(); // 2. Ladezustand hier verwenden
const { scrollYProgress } = useScroll({
offset: ["start start", "end end"],
});
window.scrollTo(0, 0);
......@@ -74,10 +70,6 @@ const App = () => {
{/* Navigation */}
<Navbar />
<motion.div
className="progress-bar"
style={{ scaleX: scrollYProgress }}
/>
{/* Header and PageContent */}
<Routes>
......
src/components/Navbar.tsx
+ 97
− 10
View file @ a00c8874
import { useEffect, useRef } from 'react';
import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import BootstrapNavbar from "react-bootstrap/Navbar";
import NavDropdown from "react-bootstrap/NavDropdown";
import { Link } from "react-router-dom";
import { NavPages } from "../pages.ts";
import {NavPages }from "../pages.ts";
export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
export function Navbar() {
const navbarCollapseRef = useRef<HTMLDivElement>(null);
const progressBarRef = useRef<HTMLDivElement>(null);
const progressImageRef = useRef<HTMLImageElement>(null);
let scrollTimeout: NodeJS.Timeout;
useEffect(() => {
const handleScroll = () => {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// Use document.body.scrollHeight to get the full height of the document
const scrollHeight = document.body.scrollHeight - window.innerHeight;
// Calculate the scroll percentage properly
const scrollPercentage = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
// Only collapse the navbar on larger screens (greater than 768px)
// Progress bar logic
if (progressBarRef.current) {
progressBarRef.current.style.width = `${scrollPercentage}%`;
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (progressImageRef.current) {
progressImageRef.current.classList.remove('walking');
progressImageRef.current.style.transform = 'translateY(0)';
}
}, 1000);
}
};
const onLoad = () => {
// Trigger scroll event manually to ensure progress is set correctly on load
handleScroll();
};
// Listen for the page load event to ensure content is fully loaded
window.addEventListener('scroll', handleScroll);
window.addEventListener('load', onLoad); // Trigger when the page is fully loaded
return () => {
window.removeEventListener('scroll', handleScroll);
window.removeEventListener('load', onLoad);
clearTimeout(scrollTimeout);
};
}, []);
useEffect(() => {
const handleLinkClick = (event: Event) => {
if (navbarCollapseRef.current && navbarCollapseRef.current.classList.contains('show')) {
const target = event.target as HTMLElement;
if (target.closest('.dropdown-text')) {
navbarCollapseRef.current.classList.remove('show');
}
}
};
const links = document.querySelectorAll('.navbar-text');
links.forEach(link => link.addEventListener('click', handleLinkClick));
return () => {
links.forEach(link => link.removeEventListener('click', handleLinkClick));
};
}, []);
// Handle the dropdown toggle state individually
/* const handleToggle = () => {
setIsLightMode(!isLightMode);
}; */
const pages = NavPages.map((item, pageIndex) => {
if ("folder" in item && item.folder) {
......@@ -20,11 +91,12 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
key={`subpage-${pageIndex}-${subpageIndex}`}
as={Link}
to={subpage.path}
>
>
{subpage.name}
</NavDropdown.Item>
);
}
return null;
});
return (
<NavDropdown
......@@ -32,7 +104,7 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
title={item.name}
renderMenuOnMount={true}
id="basic-nav-dropdown"
>
>
{folderItems}
</NavDropdown>
);
......@@ -49,7 +121,19 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
<BootstrapNavbar className="navbar-custom" expand="lg" bg="bg-transparent" variant="light"/* bg={isLightMode ? "d" : "l"} variant={isLightMode ? "dark" : "light"} */fixed="top">
<Container>
<BootstrapNavbar.Brand>
{import.meta.env.VITE_TEAM_NAME}
<div className="row">
<div className="col" style={{width: "fit-content"}}>
<a href='home'><img src='https://static.igem.wiki/teams/5247/logos-team/precyse-no-slogan.png' style={{maxHeight: "5vh"}}/> </a>
</div>
<div className="col" style={{width: "fit-content"}}>
<img src='https://static.igem.wiki/teams/5247/logos-team/line-for-logos-offblack.svg' style={{maxHeight: "5vh"}}/>
</div>
<div className="col" style={{width: "fit-content"}}>
<a href='igem-bielefeld'> <img src='https://static.igem.wiki/teams/5247/logos-team/igem-bielefeld-logo-our-colours.png' style={{maxHeight: "5vh"}}/>
</a>
</div>
</div>
</BootstrapNavbar.Brand>
<BootstrapNavbar.Toggle aria-controls="basic-navbar-nav"/>
<BootstrapNavbar.Collapse id="basic-navbar-nav">
......@@ -58,8 +142,11 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
{isLightMode ? '🌙' : '🔆' }
</button> */}
{pages}
</Nav>
</BootstrapNavbar.Collapse>
</Nav>
</BootstrapNavbar.Collapse>
<div id="scroll-progress" className="scroll-progress" ref={progressBarRef}>
</div>
</Container>
</BootstrapNavbar>
);
......
src/pages.ts
+ 1
− 1
View file @ a00c8874
......@@ -254,7 +254,7 @@ export const NavPages: (Page | PageRef | Folder)[] = [
{
name: "Project Description",
title: "Project Description",
path: "/description?changeTo=Abstract"
path: "/description?scrollTo=Abstract"
},
{
name: "Engineering",
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment