fix: Fix layout shifting with Copyright Component
This commit is contained in:
@@ -57,7 +57,7 @@ function App() {
|
|||||||
)}
|
)}
|
||||||
</IconsContext.Provider>
|
</IconsContext.Provider>
|
||||||
</div>
|
</div>
|
||||||
<Copyright isLoginPage={location.pathname === '/login'} />
|
<Copyright isLoginPage={location.pathname === '/login'} isLoggedIn={isLoggedIn} onLogin={handleLogin} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@@ -1,7 +1,7 @@
|
|||||||
// Copyright.jsx
|
// Copyright.jsx
|
||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
export default function Copyright({ isLoginPage }) {
|
export default function Copyright({ isLoginPage, isLoggedIn }) {
|
||||||
const [isCentered, setIsCentered] = useState(true);
|
const [isCentered, setIsCentered] = useState(true);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -17,16 +17,21 @@ export default function Copyright({ isLoginPage }) {
|
|||||||
}
|
}
|
||||||
}, [isLoginPage]);
|
}, [isLoginPage]);
|
||||||
|
|
||||||
|
// Show copyright on login page with transition, or at bottom after login
|
||||||
|
if (!isLoginPage && !isLoggedIn) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
marginTop: "1rem",
|
marginTop: "1rem",
|
||||||
transition: "all 0.8s ease-in-out",
|
transition: "all 0.8s ease-in-out",
|
||||||
position: "fixed",
|
position: isLoginPage ? "fixed" : "relative",
|
||||||
top: isCentered ? "65%" : "90%",
|
top: isLoginPage ? (isCentered ? "65%" : "90%") : "auto",
|
||||||
left: "50%",
|
left: isLoginPage ? "50%" : "auto",
|
||||||
transform: "translate(-50%, -50%)",
|
transform: isLoginPage ? "translate(-50%, -50%)" : "none"
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p>
|
<p>
|
||||||
|
Reference in New Issue
Block a user