update
parent
87b2ccb3cf
commit
b0ae509531
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="light">
|
||||
<html lang="en" data-theme="lofi">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-spring/web": "^9.4.4",
|
||||
"@reduxjs/toolkit": "^1.8.0",
|
||||
"autoprefixer": "^10.4.2",
|
||||
"axios": "^0.26.1",
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
lockfileVersion: 5.3
|
||||
|
||||
specifiers:
|
||||
'@react-spring/web': ^9.4.4
|
||||
'@redux-devtools/core': ^3.11.0
|
||||
'@reduxjs/toolkit': ^1.8.0
|
||||
'@tailwindcss/forms': ^0.5.0
|
||||
|
@ -25,6 +26,7 @@ specifiers:
|
|||
vite: ^2.8.6
|
||||
|
||||
dependencies:
|
||||
'@react-spring/web': 9.4.4_react-dom@17.0.2+react@17.0.2
|
||||
'@reduxjs/toolkit': 1.8.0_react-redux@7.2.6+react@17.0.2
|
||||
autoprefixer: 10.4.2_postcss@8.4.8
|
||||
axios: 0.26.1
|
||||
|
@ -360,6 +362,60 @@ packages:
|
|||
fastq: 1.13.0
|
||||
dev: false
|
||||
|
||||
/@react-spring/animated/9.4.4_react@17.0.2:
|
||||
resolution: {integrity: sha512-e9xnuBaUTD+NolKikUmrGWjX8AVCPyj1GcEgjgq9E+0sXKv46UY7cm2EmB6mUDTxWIDVKebARY++xT4nGDraBQ==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0
|
||||
dependencies:
|
||||
'@react-spring/shared': 9.4.4_react@17.0.2
|
||||
'@react-spring/types': 9.4.4
|
||||
react: 17.0.2
|
||||
dev: false
|
||||
|
||||
/@react-spring/core/9.4.4_react@17.0.2:
|
||||
resolution: {integrity: sha512-llgb0ljFyjMB0JhWsaFHOi9XFT8n1jBMVs1IFY2ipIBerWIRWrgUmIpakLPHTa4c4jwqTaDSwX90s2a0iN7dxQ==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0
|
||||
dependencies:
|
||||
'@react-spring/animated': 9.4.4_react@17.0.2
|
||||
'@react-spring/rafz': 9.4.4
|
||||
'@react-spring/shared': 9.4.4_react@17.0.2
|
||||
'@react-spring/types': 9.4.4
|
||||
react: 17.0.2
|
||||
dev: false
|
||||
|
||||
/@react-spring/rafz/9.4.4:
|
||||
resolution: {integrity: sha512-5ki/sQ06Mdf8AuFstSt5zbNNicRT4LZogiJttDAww1ozhuvemafNWEHxhzcULgCPCDu2s7HsroaISV7+GQWrhw==}
|
||||
dev: false
|
||||
|
||||
/@react-spring/shared/9.4.4_react@17.0.2:
|
||||
resolution: {integrity: sha512-ySVgScDZlhm/+Iy2smY9i/DDrShArY0j6zjTS/Re1lasKnhq8qigoGiAxe8xMPJNlCaj3uczCqHy3TY9bKRtfQ==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0
|
||||
dependencies:
|
||||
'@react-spring/rafz': 9.4.4
|
||||
'@react-spring/types': 9.4.4
|
||||
react: 17.0.2
|
||||
dev: false
|
||||
|
||||
/@react-spring/types/9.4.4:
|
||||
resolution: {integrity: sha512-KpxKt/D//q/t/6FBcde/RE36LKp8PpWu7kFEMLwpzMGl9RpcexunmYOQJWwmJWtkQjgE1YRr7DzBMryz6La1cQ==}
|
||||
dev: false
|
||||
|
||||
/@react-spring/web/9.4.4_react-dom@17.0.2+react@17.0.2:
|
||||
resolution: {integrity: sha512-iJmOLdhcuizriUlu/xqBc5y8KaFts+UI+iC+GxyTwBtzxA9czKiSAZW2ESuhG8stafa3jncwjfTQQp84KN36cw==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0
|
||||
dependencies:
|
||||
'@react-spring/animated': 9.4.4_react@17.0.2
|
||||
'@react-spring/core': 9.4.4_react@17.0.2
|
||||
'@react-spring/shared': 9.4.4_react@17.0.2
|
||||
'@react-spring/types': 9.4.4
|
||||
react: 17.0.2
|
||||
react-dom: 17.0.2_react@17.0.2
|
||||
dev: false
|
||||
|
||||
/@redux-devtools/core/3.11.0_34362ad81a919891909cf289bf01b934:
|
||||
resolution: {integrity: sha512-LE8GF/9pttlIOYJWqOfwbAvYAokRNHCEtCu0DfA11tksYVwIX79CpB2jIJH/KH7n1LzwXPCCl4MOFnyZH4przg==}
|
||||
peerDependencies:
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import { useState } from "react";
|
||||
import { animated, useSpring } from "@react-spring/web";
|
||||
|
||||
export default function Home() {
|
||||
let [hiddenDrawer, setHiddenDrawer] = useState(true);
|
||||
|
@ -70,27 +71,31 @@ function FileButton(props: { openLogin: () => void }) {
|
|||
}
|
||||
|
||||
function Drawer(props: { hidden: boolean; setHidden: () => void }) {
|
||||
return props.hidden ? (
|
||||
<></>
|
||||
) : (
|
||||
<div className={"absolute right-0 z-0 h-screen w-screen transition-all"}>
|
||||
<div
|
||||
className={"absolute z-40 h-screen w-screen bg-gray-400 opacity-60"}
|
||||
onClick={() => {
|
||||
console.log("hidden");
|
||||
props.setHidden();
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className={
|
||||
"absolute right-0 z-50 h-screen w-1/3 origin-right animate-fade-in-down bg-base-100"
|
||||
}
|
||||
>
|
||||
<div className={"container mt-20 flex items-center justify-center"}>
|
||||
<LoginContent />
|
||||
const styles = useSpring({
|
||||
opacity: !props.hidden ? 1 : 0,
|
||||
visibility: !props.hidden ? "visible" : "hidden",
|
||||
});
|
||||
|
||||
return (
|
||||
<animated.div style={styles}>
|
||||
<div className={"absolute right-0 z-0 h-screen w-screen"}>
|
||||
<div
|
||||
className={"absolute z-40 h-screen w-screen bg-gray-400 opacity-60"}
|
||||
onClick={() => {
|
||||
props.setHidden();
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className={
|
||||
"absolute right-0 z-50 h-screen w-1/3 origin-right bg-base-100"
|
||||
}
|
||||
>
|
||||
<div className={"container mt-20 flex items-center justify-center"}>
|
||||
<LoginContent />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</animated.div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue