MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

layout component started

Browse Source
This commit is contained in:
victorAnumudu
2024-12-06 03:53:30 +01:00
parent cab73be4d0
commit 53726ad8eb
10 changed files with 66 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -3,6 +3,7 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@popperjs/core": "^2.11.8",
"@testing-library/jest-dom": "^5.17.0", "@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
src/component/auth/Forgetpwd2.jsx
+2 -2
View File
@@ -36,7 +36,7 @@ export default function Forgetpwd2() {
<div className="login p-50"> <div className="login p-50">
<h1 className="mb-2">Recover Password</h1> <h1 className="mb-2">Recover Password</h1>
<p>Please enter your email.</p> <p>Please enter your email.</p>
<form action="auth-login.html" className="mt-3 mt-sm-5"> <form className="mt-3 mt-sm-5">
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div className="form-group"> <div className="form-group">
@@ -45,7 +45,7 @@ export default function Forgetpwd2() {
</div> </div>
</div> </div>
<div className="col-12 mt-3"> <div className="col-12 mt-3">
<button onClick={()=>{navigate(siteLinks.dash)}} className="btn btn-primary text-uppercase">Send</button> <button type='button' onClick={()=>{navigate(siteLinks.dash)}} className="btn btn-primary text-uppercase">Send</button>
</div> </div>
<div className="col-12 mt-3"> <div className="col-12 mt-3">
<p>Go <Link to={siteLinks.home}> Back</Link></p> <p>Go <Link to={siteLinks.home}> Back</Link></p>
src/component/auth/Login2.jsx
+2 -2
View File
@@ -36,7 +36,7 @@ export default function Login() {
<div className="login p-50"> <div className="login p-50">
<h1 className="mb-2">MERMS Panel</h1> <h1 className="mb-2">MERMS Panel</h1>
<p>Welcome back, please login to your account.</p> <p>Welcome back, please login to your account.</p>
<form action="auth-login.html" className="mt-3 mt-sm-5"> <form className="mt-3 mt-sm-5">
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div className="form-group"> <div className="form-group">
@@ -62,7 +62,7 @@ export default function Login() {
</div> </div>
</div> </div>
<div className="col-12 mt-3"> <div className="col-12 mt-3">
<button onClick={()=>{navigate(siteLinks.dash)}} className="btn btn-primary text-uppercase">Sign In</button> <button type='button' onClick={()=>{navigate(siteLinks.dash)}} className="btn btn-primary text-uppercase">Sign In</button>
</div> </div>
<div className="col-12 mt-3"> <div className="col-12 mt-3">
<p>Don't have an account ?<Link to={siteLinks.signup}> Sign Up</Link></p> <p>Don't have an account ?<Link to={siteLinks.signup}> Sign Up</Link></p>
src/component/auth/Signup2.jsx
+2 -2
View File
@@ -36,7 +36,7 @@ export default function Signup2() {
<div class="register p-5"> <div class="register p-5">
<h1 class="mb-2">MERMS Panel</h1> <h1 class="mb-2">MERMS Panel</h1>
<p>Welcome, Please create your account.</p> <p>Welcome, Please create your account.</p>
<form action="auth-register.html" class="mt-2 mt-sm-5"> <form class="mt-2 mt-sm-5">
<div class="row"> <div class="row">
<div class="col-12 col-sm-6"> <div class="col-12 col-sm-6">
<div class="form-group"> <div class="form-group">
@@ -77,7 +77,7 @@ export default function Signup2() {
</div> </div>
</div> </div>
<div class="col-12 mt-3"> <div class="col-12 mt-3">
<button onClick={()=>navigate(siteLinks.dash)} class="btn btn-primary text-uppercase">Sign up</button> <button type='button' onClick={()=>navigate(siteLinks.dash)} class="btn btn-primary text-uppercase">Sign up</button>
</div> </div>
<div class="col-12 mt-3"> <div class="col-12 mt-3">
<p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p> <p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
src/component/authorization/UserExist.jsx
+5 -1
View File
@@ -1,6 +1,8 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { Outlet } from 'react-router-dom' import { Outlet } from 'react-router-dom'
import BSMainLoader from '../loaders/BSMainLoader' import BSMainLoader from '../loaders/BSMainLoader'
import Layout from '../layout/Layout'
export default function UserExist() { export default function UserExist() {
@@ -19,7 +21,9 @@ export default function UserExist() {
{loading ? {loading ?
<BSMainLoader /> <BSMainLoader />
: :
<Outlet /> <Layout>
<Outlet />
</Layout>
} }
</> </>
) )
src/component/home/Home.jsx
+3 -17
View File
@@ -7,22 +7,8 @@ import LoaderImage from "../../parts/LoaderImage";
export default function Home() { export default function Home() {
return ( return (
<div className="app"> <>
<div className="app-wrap"> <HomeSections />
{/*<LoaderImage />*/} </>
<UserHeader />
<div className="app-container">
<aside className="app-navbar">
<UserMenu />
</aside>
<div className="app-main" id="main">
<div className="container-fluid">
<HomeSections />
</div>
</div>
</div>
<UserFooter />
</div>
</div>
) )
} }
src/component/layout/Layout.jsx
+27
View File
@@ -0,0 +1,27 @@
import React from 'react'
import UserMenu from "../../parts/UserMenu";
import UserHeader from "../../parts/UserHeader";
import UserFooter from "../../parts/UserFooter";
import { Outlet } from 'react-router-dom';
export default function Layout() {
return (
<div className="app">
<div className="app-wrap">
<UserHeader />
<div className="app-container">
<aside className="app-navbar">
<UserMenu />
</aside>
<div className="app-main" id="main">
<div className="container-fluid">
<Outlet />
</div>
</div>
</div>
<UserFooter />
</div>
</div>
)
}
src/index.js
+1
View File
@@ -5,6 +5,7 @@ import App from './App';
import { BrowserRouter } from 'react-router-dom'; import { BrowserRouter } from 'react-router-dom';
//import reportWebVitals from './reportWebVitals'; //import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap.css';
// import 'bootstrap/dist/js/bootstrap.min.js'
// import './custom.scss'; // import './custom.scss';
import './css/style.scss'; import './css/style.scss';
src/parts/UserHeader.jsx
+5 -5
View File
@@ -254,7 +254,7 @@ export default function UserHeader(){
{/* </div>*/} {/* </div>*/}
{/*</li>*/} {/*</li>*/}
<li className="nav-item dropdown user-profile"> <li className="nav-item dropdown user-profile">
<a href="javascript:void(0)" className="nav-link dropdown-toggle " id="navbarDropdown4" <a href="#" className="nav-link dropdown-toggle " id="navbarDropdown4"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="assets/img/avtar/02.jpg" alt="avtar-img" /> <img src="assets/img/avtar/02.jpg" alt="avtar-img" />
<span className="bg-success user-status"></span> <span className="bg-success user-status"></span>
@@ -272,16 +272,16 @@ export default function UserHeader(){
</div> </div>
</div> </div>
<div className="p-4"> <div className="p-4">
<a className="dropdown-item d-flex nav-link" href="javascript:void(0)"> <a className="dropdown-item d-flex nav-link" href="#">
<i className="fa fa-user pr-2 text-success"></i> Profile</a> <i className="fa fa-user pr-2 text-success"></i> Profile</a>
<a className="dropdown-item d-flex nav-link" href="javascript:void(0)"> <a className="dropdown-item d-flex nav-link" href="#">
<i className="fa fa-envelope pr-2 text-primary"></i> Inbox <i className="fa fa-envelope pr-2 text-primary"></i> Inbox
<span className="badge badge-primary ml-auto">6</span> <span className="badge badge-primary ml-auto">6</span>
</a> </a>
<a className="dropdown-item d-flex nav-link" href="javascript:void(0)"> <a className="dropdown-item d-flex nav-link" href="#">
<i className=" ti ti-settings pr-2 text-info"></i> Settings <i className=" ti ti-settings pr-2 text-info"></i> Settings
</a> </a>
<a className="dropdown-item d-flex nav-link" href="javascript:void(0)"> <a className="dropdown-item d-flex nav-link" href="#">
<i className="fa fa-compass pr-2 text-warning"></i> Need help?</a> <i className="fa fa-compass pr-2 text-warning"></i> Need help?</a>
<div className="row mt-2"> <div className="row mt-2">
<div className="col"> <div className="col">
src/parts/UserMenu.jsx
+18 -15
View File
@@ -1,39 +1,42 @@
import React from 'react' import React from 'react'
import { Link, useLocation } from 'react-router-dom'
import siteLinks from '../links/siteLinks'
export default function UserMenu() { export default function UserMenu() {
const {pathname} = useLocation()
return ( return (
<> <>
<div className="sidebar-nav scrollbar scroll_dark"> <div className="sidebar-nav scrollbar scroll_dark">
<ul className="metismenu " id="sidebarNav"> <ul className="metismenu " id="sidebarNav">
<li className="nav-static-title">Panel</li> <li className="nav-static-title">Panel</li>
<li className="active"> <li className={`${pathname == siteLinks.dash ? 'active' : ''}`}>
<a className="has-arrow" href="javascript:void(0)" aria-expanded="false"> <Link className="has-arrow" to='#' aria-expanded="false">
<i className="nav-icon ti ti-rocket"></i> <i className="nav-icon ti ti-rocket"></i>
<span className="nav-title">Dashboard</span> <span className="nav-title">Dashboard</span>
{/*<span className="nav-label label label-danger">9</span>*/} {/* <span className="nav-label label label-danger">9</span> */}
</a> </Link>
<ul aria-expanded="false"> <ul aria-expanded="false">
<li><a href='/dash'>Home</a></li> <li className={`${pathname == siteLinks.dash ? 'active' : ''}`}><Link to={siteLinks.dash}>Home</Link></li>
<li className="active"><a href='#'>Calendar</a></li> <li className={`${pathname == siteLinks.error ? 'active' : ''}`}><Link to='#'>Calendar</Link></li>
<li><a href='#'>Contacts</a></li> <li className={`${pathname == siteLinks.error ? 'active' : ''}`}><Link to='#'>Contacts</Link></li>
<li><a href='#'>Comments</a></li> <li className={`${pathname == siteLinks.error ? 'active' : ''}`}><Link to='#'>Comments</Link></li>
</ul> </ul>
</li> </li>
<li><a href="/dash" aria-expanded="false"><i className="nav-icon ti ti-comment"></i><span <li className={`${pathname == siteLinks.error ? 'active' : ''}`}><Link href="/dash" aria-expanded="false"><i className="nav-icon ti ti-comment"></i><span
className="nav-title">Reports</span></a></li> className="nav-title">Reports</span></Link></li>
<li><a className="has-arrow" href="javascript:void(0)" aria-expanded="false"><i <li className={`${pathname == siteLinks.error ? 'active' : ''}`}><Link className="has-arrow" to='#' aria-expanded="false"><i
className="nav-icon ti ti-calendar"></i><span className="nav-title">Account</span></a> className="nav-icon ti ti-calendar"></i><span className="nav-title">Account</span></Link>
<ul aria-expanded="false"> <ul aria-expanded="false">
<li><a href='/dash'>Users</a></li> <li className={`${pathname == siteLinks.error ? 'active' : ''}`}><Link to={siteLinks.dash}>Users</Link></li>
<li><a href='/dash'>Settings</a></li> <li className={`${pathname == siteLinks.error ? 'active' : ''}`}><Link to={siteLinks.dash}>Settings</Link></li>
</ul> </ul>
</li> </li>
<li className="sidebar-banner p-4 bg-gradient text-center m-3 d-block rounded"> <li className="sidebar-banner p-4 bg-gradient text-center m-3 d-block rounded">
<h5 className="text-white mb-1">MERMS Panel</h5> <h5 className="text-white mb-1">MERMS Panel</h5>
<a className="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0" href="/"> Log Out</a> <Link className="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0" to={siteLinks.login}> Log Out</Link>
</li> </li>
</ul> </ul>
</div> </div>