From 66cb6352e4460d3aa36cc066b8424eca189f9c90 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 20 Sep 2024 21:54:52 +0200
Subject: [PATCH] sidebars
---
src/App/App.css | 17 ++++++++++++++---
src/App/App.tsx | 14 +++++++++++---
2 files changed, 25 insertions(+), 6 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index cd792f62..22b463cf 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -132,6 +132,17 @@ hr{
/* * * * * * * */
/* * * BODY* * */
/* * * * * * * */
+
+.progress-bar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 5;
+ height: 4.5rem;
+ background: var(--darkerbeige) !important;
+ transform-origin: 0%;
+}
body {
/* padding-top: 56px; */
background-color: var(--ourbeige);
@@ -236,9 +247,8 @@ color: var(--text-primary);
.sticky-top {
position: -webkit-sticky;
position: sticky !important;
- top: 0;
z-index: 1020;
- top: 80px !important;
+ top: 100px !important;
overflow-wrap: break-word;
}
.small-only{
@@ -3666,4 +3676,5 @@ a{
.sideitem ul{
margin-left: 0 !important;
padding-left: 10px !important;
-}
\ No newline at end of file
+}
+
diff --git a/src/App/App.tsx b/src/App/App.tsx
index 6764d14f..5c340bd6 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -20,9 +20,13 @@ 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";
const App = () => {
+ const { scrollYProgress } = useScroll({
+ offset: ["start start", "end end"],
+ });
+
window.scrollTo(0, 0);
const [isLoading, setIsLoading] = useState(true);
@@ -61,10 +65,13 @@ const App = () => {
) : (
<>
+
{/* Navigation */}
<Navbar />
- {/* Embed the viewer */}
-
+ <motion.div
+ className="progress-bar"
+ style={{ scaleX: scrollYProgress }}
+ />
{/* Header and PageContent */}
<Routes>
@@ -74,6 +81,7 @@ const App = () => {
path={path}
element={
<>
+
<Header />
{/* Page content */}
<div className="container-fluid">
--
GitLab