ScrollToTop widget

sau-mili · May 30, 2024 · a72f882 · a72f882
1 parent 9933433
commit a72f882
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/src/components/Dashboard/Dashboard.css b/src/components/Dashboard/Dashboard.css
@@ -2,6 +2,17 @@
   text-align: center;
   background-color: #CAE7FE;
 }
+.scroll{
+  z-index: 10000;
+   padding: 1rem 1rem!important;
+  align-items: center !important;
+  justify-items: center !important;
+  right:20px !important;
+  margin-top: -2rem;
+  position: absolute;
+  box-shadow: 0 0 4px grey !important;
+  cursor: pointer;
+}
 
 .navbar {
   display: flex;

diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
@@ -68,6 +68,9 @@ const Dashboard = () => {
     setActiveIndex(null);
   };
 
+
+
+
 const [fix, setFix]= useState(false)
 //function for appearance of background for nav menu
 function setFixed(){
@@ -84,7 +87,17 @@ window.addEventListener("scroll", setFixed)
     //scrolltotop is for scroll to top widget
     //Then the navbar code begins
       <main>
-        <ScrollToTop color="white" style={{ backgroundColor: "#5CB6F9" }} />
+        <div className="scroll">
+        <ScrollToTop
+        smooth
+        viewBox="0 0 24 24"
+        svgPath="M16 13a1 1 0 0 1-.707-.293L12 9.414l-3.293 3.293a1 1 0 1 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0l4 4A1 1 0 0 1 16 13z M16 17a1 1 0 0 1-.707-.293L12 13.414l-3.293 3.293a1 1 0 1 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0l4 4A1 1 0 0 1 16 17z"
+
+        color="white"
+        style={{ backgroundColor: "#5CB6F9" }}
+      />
+        {/* <ScrollToTop color="white" style={{ backgroundColor: "#5CB6F9" }} /> */}
+        </div>
         <nav className={`navbar ${fix ? 'fixed' : ''}`}>
           <div className="logo">
             <img src={Logo} alt="Logo" />

diff --git a/src/components/Dashboard/chevron-up-double-svgrepo-com.svg b/src/components/Dashboard/chevron-up-double-svgrepo-com.svg