powerButton in 90% need to fix bug with route change

src/App.js

@@ -7,6 +7,7 @@ import AnimatedRoutes from './components/animatedRoutes';
 import hand from './assets/imgs/HAND.jpg';
 import phone from './assets/imgs/Iphone.png';
 import HomeButton from './components/homeButton/homeButton';
+import PowerButton from './components/powerButton/powerButton';
 
 import TopBar from './components/topBar/topBar';
 
@@ -23,6 +24,7 @@ function App() {
 		<div className='App'>
 			<div className='Frame'>
 				<Router>
+					<PowerButton />
 					<HomeButton />
 					<div className='wallpaper'></div>
 					<div className='iphoneContent'>

src/components/animatedRoutes.js

@@ -8,6 +8,7 @@ import {
 
 import LockScreen from './LockScreen/lockScreen';
 import HomeScreen from './homeScreen/homeScreen';
+import OffScreen from './offScreen/offScreen';
 
 // MAIN APPS
 import Calender from '../pages/calender/calender';
@@ -41,16 +42,20 @@ const AnimatedRoutes = () => {
 				location={location}
 				key={location.pathname}
 			>
+				<Route
+					path={'*'}
+					element={<HomeScreen />}
+				/>
 				<Route
 					path='/'
 					element={<LockScreen />}
 				></Route>
 				<Route
-					path='/homeScreen'
-					element={<HomeScreen />}
-				/>
+					path='/off'
+					element={<OffScreen />}
+				></Route>
 				<Route
-					path={'*'}
+					path='/homeScreen'
 					element={<HomeScreen />}
 				/>
 				<Route

src/components/homeButton/homeButton.css

@@ -4,7 +4,6 @@
 	bottom: 7.5%;
 	left: 50.2%;
 	transform: translateX(-50%);
-	opacity: 0;
 }
 
 .bttn {

src/components/offScreen/offScreen.css

@@ -0,0 +1,9 @@
+.phoneScreenOff {
+	position: absolute;
+	z-index: 10;
+	width: 102%;
+	height: 102%;
+
+	top: 0%;
+	background-color: rgb(11, 11, 11);
+}

src/components/offScreen/offScreen.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import './offScreen.css';
+
+const offScreen = () => {
+	return <div className='phoneScreenOff'></div>;
+};
+
+export default offScreen;

src/components/powerButton/powerButton.css

@@ -0,0 +1,15 @@
+.powerBttn {
+	position: absolute;
+	z-index: 10;
+	top: -0.5%;
+	left: 75.2%;
+	transform: translateX(-50%);
+
+	opacity: 0;
+}
+
+.bttn {
+	font-size: large;
+	transform: scaleY(1.5);
+	display: inline-block;
+}

src/components/powerButton/powerButton.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import './powerButton.css';
+
+const PowerButton = () => {
+	let location = useLocation();
+	let navigate = useNavigate();
+
+	console.log(location.pathname);
+
+	const phonePowerToggle = () => {
+		if (location.pathname === '/off') {
+			console.log('SCREEN ON');
+			navigate('/lockScreen');
+		} else {
+			navigate('/off');
+			console.log('SCREEN OFF');
+		}
+	};
+
+	return (
+		<div className='powerBttn'>
+			<Link
+				className='bttn'
+				onClick={phonePowerToggle}
+			>
+				POWER
+			</Link>
+		</div>
+	);
+};
+
+export default PowerButton;