added site logo

src/component/auth/Login2.jsx

@@ -1,13 +1,36 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { useMutation } from '@tanstack/react-query'
+
 import LoginImg from '../../assets/bg/login.svg'
 
 import { Link, useNavigate } from 'react-router-dom'
 import siteLinks from '../../links/siteLinks'
+import { loginUser } from '../../services/services'
 
 export default function Login() {
 
   const navigate = useNavigate()
 
+  const [fields, setFields] = useState({
+    username: '',
+    password: ''
+  })
+
+  const handleChange = ({target:{name, value}}) => {
+    console.log('working')
+    setFields(prev => ({...prev, [name]:value}))
+  }
+
+  const login = useMutation({
+    mutationFn: (fields) => {
+      return loginUser('panel/auth/login', fields)
+    },
+    onError: (error) => {
+        console.log('error', error)
+        navigate('/dash') // remove later
+      },
+  })
+
   return (
     <div className="app">
         <div className="app-wrap">
@@ -25,13 +48,13 @@ export default function Login() {
                                                 <div className="col-12">
                                                     <div className="form-group">
                                                         <label className="control-label">User Name*</label>
-                                                        <input type="text" className="form-control" placeholder="Username" />
+                                                        <input name='username' value={fields.username} onChange={handleChange} type="text" className="form-control" placeholder="Username" />
                                                     </div>
                                                 </div>
                                                 <div className="col-12">
                                                     <div className="form-group">
                                                         <label className="control-label">Password*</label>
-                                                        <input type="password" className="form-control" placeholder="Password" />
+                                                        <input name='password' value={fields.password} onChange={handleChange} type="password" className="form-control" placeholder="Password" />
                                                     </div>
                                                 </div>
                                                 <div className="col-12">
@@ -46,7 +69,7 @@ export default function Login() {
                                                     </div>
                                                 </div>
                                                 <div className="col-12 mt-3">
-                                                    <button type='button' onClick={()=>{navigate(siteLinks.dash)}} className="btn btn-primary text-uppercase">Sign In</button>
+                                                    <button type='button' onClick={()=>{login.mutate(fields)}} className="btn btn-primary text-uppercase">{login.isPending ? 'loading...' : 'Sign In'}</button>
                                                 </div>
                                                 <div className="col-12  mt-3">
                                                     <p>Don't have an account ?<Link to={siteLinks.signup}> Sign Up</Link></p>

src/component/layout/layoutcom/UserHeader.jsx

@@ -9,6 +9,11 @@ export default function UserHeader(){
         document.body.classList.toggle('sidebar-toggled')
     }
 
+    const removeSidebar = (e) => {
+        e.preventDefault()
+        document.body.classList.remove('sidebar-toggled')
+    }
+
     // const toggleSidebarMini = (e) => {
     //     e.preventDefault()
     // }
@@ -23,7 +28,7 @@ export default function UserHeader(){
                         <img src={getImage('logo-icon.png')} className="img-fluid logo-mobile" alt="logo"/>
                     </a>
                 </div>
-                <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+                <button onClick={removeSidebar} className="navbar-toggler" type="button" data-bs-toggle="collapse"
                         data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                         aria-label="Toggle navigation">
                     <i className="ti ti-align-left"></i>