Initial commit of Dreams POS React template
This commit is contained in:
tuanOts
@@ -0,0 +1,689 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import FeatherIcon from "feather-icons-react";
|
||||
import ImageWithBasePath from "../../core/img/imagewithbasebath";
|
||||
import { Search, XCircle } from "react-feather";
|
||||
import { all_routes } from "../../Router/all_routes";
|
||||
|
||||
const Header = () => {
|
||||
const route = all_routes;
|
||||
const [toggle, SetToggle] = useState(false);
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
|
||||
const isElementVisible = (element) => {
|
||||
return element.offsetWidth > 0 || element.offsetHeight > 0;
|
||||
};
|
||||
|
||||
const slideDownSubmenu = () => {
|
||||
const subdropPlusUl = document.getElementsByClassName("subdrop");
|
||||
for (let i = 0; i < subdropPlusUl.length; i++) {
|
||||
const submenu = subdropPlusUl[i].nextElementSibling;
|
||||
if (submenu && submenu.tagName.toLowerCase() === "ul") {
|
||||
submenu.style.display = "block";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const slideUpSubmenu = () => {
|
||||
const subdropPlusUl = document.getElementsByClassName("subdrop");
|
||||
for (let i = 0; i < subdropPlusUl.length; i++) {
|
||||
const submenu = subdropPlusUl[i].nextElementSibling;
|
||||
if (submenu && submenu.tagName.toLowerCase() === "ul") {
|
||||
submenu.style.display = "none";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleMouseover = (e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
const body = document.body;
|
||||
const toggleBtn = document.getElementById("toggle_btn");
|
||||
|
||||
if (
|
||||
body.classList.contains("mini-sidebar") &&
|
||||
isElementVisible(toggleBtn)
|
||||
) {
|
||||
const target = e.target.closest(".sidebar, .header-left");
|
||||
|
||||
if (target) {
|
||||
body.classList.add("expand-menu");
|
||||
slideDownSubmenu();
|
||||
} else {
|
||||
body.classList.remove("expand-menu");
|
||||
slideUpSubmenu();
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mouseover", handleMouseover);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mouseover", handleMouseover);
|
||||
};
|
||||
}, []); // Empty dependency array ensures that the effect runs only once on mount
|
||||
useEffect(() => {
|
||||
const handleFullscreenChange = () => {
|
||||
setIsFullscreen(
|
||||
document.fullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.webkitFullscreenElement ||
|
||||
document.msFullscreenElement
|
||||
);
|
||||
};
|
||||
|
||||
document.addEventListener("fullscreenchange", handleFullscreenChange);
|
||||
document.addEventListener("mozfullscreenchange", handleFullscreenChange);
|
||||
document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
|
||||
document.addEventListener("msfullscreenchange", handleFullscreenChange);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("fullscreenchange", handleFullscreenChange);
|
||||
document.removeEventListener(
|
||||
"mozfullscreenchange",
|
||||
handleFullscreenChange
|
||||
);
|
||||
document.removeEventListener(
|
||||
"webkitfullscreenchange",
|
||||
handleFullscreenChange
|
||||
);
|
||||
document.removeEventListener(
|
||||
"msfullscreenchange",
|
||||
handleFullscreenChange
|
||||
);
|
||||
};
|
||||
}, []);
|
||||
const handlesidebar = () => {
|
||||
document.body.classList.toggle("mini-sidebar");
|
||||
SetToggle((current) => !current);
|
||||
};
|
||||
const expandMenu = () => {
|
||||
document.body.classList.remove("expand-menu");
|
||||
};
|
||||
const expandMenuOpen = () => {
|
||||
document.body.classList.add("expand-menu");
|
||||
};
|
||||
const sidebarOverlay = () => {
|
||||
document?.querySelector(".main-wrapper")?.classList?.toggle("slide-nav");
|
||||
document?.querySelector(".sidebar-overlay")?.classList?.toggle("opened");
|
||||
document?.querySelector("html")?.classList?.toggle("menu-opened");
|
||||
};
|
||||
|
||||
let pathname = location.pathname;
|
||||
|
||||
const exclusionArray = [
|
||||
"/reactjs/template/dream-pos/index-three",
|
||||
"/reactjs/template/dream-pos/index-one",
|
||||
];
|
||||
if (exclusionArray.indexOf(window.location.pathname) >= 0) {
|
||||
return "";
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const toggleFullscreen = (elem) => {
|
||||
elem = elem || document.documentElement;
|
||||
if (
|
||||
!document.fullscreenElement &&
|
||||
!document.mozFullScreenElement &&
|
||||
!document.webkitFullscreenElement &&
|
||||
!document.msFullscreenElement
|
||||
) {
|
||||
if (elem.requestFullscreen) {
|
||||
elem.requestFullscreen();
|
||||
} else if (elem.msRequestFullscreen) {
|
||||
elem.msRequestFullscreen();
|
||||
} else if (elem.mozRequestFullScreen) {
|
||||
elem.mozRequestFullScreen();
|
||||
} else if (elem.webkitRequestFullscreen) {
|
||||
elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
|
||||
}
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="header">
|
||||
{/* Logo */}
|
||||
<div
|
||||
className={`header-left ${toggle ? "" : "active"}`}
|
||||
onMouseLeave={expandMenu}
|
||||
onMouseOver={expandMenuOpen}
|
||||
>
|
||||
<Link to="/dashboard" className="logo logo-normal">
|
||||
<ImageWithBasePath src="assets/img/logo.png" alt="img" />
|
||||
</Link>
|
||||
<Link to="/dashboard" className="logo logo-white">
|
||||
<ImageWithBasePath src="assets/img/logo-white.png" alt="img" />
|
||||
</Link>
|
||||
<Link to="/dashboard" className="logo-small">
|
||||
<ImageWithBasePath src="assets/img/logo-small.png" alt="img" />
|
||||
</Link>
|
||||
<Link
|
||||
id="toggle_btn"
|
||||
to="#"
|
||||
style={{
|
||||
display: pathname.includes("tasks")
|
||||
? "none"
|
||||
: pathname.includes("compose")
|
||||
? "none"
|
||||
: "",
|
||||
}}
|
||||
onClick={handlesidebar}
|
||||
>
|
||||
<FeatherIcon icon="chevrons-left" className="feather-16" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* /Logo */}
|
||||
<Link
|
||||
id="mobile_btn"
|
||||
className="mobile_btn"
|
||||
to="#"
|
||||
onClick={sidebarOverlay}
|
||||
>
|
||||
<span className="bar-icon">
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
</span>
|
||||
</Link>
|
||||
{/* Header Menu */}
|
||||
<ul className="nav user-menu">
|
||||
{/* Search */}
|
||||
<li className="nav-item nav-searchinputs">
|
||||
<div className="top-nav-search">
|
||||
<Link to="#" className="responsive-search">
|
||||
<Search />
|
||||
</Link>
|
||||
<form action="#" className="dropdown">
|
||||
<div
|
||||
className="searchinputs dropdown-toggle"
|
||||
id="dropdownMenuClickable"
|
||||
data-bs-toggle="dropdown"
|
||||
data-bs-auto-close="false"
|
||||
>
|
||||
<input type="text" placeholder="Search" />
|
||||
<div className="search-addon">
|
||||
<span>
|
||||
<XCircle className="feather-14" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="dropdown-menu search-dropdown"
|
||||
aria-labelledby="dropdownMenuClickable"
|
||||
>
|
||||
<div className="search-info">
|
||||
<h6>
|
||||
<span>
|
||||
<i data-feather="search" className="feather-16" />
|
||||
</span>
|
||||
Recent Searches
|
||||
</h6>
|
||||
<ul className="search-tags">
|
||||
<li>
|
||||
<Link to="#">Products</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">Sales</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">Applications</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="search-info">
|
||||
<h6>
|
||||
<span>
|
||||
<i data-feather="help-circle" className="feather-16" />
|
||||
</span>
|
||||
Help
|
||||
</h6>
|
||||
<p>
|
||||
How to Change Product Volume from 0 to 200 on Inventory
|
||||
management
|
||||
</p>
|
||||
<p>Change Product Name</p>
|
||||
</div>
|
||||
<div className="search-info">
|
||||
<h6>
|
||||
<span>
|
||||
<i data-feather="user" className="feather-16" />
|
||||
</span>
|
||||
Customers
|
||||
</h6>
|
||||
<ul className="customers">
|
||||
<li>
|
||||
<Link to="#">
|
||||
Aron Varu
|
||||
<ImageWithBasePath
|
||||
src="assets/img/profiles/avator1.jpg"
|
||||
alt
|
||||
className="img-fluid"
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">
|
||||
Jonita
|
||||
<ImageWithBasePath
|
||||
src="assets/img/profiles/avatar-01.jpg"
|
||||
alt
|
||||
className="img-fluid"
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="#">
|
||||
Aaron
|
||||
<ImageWithBasePath
|
||||
src="assets/img/profiles/avatar-10.jpg"
|
||||
alt
|
||||
className="img-fluid"
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
{/* /Search */}
|
||||
|
||||
{/* Select Store */}
|
||||
<li className="nav-item dropdown has-arrow main-drop select-store-dropdown">
|
||||
<Link
|
||||
to="#"
|
||||
className="dropdown-toggle nav-link select-store"
|
||||
data-bs-toggle="dropdown"
|
||||
>
|
||||
<span className="user-info">
|
||||
<span className="user-letter">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/store/store-01.png"
|
||||
alt="Store Logo"
|
||||
className="img-fluid"
|
||||
/>
|
||||
</span>
|
||||
<span className="user-detail">
|
||||
<span className="user-name">Select Store</span>
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
<div className="dropdown-menu dropdown-menu-right">
|
||||
<Link to="#" className="dropdown-item">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/store/store-01.png"
|
||||
alt="Store Logo"
|
||||
className="img-fluid"
|
||||
/>{" "}
|
||||
Grocery Alpha
|
||||
</Link>
|
||||
<Link to="#" className="dropdown-item">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/store/store-02.png"
|
||||
alt="Store Logo"
|
||||
className="img-fluid"
|
||||
/>{" "}
|
||||
Grocery Apex
|
||||
</Link>
|
||||
<Link to="#" className="dropdown-item">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/store/store-03.png"
|
||||
alt="Store Logo"
|
||||
className="img-fluid"
|
||||
/>{" "}
|
||||
Grocery Bevy
|
||||
</Link>
|
||||
<Link to="#" className="dropdown-item">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/store/store-04.png"
|
||||
alt="Store Logo"
|
||||
className="img-fluid"
|
||||
/>{" "}
|
||||
Grocery Eden
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
{/* /Select Store */}
|
||||
|
||||
{/* Flag */}
|
||||
<li className="nav-item dropdown has-arrow flag-nav nav-item-box">
|
||||
<Link
|
||||
className="nav-link dropdown-toggle"
|
||||
data-bs-toggle="dropdown"
|
||||
to="#"
|
||||
role="button"
|
||||
>
|
||||
{/* <i data-feather="globe" /> */}
|
||||
{/* <FeatherIcon icon="globe" /> */}
|
||||
<ImageWithBasePath
|
||||
src="assets/img/flags/us.png"
|
||||
alt="img"
|
||||
height={16}
|
||||
/>
|
||||
</Link>
|
||||
<div className="dropdown-menu dropdown-menu-right">
|
||||
<Link to="#" className="dropdown-item active">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/flags/us.png"
|
||||
alt="img"
|
||||
height={16}
|
||||
/>
|
||||
English
|
||||
</Link>
|
||||
<Link to="#" className="dropdown-item">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/flags/fr.png"
|
||||
alt="img"
|
||||
height={16}
|
||||
/>{" "}
|
||||
French
|
||||
</Link>
|
||||
<Link to="#" className="dropdown-item">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/flags/es.png"
|
||||
alt="img"
|
||||
height={16}
|
||||
/>{" "}
|
||||
Spanish
|
||||
</Link>
|
||||
<Link to="#" className="dropdown-item">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/flags/de.png"
|
||||
alt="img"
|
||||
height={16}
|
||||
/>{" "}
|
||||
German
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
{/* /Flag */}
|
||||
<li className="nav-item nav-item-box">
|
||||
<Link
|
||||
to="#"
|
||||
id="btnFullscreen"
|
||||
onClick={() => toggleFullscreen()}
|
||||
className={isFullscreen ? "Exit Fullscreen" : "Go Fullscreen"}
|
||||
>
|
||||
{/* <i data-feather="maximize" /> */}
|
||||
<FeatherIcon icon="maximize" />
|
||||
</Link>
|
||||
</li>
|
||||
<li className="nav-item nav-item-box">
|
||||
<Link to="/email">
|
||||
{/* <i data-feather="mail" /> */}
|
||||
<FeatherIcon icon="mail" />
|
||||
<span className="badge rounded-pill">1</span>
|
||||
</Link>
|
||||
</li>
|
||||
{/* Notifications */}
|
||||
<li className="nav-item dropdown nav-item-box">
|
||||
<Link
|
||||
to="#"
|
||||
className="dropdown-toggle nav-link"
|
||||
data-bs-toggle="dropdown"
|
||||
>
|
||||
{/* <i data-feather="bell" /> */}
|
||||
<FeatherIcon icon="bell" />
|
||||
<span className="badge rounded-pill">2</span>
|
||||
</Link>
|
||||
<div className="dropdown-menu notifications">
|
||||
<div className="topnav-dropdown-header">
|
||||
<span className="notification-title">Notifications</span>
|
||||
<Link to="#" className="clear-noti">
|
||||
{" "}
|
||||
Clear All{" "}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="noti-content">
|
||||
<ul className="notification-list">
|
||||
<li className="notification-message active">
|
||||
<Link to="/activities">
|
||||
<div className="media d-flex">
|
||||
<span className="avatar flex-shrink-0">
|
||||
<ImageWithBasePath
|
||||
alt="img"
|
||||
src="assets/img/profiles/avatar-02.jpg"
|
||||
/>
|
||||
</span>
|
||||
<div className="media-body flex-grow-1">
|
||||
<p className="noti-details">
|
||||
<span className="noti-title">John Doe</span> added
|
||||
new task{" "}
|
||||
<span className="noti-title">
|
||||
Patient appointment booking
|
||||
</span>
|
||||
</p>
|
||||
<p className="noti-time">
|
||||
<span className="notification-time">
|
||||
4 mins ago
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="notification-message">
|
||||
<Link to="/activities">
|
||||
<div className="media d-flex">
|
||||
<span className="avatar flex-shrink-0">
|
||||
<ImageWithBasePath
|
||||
alt="img"
|
||||
src="assets/img/profiles/avatar-03.jpg"
|
||||
/>
|
||||
</span>
|
||||
<div className="media-body flex-grow-1">
|
||||
<p className="noti-details">
|
||||
<span className="noti-title">Tarah Shropshire</span>{" "}
|
||||
changed the task name{" "}
|
||||
<span className="noti-title">
|
||||
Appointment booking with payment gateway
|
||||
</span>
|
||||
</p>
|
||||
<p className="noti-time">
|
||||
<span className="notification-time">
|
||||
6 mins ago
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="notification-message">
|
||||
<Link to="/activities">
|
||||
<div className="media d-flex">
|
||||
<span className="avatar flex-shrink-0">
|
||||
<ImageWithBasePath
|
||||
alt="img"
|
||||
src="assets/img/profiles/avatar-06.jpg"
|
||||
/>
|
||||
</span>
|
||||
<div className="media-body flex-grow-1">
|
||||
<p className="noti-details">
|
||||
<span className="noti-title">Misty Tison</span>{" "}
|
||||
added{" "}
|
||||
<span className="noti-title">Domenic Houston</span>{" "}
|
||||
and <span className="noti-title">Claire Mapes</span>{" "}
|
||||
to project{" "}
|
||||
<span className="noti-title">
|
||||
Doctor available module
|
||||
</span>
|
||||
</p>
|
||||
<p className="noti-time">
|
||||
<span className="notification-time">
|
||||
8 mins ago
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="notification-message">
|
||||
<Link to="/activities">
|
||||
<div className="media d-flex">
|
||||
<span className="avatar flex-shrink-0">
|
||||
<ImageWithBasePath
|
||||
alt="img"
|
||||
src="assets/img/profiles/avatar-17.jpg"
|
||||
/>
|
||||
</span>
|
||||
<div className="media-body flex-grow-1">
|
||||
<p className="noti-details">
|
||||
<span className="noti-title">Rolland Webber</span>{" "}
|
||||
completed task{" "}
|
||||
<span className="noti-title">
|
||||
Patient and Doctor video conferencing
|
||||
</span>
|
||||
</p>
|
||||
<p className="noti-time">
|
||||
<span className="notification-time">
|
||||
12 mins ago
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="notification-message">
|
||||
<Link to="/activities">
|
||||
<div className="media d-flex">
|
||||
<span className="avatar flex-shrink-0">
|
||||
<ImageWithBasePath
|
||||
alt="img"
|
||||
src="assets/img/profiles/avatar-13.jpg"
|
||||
/>
|
||||
</span>
|
||||
<div className="media-body flex-grow-1">
|
||||
<p className="noti-details">
|
||||
<span className="noti-title">Bernardo Galaviz</span>{" "}
|
||||
added new task{" "}
|
||||
<span className="noti-title">
|
||||
Private chat module
|
||||
</span>
|
||||
</p>
|
||||
<p className="noti-time">
|
||||
<span className="notification-time">
|
||||
2 days ago
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="topnav-dropdown-footer">
|
||||
<Link to="/activities">View all Notifications</Link>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* /Notifications */}
|
||||
<li className="nav-item nav-item-box">
|
||||
<Link to="/general-settings">
|
||||
{/* <i data-feather="settings" /> */}
|
||||
<FeatherIcon icon="settings" />
|
||||
</Link>
|
||||
</li>
|
||||
<li className="nav-item dropdown has-arrow main-drop">
|
||||
<Link
|
||||
to="#"
|
||||
className="dropdown-toggle nav-link userset"
|
||||
data-bs-toggle="dropdown"
|
||||
>
|
||||
<span className="user-info">
|
||||
<span className="user-letter">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/profiles/avator1.jpg"
|
||||
alt="img"
|
||||
className="img-fluid"
|
||||
/>
|
||||
</span>
|
||||
<span className="user-detail">
|
||||
<span className="user-name">John Smilga</span>
|
||||
<span className="user-role">Super Admin</span>
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
<div className="dropdown-menu menu-drop-user">
|
||||
<div className="profilename">
|
||||
<div className="profileset">
|
||||
<span className="user-img">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/profiles/avator1.jpg"
|
||||
alt="img"
|
||||
/>
|
||||
<span className="status online" />
|
||||
</span>
|
||||
<div className="profilesets">
|
||||
<h6>John Smilga</h6>
|
||||
<h5>Super Admin</h5>
|
||||
</div>
|
||||
</div>
|
||||
<hr className="m-0" />
|
||||
<Link className="dropdown-item" to={route.route}>
|
||||
<i className="me-2" data-feather="user" /> My Profile
|
||||
</Link>
|
||||
<Link className="dropdown-item" to={route.generalsettings}>
|
||||
<i className="me-2" data-feather="settings" />
|
||||
Settings
|
||||
</Link>
|
||||
<hr className="m-0" />
|
||||
<Link className="dropdown-item logout pb-0" to="/signin">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/icons/log-out.svg"
|
||||
alt="img"
|
||||
className="me-2"
|
||||
/>
|
||||
Logout
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
{/* /Header Menu */}
|
||||
{/* Mobile Menu */}
|
||||
<div className="dropdown mobile-user-menu">
|
||||
<Link
|
||||
to="#"
|
||||
className="nav-link dropdown-toggle"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="fa fa-ellipsis-v" />
|
||||
</Link>
|
||||
<div className="dropdown-menu dropdown-menu-right">
|
||||
<Link className="dropdown-item" to="profile">
|
||||
My Profile
|
||||
</Link>
|
||||
<Link className="dropdown-item" to="generalsettings">
|
||||
Settings
|
||||
</Link>
|
||||
<Link className="dropdown-item" to="signin">
|
||||
Logout
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{/* /Mobile Menu */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from "react";
|
||||
|
||||
export default function LoadingSpinner() {
|
||||
return (
|
||||
<div id="global-loader">
|
||||
<div className="whirly-loader"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
import React, { useState } from "react";
|
||||
import Scrollbars from "react-custom-scrollbars-2";
|
||||
// import { useSelector } from "react-redux";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import { SidebarData } from "../../core/json/siderbar_data";
|
||||
import HorizontalSidebar from "./horizontalSidebar";
|
||||
import CollapsedSidebar from "./collapsedSidebar";
|
||||
|
||||
const Sidebar = () => {
|
||||
// const SidebarData = useSelector((state) => state.sidebar_data);
|
||||
// console.log(sidebarData, "sidebar");
|
||||
|
||||
const Location = useLocation();
|
||||
|
||||
console.log("Location.pathname", Location.pathname);
|
||||
|
||||
const [subOpen, setSubopen] = useState("");
|
||||
const [subsidebar, setSubsidebar] = useState("");
|
||||
|
||||
const toggleSidebar = (title) => {
|
||||
if (title == subOpen) {
|
||||
setSubopen("");
|
||||
} else {
|
||||
setSubopen(title);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleSubsidebar = (subitem) => {
|
||||
if (subitem == subsidebar) {
|
||||
setSubsidebar("");
|
||||
} else {
|
||||
setSubsidebar(subitem);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="sidebar" id="sidebar">
|
||||
<Scrollbars>
|
||||
<div className="sidebar-inner slimscroll">
|
||||
<div id="sidebar-menu" className="sidebar-menu">
|
||||
<ul>
|
||||
{SidebarData?.map((mainLabel, index) => (
|
||||
<li className="submenu-open" key={index}>
|
||||
<h6 className="submenu-hdr">{mainLabel?.label}</h6>
|
||||
|
||||
<ul>
|
||||
{mainLabel?.submenuItems?.map((title, i) => {
|
||||
let link_array = [];
|
||||
title?.submenuItems?.map((link) => {
|
||||
link_array?.push(link?.link);
|
||||
if (link?.submenu) {
|
||||
link?.submenuItems?.map((item) => {
|
||||
link_array?.push(item?.link);
|
||||
});
|
||||
}
|
||||
return link_array;
|
||||
});
|
||||
title.links = link_array;
|
||||
return (
|
||||
<>
|
||||
<li className="submenu" key={i}>
|
||||
<Link
|
||||
to={title?.link}
|
||||
onClick={() => toggleSidebar(title?.label)}
|
||||
className={`${
|
||||
subOpen == title?.label ? "subdrop" : ""
|
||||
} ${
|
||||
title?.links?.includes(Location.pathname)
|
||||
? "active"
|
||||
: ""
|
||||
}
|
||||
`}
|
||||
>
|
||||
{/* <Grid /> */}
|
||||
{title?.icon}
|
||||
<span>{title?.label}</span>
|
||||
<span
|
||||
className={title?.submenu ? "menu-arrow" : ""}
|
||||
/>
|
||||
</Link>
|
||||
<ul
|
||||
style={{
|
||||
display:
|
||||
subOpen == title?.label ? "block" : "none",
|
||||
}}
|
||||
>
|
||||
{title?.submenuItems?.map(
|
||||
(item, titleIndex) => (
|
||||
<li
|
||||
className="submenu submenu-two"
|
||||
key={titleIndex}
|
||||
>
|
||||
{/* {item.lebel} */}
|
||||
<Link
|
||||
to={item?.link}
|
||||
className={
|
||||
item?.submenuItems
|
||||
?.map((link) => link?.link)
|
||||
.includes(Location.pathname) ||
|
||||
item?.link == Location.pathname
|
||||
? "active"
|
||||
: ""
|
||||
}
|
||||
onClick={() => {
|
||||
toggleSubsidebar(item?.label);
|
||||
}}
|
||||
>
|
||||
{item?.label}
|
||||
<span
|
||||
className={
|
||||
item?.submenu ? "menu-arrow" : ""
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
<ul
|
||||
style={{
|
||||
display:
|
||||
subsidebar == item?.label
|
||||
? "block"
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
{item?.submenuItems?.map(
|
||||
(items, titleIndex) => (
|
||||
<li key={titleIndex}>
|
||||
{/* {item.lebel} */}
|
||||
<Link
|
||||
to={items?.link}
|
||||
className={`${
|
||||
subsidebar == items?.label
|
||||
? "submenu-two subdrop"
|
||||
: "submenu-two"
|
||||
} ${
|
||||
items?.submenuItems
|
||||
?.map((link) => link.link)
|
||||
.includes(
|
||||
Location.pathname
|
||||
) ||
|
||||
items?.link ==
|
||||
Location.pathname
|
||||
? "active"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{items?.label}
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
</li>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Scrollbars>
|
||||
</div>
|
||||
<HorizontalSidebar />
|
||||
<CollapsedSidebar />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,544 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Settings } from "react-feather";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { Link } from "react-router-dom";
|
||||
import { setLayoutChange } from "../core/redux/action";
|
||||
import ImageWithBasePath from "../core/img/imagewithbasebath";
|
||||
|
||||
const ThemeSettings = () => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const [show, setShow] = useState(false);
|
||||
const [layoutColor, setlayoutColor] = useState(
|
||||
localStorage.getItem("colorschema")
|
||||
);
|
||||
|
||||
const [layoutView, setLayoutView] = useState(
|
||||
localStorage.getItem("layoutStyling")
|
||||
);
|
||||
|
||||
const [layoutTheme, setLayoutTheme] = useState(
|
||||
localStorage.getItem("layoutThemeColors")
|
||||
);
|
||||
|
||||
const showSettings = () => {
|
||||
setShow(!show);
|
||||
};
|
||||
|
||||
const DarkThemes = () => {
|
||||
localStorage.setItem("colorschema", "dark_mode");
|
||||
console.log("check dark mode");
|
||||
setlayoutColor("dark_mode");
|
||||
document.documentElement.setAttribute("data-layout-mode", "dark_mode");
|
||||
};
|
||||
|
||||
const LightThemes = () => {
|
||||
localStorage.setItem("colorschema", "light_mode");
|
||||
setlayoutColor("light_mode");
|
||||
document.documentElement.setAttribute("data-layout-mode", "light_mode");
|
||||
};
|
||||
|
||||
const DefaultStyle = () => {
|
||||
localStorage.setItem("layoutStyling", "default");
|
||||
setLayoutView("default");
|
||||
dispatch(setLayoutChange("default"));
|
||||
document.documentElement.setAttribute("data-layout-style", "default");
|
||||
};
|
||||
|
||||
const LayoutBox = () => {
|
||||
localStorage.setItem("layoutStyling", "box");
|
||||
setLayoutView("box");
|
||||
dispatch(setLayoutChange("box"));
|
||||
document.documentElement.setAttribute("data-layout-style", "box");
|
||||
};
|
||||
const collapsedLayout = () => {
|
||||
localStorage.setItem("layoutStyling", "collapsed");
|
||||
setLayoutView("collapsed");
|
||||
dispatch(setLayoutChange("collapsed"));
|
||||
document.documentElement.setAttribute("data-layout-style", "collapsed");
|
||||
};
|
||||
|
||||
const HorizontalLayout = () => {
|
||||
localStorage.setItem("layoutStyling", "horizontal");
|
||||
setLayoutView("horizontal");
|
||||
dispatch(setLayoutChange("horizontal"));
|
||||
document.documentElement.setAttribute("data-layout-style", "horizontal");
|
||||
};
|
||||
const modernLayout = () => {
|
||||
localStorage.setItem("layoutStyling", "modern");
|
||||
setLayoutView("modern");
|
||||
dispatch(setLayoutChange("modern"));
|
||||
document.documentElement.setAttribute("data-layout-style", "modern");
|
||||
};
|
||||
|
||||
const LayoutGrey = () => {
|
||||
localStorage.setItem("layoutThemeColors", "grey");
|
||||
setLayoutTheme("grey");
|
||||
document.documentElement.setAttribute("data-nav-color", "grey");
|
||||
};
|
||||
|
||||
const LayoutDark = () => {
|
||||
localStorage.setItem("layoutThemeColors", "dark");
|
||||
setLayoutTheme("dark");
|
||||
document.documentElement.setAttribute("data-nav-color", "dark");
|
||||
};
|
||||
const LayoutLight = () => {
|
||||
localStorage.setItem("layoutThemeColors", "light");
|
||||
setLayoutTheme("light");
|
||||
document.documentElement.setAttribute("data-nav-color", "light");
|
||||
};
|
||||
const ResetData = () => {
|
||||
localStorage.setItem("colorschema", "light_mode");
|
||||
localStorage.setItem("layoutStyling", "default");
|
||||
localStorage.setItem("layoutThemeColors", "light");
|
||||
|
||||
setlayoutColor("light_mode");
|
||||
setLayoutView("default");
|
||||
setLayoutTheme("light");
|
||||
|
||||
document.documentElement.setAttribute("data-layout-mode", "light_mode");
|
||||
document.documentElement.setAttribute("data-layout-style", "default");
|
||||
document.documentElement.setAttribute("data-nav-color", "light");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.setAttribute("data-layout-mode", layoutColor);
|
||||
document.documentElement.setAttribute("data-layout-style", layoutView);
|
||||
document.documentElement.setAttribute("data-nav-color", layoutTheme);
|
||||
}, [layoutColor, layoutTheme, layoutView]);
|
||||
return (
|
||||
<>
|
||||
<div className="customizer-links" id="setdata">
|
||||
<ul className="sticky-sidebar">
|
||||
<li className="sidebar-icons" onClick={showSettings}>
|
||||
<Link
|
||||
to="#"
|
||||
className="navigation-add"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="left"
|
||||
data-bs-original-title="Theme"
|
||||
>
|
||||
<Settings className="feather-five" />
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
show
|
||||
? "sidebar-settings nav-toggle show-settings"
|
||||
: "sidebar-settings nav-toggle"
|
||||
}
|
||||
id="layoutDiv"
|
||||
// onclick="toggleClassDetail()"
|
||||
>
|
||||
<div className="sidebar-content sticky-sidebar-one">
|
||||
<div className="sidebar-header">
|
||||
<div className="sidebar-theme-title">
|
||||
<h5>Theme Customizer</h5>
|
||||
<p>Customize & Preview in Real Time</p>
|
||||
</div>
|
||||
<div className="close-sidebar-icon d-flex">
|
||||
{/* <Link className="sidebar-refresh me-2" onclick="resetData()"> */}
|
||||
<Link className="sidebar-refresh me-2" onClick={ResetData}>
|
||||
⟳
|
||||
</Link>
|
||||
<Link className="sidebar-close" to="#" onClick={showSettings}>
|
||||
X
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sidebar-body p-0">
|
||||
<form id="theme_color" method="post">
|
||||
<div className="theme-mode mb-0">
|
||||
<div className="theme-body-main">
|
||||
<div className="theme-head">
|
||||
<h6>Theme Mode</h6>
|
||||
<p>Enjoy Dark & Light modes.</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xl-6 ere">
|
||||
<div className="layout-wrap">
|
||||
<div className="d-flex align-items-center">
|
||||
<div
|
||||
className="status-toggle d-flex align-items-center me-2"
|
||||
onClick={LightThemes}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="theme-mode"
|
||||
id="light_mode"
|
||||
className="check color-check stylemode lmode"
|
||||
defaultValue="light_mode"
|
||||
defaultChecked
|
||||
/>
|
||||
<label
|
||||
htmlFor="light_mode"
|
||||
className="checktoggles"
|
||||
>
|
||||
<ImageWithBasePath
|
||||
src="assets/img/theme/theme-img-01.jpg"
|
||||
alt="img"
|
||||
/>
|
||||
<span className="theme-name">Light Mode</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 ere">
|
||||
<div className="layout-wrap">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="status-toggle d-flex align-items-center me-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="theme-mode"
|
||||
id="dark_mode"
|
||||
className="check color-check stylemode"
|
||||
defaultValue="dark_mode"
|
||||
/>
|
||||
<label htmlFor="dark_mode" className="checktoggles">
|
||||
<div onClick={DarkThemes}>
|
||||
<ImageWithBasePath
|
||||
src="assets/img/theme/theme-img-02.jpg"
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span className="theme-name">Dark Mode</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="theme-mode border-0">
|
||||
<div className="theme-head">
|
||||
<h6>Direction</h6>
|
||||
<p>Select the direction for your app.</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xl-6 ere">
|
||||
<div className="layout-wrap">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="status-toggle d-flex align-items-center me-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="direction"
|
||||
id="ltr"
|
||||
className="check direction"
|
||||
defaultValue="ltr"
|
||||
defaultChecked
|
||||
/>
|
||||
<label htmlFor="ltr" className="checktoggles">
|
||||
<Link to="/">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/theme/theme-img-01.jpg"
|
||||
alt
|
||||
/>
|
||||
</Link>
|
||||
<span className="theme-name">LTR</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 ere">
|
||||
<div className="layout-wrap">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="status-toggle d-flex align-items-center me-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="direction"
|
||||
id="rtl"
|
||||
className="check direction"
|
||||
defaultValue="rtl"
|
||||
/>
|
||||
<label htmlFor="rtl" className="checktoggles">
|
||||
<Link
|
||||
to="https://dreamspos.dreamstechnologies.com/react/template-rtl/"
|
||||
target="_blank"
|
||||
>
|
||||
<ImageWithBasePath
|
||||
src="assets/img/theme/theme-img-03.jpg"
|
||||
alt
|
||||
/>
|
||||
</Link>
|
||||
<span className="theme-name">RTL</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="theme-mode border-0 mb-0">
|
||||
<div className="theme-head">
|
||||
<h6>Layout Mode</h6>
|
||||
<p>Select the primary layout style for your app.</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xl-6 ere">
|
||||
<div className="layout-wrap">
|
||||
<div className="d-flex align-items-center">
|
||||
<div
|
||||
className="status-toggle d-flex align-items-center me-2"
|
||||
onClick={DefaultStyle}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="layout"
|
||||
id="default_layout"
|
||||
className="check layout-mode"
|
||||
defaultValue="default"
|
||||
/>
|
||||
<label
|
||||
htmlFor="default_layout"
|
||||
className="checktoggles"
|
||||
>
|
||||
<ImageWithBasePath
|
||||
src="assets/img/theme/theme-img-01.jpg"
|
||||
alt="img"
|
||||
/>
|
||||
<span className="theme-name">Default</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 ere">
|
||||
<div className="layout-wrap">
|
||||
<div className="d-flex align-items-center">
|
||||
<div
|
||||
className="status-toggle d-flex align-items-center me-2"
|
||||
onClick={LayoutBox}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="layout"
|
||||
id="box_layout"
|
||||
className="check layout-mode"
|
||||
defaultValue="box"
|
||||
/>
|
||||
<label
|
||||
htmlFor="box_layout"
|
||||
className="checktoggles"
|
||||
>
|
||||
<ImageWithBasePath
|
||||
src="assets/img/theme/theme-img-07.jpg"
|
||||
alt="img"
|
||||
/>
|
||||
<span className="theme-name">Box</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 ere">
|
||||
<div className="layout-wrap">
|
||||
<div className="d-flex align-items-center">
|
||||
<div
|
||||
className="status-toggle d-flex align-items-center me-2"
|
||||
onClick={collapsedLayout}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="layout"
|
||||
id="collapse_layout"
|
||||
className="check layout-mode"
|
||||
defaultValue="collapsed"
|
||||
/>
|
||||
<label
|
||||
htmlFor="collapse_layout"
|
||||
className="checktoggles"
|
||||
>
|
||||
<ImageWithBasePath
|
||||
src="assets/img/theme/theme-img-05.jpg"
|
||||
alt="img"
|
||||
/>
|
||||
<span className="theme-name">Collapsed</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 ere">
|
||||
<div className="layout-wrap">
|
||||
<div className="d-flex align-items-center">
|
||||
<div
|
||||
className="status-toggle d-flex align-items-center me-2"
|
||||
onClick={HorizontalLayout}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="layout"
|
||||
id="horizontal_layout"
|
||||
className="check layout-mode"
|
||||
defaultValue="horizontal"
|
||||
/>
|
||||
<label
|
||||
htmlFor="horizontal_layout"
|
||||
className="checktoggles"
|
||||
>
|
||||
<ImageWithBasePath
|
||||
src="assets/img/theme/theme-img-06.jpg"
|
||||
alt
|
||||
/>
|
||||
<span className="theme-name">Horizontal</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 ere">
|
||||
<div className="layout-wrap">
|
||||
<div className="d-flex align-items-center">
|
||||
<div
|
||||
className="status-toggle d-flex align-items-center me-2"
|
||||
onClick={modernLayout}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="layout"
|
||||
id="modern_layout"
|
||||
className="check layout-mode"
|
||||
defaultValue="modern"
|
||||
/>
|
||||
<label
|
||||
htmlFor="modern_layout"
|
||||
className="checktoggles"
|
||||
>
|
||||
<ImageWithBasePath
|
||||
src="assets/img/theme/theme-img-04.jpg"
|
||||
alt
|
||||
/>
|
||||
<span className="theme-name">Modern</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form id="nav_color" method="post">
|
||||
<div className="theme-mode">
|
||||
<div className="theme-head">
|
||||
<h6>Navigation Colors</h6>
|
||||
<p>Setup the color for the Navigation</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xl-4 ere">
|
||||
<div className="layout-wrap">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="status-toggle d-flex align-items-center me-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="nav_color"
|
||||
id="light_color"
|
||||
className="check nav-color"
|
||||
defaultValue="light"
|
||||
/>
|
||||
<label
|
||||
htmlFor="light_color"
|
||||
className="checktoggles"
|
||||
>
|
||||
<span
|
||||
className="theme-name"
|
||||
onClick={LayoutLight}
|
||||
>
|
||||
Light
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-4 ere">
|
||||
<div className="layout-wrap">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="status-toggle d-flex align-items-center me-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="nav_color"
|
||||
id="grey_color"
|
||||
className="check nav-color"
|
||||
defaultValue="grey"
|
||||
/>
|
||||
<label
|
||||
htmlFor="grey_color"
|
||||
className="checktoggles"
|
||||
>
|
||||
<span
|
||||
className="theme-name"
|
||||
onClick={LayoutGrey}
|
||||
>
|
||||
Grey
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-4 ere">
|
||||
<div className="layout-wrap">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="status-toggle d-flex align-items-center me-2">
|
||||
<input
|
||||
type="radio"
|
||||
name="nav_color"
|
||||
id="dark_color"
|
||||
className="check nav-color"
|
||||
defaultValue="dark"
|
||||
/>
|
||||
<label
|
||||
htmlFor="dark_color"
|
||||
className="checktoggles"
|
||||
>
|
||||
<span
|
||||
className="theme-name"
|
||||
onClick={LayoutDark}
|
||||
>
|
||||
Dark
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sidebar-footer">
|
||||
<div className="row">
|
||||
<div className="col-xl-6">
|
||||
<div className="footer-preview-btn">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary w-100"
|
||||
onClick={ResetData}
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
<div className="footer-reset-btn">
|
||||
<Link to="#" className="btn btn-primary w-100">
|
||||
Buy Now
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThemeSettings;
|
||||
Reference in New Issue
Block a user