├── package ├── src │ ├── index.css │ ├── views │ │ ├── form-layouts │ │ │ ├── fb-elements │ │ │ │ ├── index.jsx │ │ │ │ └── FbDefaultForm.jsx │ │ │ └── FormLayouts.js │ │ ├── tables │ │ │ └── BasicTable.js │ │ ├── sample-page │ │ │ └── SamplePage.js │ │ ├── icons │ │ │ └── Icons.js │ │ ├── authentication │ │ │ ├── Error.js │ │ │ ├── auth │ │ │ │ ├── AuthRegister.js │ │ │ │ └── AuthLogin.js │ │ │ ├── Register.js │ │ │ └── Login.js │ │ ├── utilities │ │ │ └── Shadow.js │ │ ├── dashboard │ │ │ ├── Dashboard.js │ │ │ └── components │ │ │ │ ├── MonthlyEarnings.js │ │ │ │ ├── Blog.js │ │ │ │ ├── SalesOverview.js │ │ │ │ ├── YearlyBreakup.js │ │ │ │ ├── RecentTransactions.js │ │ │ │ └── ProductPerformance.js │ │ └── form-elements │ │ │ ├── ExAutoComplete.js │ │ │ ├── ExButton.js │ │ │ ├── ExSlider.js │ │ │ ├── ExSwitch.js │ │ │ ├── ExRadio.js │ │ │ └── ExCheckbox.js │ ├── assets │ │ └── images │ │ │ ├── products │ │ │ ├── s4.jpg │ │ │ ├── s5.jpg │ │ │ ├── s7.jpg │ │ │ ├── s11.jpg │ │ │ └── empty-shopping-bag.gif │ │ │ ├── profile │ │ │ └── user-1.jpg │ │ │ ├── backgrounds │ │ │ ├── rocket.png │ │ │ └── 404-error-idea.gif │ │ │ ├── svgs │ │ │ ├── vue-cat-icon.svg │ │ │ ├── nuxt-cat-icon.svg │ │ │ ├── angular-cat-icon.svg │ │ │ ├── tailwindcss.svg │ │ │ ├── bt-cat-icon.svg │ │ │ ├── next-cat-icon.svg │ │ │ └── react-cat-icon.svg │ │ │ └── logos │ │ │ ├── logo-adminmart.svg │ │ │ └── dark1-logo.svg │ ├── layouts │ │ ├── blank │ │ │ └── BlankLayout.js │ │ └── full │ │ │ ├── shared │ │ │ └── logo │ │ │ │ └── Logo.js │ │ │ ├── footer │ │ │ └── Footer.js │ │ │ ├── sidebar │ │ │ ├── Upgrade.js │ │ │ ├── Sidebar.js │ │ │ └── SidebarItems.js │ │ │ ├── FullLayout.js │ │ │ └── header │ │ │ ├── Profile.js │ │ │ ├── Header.js │ │ │ ├── data.js │ │ │ ├── Topbar.js │ │ │ └── LivePreviewDropdown.jsx │ ├── main.jsx │ ├── App.css │ ├── components │ │ ├── shared │ │ │ ├── BlankCard.js │ │ │ └── DashboardCard.js │ │ ├── container │ │ │ └── PageContainer.js │ │ ├── custom-scroll │ │ │ └── Scrollbar.jsx │ │ ├── forms │ │ │ ├── Button │ │ │ │ ├── SizeButton.js │ │ │ │ ├── DefaultButtonGroup.js │ │ │ │ ├── ColorButtons.js │ │ │ │ ├── IconColorButtons.js │ │ │ │ ├── TextColorButtons.js │ │ │ │ ├── OutlinedColorButtons.js │ │ │ │ └── FabDefaultButton.js │ │ │ ├── theme-elements │ │ │ │ └── CustomTextField.js │ │ │ └── AutoComplete │ │ │ │ ├── CheckboxesAutocomplete.js │ │ │ │ ├── ComboBoxAutocomplete.js │ │ │ │ ├── MultipleValuesAutocomplete.js │ │ │ │ └── SizesAutocomplete.js │ │ └── BaseCard │ │ │ └── BaseCard.js │ ├── App.jsx │ ├── theme │ │ ├── Typography.js │ │ ├── Shadows.js │ │ └── DefaultColors.js │ └── routes │ │ └── Router.js ├── .npmrc ├── netlify.toml ├── public │ ├── favicon.ico │ └── vite.svg ├── .gitignore ├── README.md ├── .eslintrc.cjs ├── index.html ├── vite.config.js └── package.json ├── hire-us.html ├── docs.html ├── LICENSE.txt ├── discount-code.html └── landingpage └── style.css /package/src/index.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package/.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true -------------------------------------------------------------------------------- /package/netlify.toml: -------------------------------------------------------------------------------- 1 | [[redirects]] 2 | from = "/*" 3 | to = "/" 4 | status = 200 -------------------------------------------------------------------------------- /package/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adminmart/modernize-react-lite/HEAD/package/public/favicon.ico -------------------------------------------------------------------------------- /package/src/views/form-layouts/fb-elements/index.jsx: -------------------------------------------------------------------------------- 1 | import FbDefaultForm from "./FbDefaultForm"; 2 | 3 | export { FbDefaultForm }; 4 | -------------------------------------------------------------------------------- /package/src/assets/images/products/s4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adminmart/modernize-react-lite/HEAD/package/src/assets/images/products/s4.jpg -------------------------------------------------------------------------------- /package/src/assets/images/products/s5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adminmart/modernize-react-lite/HEAD/package/src/assets/images/products/s5.jpg -------------------------------------------------------------------------------- /package/src/assets/images/products/s7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adminmart/modernize-react-lite/HEAD/package/src/assets/images/products/s7.jpg -------------------------------------------------------------------------------- /package/src/assets/images/products/s11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adminmart/modernize-react-lite/HEAD/package/src/assets/images/products/s11.jpg -------------------------------------------------------------------------------- /package/src/assets/images/profile/user-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adminmart/modernize-react-lite/HEAD/package/src/assets/images/profile/user-1.jpg -------------------------------------------------------------------------------- /package/src/assets/images/backgrounds/rocket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adminmart/modernize-react-lite/HEAD/package/src/assets/images/backgrounds/rocket.png -------------------------------------------------------------------------------- /package/src/assets/images/backgrounds/404-error-idea.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adminmart/modernize-react-lite/HEAD/package/src/assets/images/backgrounds/404-error-idea.gif -------------------------------------------------------------------------------- /package/src/assets/images/products/empty-shopping-bag.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adminmart/modernize-react-lite/HEAD/package/src/assets/images/products/empty-shopping-bag.gif -------------------------------------------------------------------------------- /package/src/layouts/blank/BlankLayout.js: -------------------------------------------------------------------------------- 1 | import { Outlet } from "react-router"; 2 | 3 | const BlankLayout = () => ( 4 | <> 5 | 6 | 7 | ); 8 | 9 | export default BlankLayout; 10 | -------------------------------------------------------------------------------- /package/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /hire-us.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Modernize React Mui Free Template 6 | 8 | 9 | 10 | 11 |

MatDash React Free Template

12 | https://adminmart.com/hire-us/ 13 | 14 | 15 | -------------------------------------------------------------------------------- /package/src/views/tables/BasicTable.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { Card, CardContent, Box, Typography } from "@mui/material"; 4 | 5 | import ProductPerformance from "../dashboard/components/ProductPerformance"; 6 | 7 | const BasicTable = () => { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | }; 16 | 17 | export default BasicTable; 18 | -------------------------------------------------------------------------------- /package/src/main.jsx: -------------------------------------------------------------------------------- 1 | // import React from 'react' 2 | // import ReactDOM from 'react-dom/client' 3 | // import App from './App.jsx' 4 | // import './index.css' 5 | 6 | import React, { Suspense } from 'react'; 7 | import ReactDOM from 'react-dom/client'; 8 | import App from './App'; 9 | 10 | ReactDOM.createRoot(document.getElementById('root')).render( 11 | 12 | 13 | , 14 | ) 15 | -------------------------------------------------------------------------------- /package/src/views/form-layouts/FormLayouts.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { Grid } from '@mui/material' 4 | 5 | import { FbDefaultForm } from './fb-elements/index' 6 | 7 | const FormLayouts = () => { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | ) 15 | } 16 | 17 | export default FormLayouts 18 | -------------------------------------------------------------------------------- /package/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /package/src/App.css: -------------------------------------------------------------------------------- 1 | .css-lpesjx-MuiPaper-root-MuiDrawer-paper{ 2 | top: 65px !important; 3 | } 4 | .MuiPaper-root.MuiPaper-elevation.MuiPaper-elevation0.MuiDrawer-paper.MuiDrawer-paperAnchorLeft.MuiDrawer-paperAnchorDockedLeft.css-1bdav0j{ 5 | top: 65px !important; 6 | } 7 | 8 | .MuiOutlinedInput-notchedOutline { 9 | border-color: #efefef !important; 10 | } 11 | 12 | .MuiTypography-root, 13 | .MuiListSubheader-root, 14 | .MuiChip-label { 15 | font-family: 'Plus Jakarta Sans', sans-serif !important; 16 | } -------------------------------------------------------------------------------- /package/src/assets/images/svgs/vue-cat-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /docs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Modernize React Mui Free Template | Docs 6 | 8 | 9 | 10 | 11 |

Modernize React Mui Free Template

12 | https://adminmart.github.io/free-documentation/react/modernize/index.html 13 | 14 | 15 | -------------------------------------------------------------------------------- /package/src/components/shared/BlankCard.js: -------------------------------------------------------------------------------- 1 | import { Card } from '@mui/material'; 2 | import React from 'react'; 3 | import PropTypes from 'prop-types'; 4 | 5 | const BlankCard = ({ children, className }) => { 6 | return ( 7 | 13 | {children} 14 | 15 | ); 16 | }; 17 | 18 | BlankCard.propTypes = { 19 | children: PropTypes.node, 20 | }; 21 | 22 | export default BlankCard; 23 | -------------------------------------------------------------------------------- /package/src/components/container/PageContainer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Helmet } from 'react-helmet'; 4 | 5 | const PageContainer = ({ title, description, children }) => ( 6 |
7 | 8 | {title} 9 | 10 | 11 | {children} 12 |
13 | ); 14 | 15 | PageContainer.propTypes = { 16 | title: PropTypes.string, 17 | description: PropTypes.string, 18 | children: PropTypes.node, 19 | }; 20 | 21 | export default PageContainer; 22 | -------------------------------------------------------------------------------- /package/src/views/sample-page/SamplePage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Typography } from '@mui/material'; 3 | import PageContainer from 'src/components/container/PageContainer'; 4 | import DashboardCard from '../../components/shared/DashboardCard'; 5 | 6 | 7 | const SamplePage = () => { 8 | return ( 9 | 10 | 11 | 12 | This is a sample page 13 | 14 | 15 | ); 16 | }; 17 | 18 | export default SamplePage; 19 | -------------------------------------------------------------------------------- /package/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /package/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modernize Free React Admin Template by Adminmart 8 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /package/src/views/icons/Icons.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PageContainer from 'src/components/container/PageContainer'; 3 | import DashboardCard from '../../components/shared/DashboardCard'; 4 | 5 | 6 | const Icons = () => { 7 | return ( 8 | 9 | 10 | 11 | 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default Icons; 20 | -------------------------------------------------------------------------------- /package/src/App.jsx: -------------------------------------------------------------------------------- 1 | // import { useState } from 'react' 2 | // import reactLogo from './assets/react.svg' 3 | // import viteLogo from '/vite.svg' 4 | import './App.css' 5 | 6 | import { CssBaseline, ThemeProvider } from '@mui/material'; 7 | 8 | import { baselightTheme } from "./theme/DefaultColors"; 9 | import { RouterProvider } from 'react-router'; 10 | import router from "./routes/Router.js" 11 | 12 | function App() { 13 | const theme = baselightTheme; 14 | 15 | return ( 16 | 17 | 18 | 19 | 20 | ); 21 | } 22 | 23 | export default App -------------------------------------------------------------------------------- /package/src/assets/images/svgs/nuxt-cat-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /package/src/layouts/full/shared/logo/Logo.js: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router"; 2 | import { ReactComponent as LogoDark1 } from "src/assets/images/logos/dark1-logo.svg"; 3 | import { styled } from "@mui/material"; 4 | 5 | const LinkStyled = styled(Link)(() => ({ 6 | height: "70px", 7 | width: "180px", 8 | overflow: "hidden", 9 | display: "block", 10 | })); 11 | 12 | const Logo = () => { 13 | return ( 14 | 22 | 23 | 24 | ); 25 | }; 26 | 27 | export default Logo; 28 | -------------------------------------------------------------------------------- /package/src/layouts/full/footer/Footer.js: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import { Box, Typography } from "@mui/material"; 3 | import { Link } from "react-router"; 4 | 5 | const Footer = () => { 6 | return ( 7 | 8 | 9 | © {new Date().getFullYear()} All rights reserved by{" "} 10 | 11 | 12 | AdminMart.com 13 | {" "} 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default Footer; 20 | -------------------------------------------------------------------------------- /package/src/assets/images/svgs/angular-cat-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package/src/components/custom-scroll/Scrollbar.jsx: -------------------------------------------------------------------------------- 1 | import SimpleBar from "simplebar-react"; 2 | import "simplebar-react/dist/simplebar.min.css"; 3 | import Box from '@mui/material/Box' 4 | import { styled } from '@mui/material/styles' 5 | import { useMediaQuery } from "@mui/material"; 6 | 7 | const SimpleBarStyle = styled(SimpleBar)(() => ({ 8 | maxHeight: "100%", 9 | })); 10 | 11 | 12 | const Scrollbar = (props) => { 13 | const { children, sx, ...other } = props; 14 | const lgDown = useMediaQuery((theme) => theme.breakpoints.down('lg')); 15 | 16 | if (lgDown) { 17 | return {children}; 18 | } 19 | 20 | return ( 21 | 22 | {children} 23 | 24 | ); 25 | }; 26 | 27 | export default Scrollbar; 28 | -------------------------------------------------------------------------------- /package/src/assets/images/svgs/tailwindcss.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package/src/views/authentication/Error.js: -------------------------------------------------------------------------------- 1 | import { Box, Container, Typography, Button } from '@mui/material'; 2 | import { Link } from 'react-router'; 3 | import ErrorImg from 'src/assets/images/backgrounds/404-error-idea.gif'; 4 | 5 | const Error = () => ( 6 | 13 | 14 | 404 15 | 16 | Opps!!! 17 | 18 | 19 | This page you are looking for could not be found. 20 | 21 | 24 | 25 | 26 | ); 27 | 28 | export default Error; 29 | -------------------------------------------------------------------------------- /package/src/components/forms/Button/SizeButton.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { Box, Button } from "@mui/material"; 4 | 5 | import BaseCard from "../../BaseCard/BaseCard"; 6 | 7 | const SizeButton = () => { 8 | return ( 9 | 10 | 11 | 20 | 29 | 38 | 39 | 40 | ); 41 | }; 42 | 43 | export { SizeButton }; 44 | -------------------------------------------------------------------------------- /package/src/components/BaseCard/BaseCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { 4 | Card, 5 | CardContent, 6 | Divider, 7 | Box, 8 | Typography, 9 | Chip, 10 | } from "@mui/material"; 11 | 12 | const BaseCard = (props) => { 13 | return ( 14 | 21 | 22 | 23 | {props.title} 24 | 25 | {props.chiptitle ? ( 26 | 35 | ) : ( 36 | "" 37 | )} 38 | 39 | 40 | {props.children} 41 | 42 | ); 43 | }; 44 | 45 | export default BaseCard; 46 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 AdminMart 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package/src/layouts/full/sidebar/Upgrade.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Box, Typography, Button } from '@mui/material'; 3 | import img1 from 'src/assets/images/backgrounds/rocket.png'; 4 | 5 | const Upgrade = () => { 6 | return ( 7 | 13 | <> 14 | 15 | Check Pro Version 16 | 19 | 20 | 21 | Remy Sharp 22 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | export default Upgrade; -------------------------------------------------------------------------------- /package/src/components/forms/theme-elements/CustomTextField.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { styled } from '@mui/material/styles'; 3 | import { TextField } from '@mui/material'; 4 | 5 | const CustomTextField = styled((props) => )(({ theme }) => ({ 6 | '& .MuiOutlinedInput-root': { 7 | borderRadius: '7px', 8 | borderColor: theme.palette.grey[700], 9 | height: "46px", 10 | '& fieldset': { 11 | borderColor: theme.palette.grey[700], 12 | }, 13 | '&:hover fieldset': { 14 | borderColor: theme.palette.primary.dark, 15 | }, 16 | '&.Mui-focused fieldset': { 17 | borderColor: theme.palette.primary.dark, 18 | }, 19 | }, 20 | '& .MuiOutlinedInput-input': { 21 | color: theme.palette.text.dark, 22 | }, 23 | '& .MuiOutlinedInput-input::placeholder': { 24 | color: theme.palette.primary.light, 25 | opacity: '0.8', 26 | }, 27 | '& .Mui-disabled .MuiOutlinedInput-notchedOutline': { 28 | borderColor: theme.palette.primary.light, 29 | }, 30 | '& .Mui-disabled .MuiOutlinedInput-input': { 31 | color: theme.palette.primary.light, 32 | }, 33 | })); 34 | 35 | export default CustomTextField; 36 | -------------------------------------------------------------------------------- /package/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | import { resolve } from 'path'; 4 | import fs from 'fs/promises'; 5 | import svgr from '@svgr/rollup'; 6 | // import svgr from 'vite-plugin-svgr' 7 | 8 | // https://vitejs.dev/config/ 9 | export default defineConfig({ 10 | resolve: { 11 | alias: { 12 | src: resolve(__dirname, 'src'), 13 | }, 14 | }, 15 | esbuild: { 16 | loader: 'jsx', 17 | include: /src\/.*\.jsx?$/, 18 | exclude: [], 19 | }, 20 | optimizeDeps: { 21 | esbuildOptions: { 22 | plugins: [ 23 | { 24 | name: 'load-js-files-as-jsx', 25 | setup(build) { 26 | build.onLoad( 27 | { filter: /src\\.*\.js$/ }, 28 | async (args) => ({ 29 | loader: 'jsx', 30 | contents: await fs.readFile(args.path, 'utf8'), 31 | }) 32 | ); 33 | }, 34 | }, 35 | ], 36 | }, 37 | }, 38 | 39 | 40 | 41 | // plugins: [react(),svgr({ 42 | // exportAsDefault: true 43 | // })], 44 | 45 | plugins: [svgr(), react()], 46 | }); 47 | -------------------------------------------------------------------------------- /package/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "modernize-free-react-app-vite", 3 | "private": true, 4 | "version": "1.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@emotion/react": "^11.14.0", 14 | "@emotion/styled": "^11.14.0", 15 | "@mui/icons-material": "^7.1.0", 16 | "@mui/lab": "^7.0.0-beta.12", 17 | "@mui/material": "^7.1.0", 18 | "@mui/system": "^7.1.0", 19 | "@iconify/react": "^6.0.0", 20 | "@svgr/rollup": "^8.1.0", 21 | "@tabler/icons-react": "^3.33.0", 22 | "apexcharts": "^4.7.0", 23 | "lodash": "^4.17.21", 24 | "prop-types": "^15.8.1", 25 | "react": "^19.0.0", 26 | "react-mui-sidebar": "^1.6.3", 27 | "react-apexcharts": "^1.7.0", 28 | "react-dom": "^19.0.0", 29 | "react-helmet": "^6.1.0", 30 | "simplebar-react": "^3.3.0", 31 | "react-router": "^7.0.2" 32 | 33 | }, 34 | "devDependencies": { 35 | "@types/react": "^19.1.4", 36 | "@vitejs/plugin-react": "^4.4.1", 37 | "eslint": "^9.27.0", 38 | "eslint-plugin-react": "^7.37.5", 39 | "eslint-plugin-react-hooks": "^5.2.0", 40 | "eslint-plugin-react-refresh": "^0.4.20", 41 | "vite": "^6.3.5" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /package/src/theme/Typography.js: -------------------------------------------------------------------------------- 1 | const typography = { 2 | fontFamily: "'Plus Jakarta Sans', sans-serif;", 3 | h1: { 4 | fontWeight: 600, 5 | fontSize: '2.25rem', 6 | lineHeight: '2.75rem', 7 | fontFamily: "'Plus Jakarta Sans', sans-serif;", 8 | }, 9 | h2: { 10 | fontWeight: 600, 11 | fontSize: '1.875rem', 12 | lineHeight: '2.25rem', 13 | fontFamily: "'Plus Jakarta Sans', sans-serif;", 14 | }, 15 | h3: { 16 | fontWeight: 600, 17 | fontSize: '1.5rem', 18 | lineHeight: '1.75rem', 19 | fontFamily: "'Plus Jakarta Sans', sans-serif;", 20 | }, 21 | h4: { 22 | fontWeight: 600, 23 | fontSize: '1.3125rem', 24 | lineHeight: '1.6rem', 25 | }, 26 | h5: { 27 | fontWeight: 600, 28 | fontSize: '1.125rem', 29 | lineHeight: '1.6rem', 30 | }, 31 | h6: { 32 | fontWeight: 600, 33 | fontSize: '1rem', 34 | lineHeight: '1.2rem', 35 | }, 36 | button: { 37 | textTransform: 'capitalize', 38 | fontWeight: 400, 39 | }, 40 | body1: { 41 | fontSize: '0.875rem', 42 | fontWeight: 400, 43 | lineHeight: '1.334rem', 44 | }, 45 | body2: { 46 | fontSize: '0.75rem', 47 | letterSpacing: '0rem', 48 | fontWeight: 400, 49 | lineHeight: '1rem', 50 | }, 51 | subtitle1: { 52 | fontSize: '0.875rem', 53 | fontWeight: 400, 54 | }, 55 | subtitle2: { 56 | fontSize: '0.875rem', 57 | fontWeight: 400, 58 | }, 59 | }; 60 | 61 | export default typography; 62 | -------------------------------------------------------------------------------- /package/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package/src/components/forms/Button/DefaultButtonGroup.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { Box, Button, ButtonGroup } from "@mui/material"; 4 | 5 | import BaseCard from "../../BaseCard/BaseCard"; 6 | 7 | const DefaultButtonGroup = () => { 8 | return ( 9 | 10 | 15 | 20 | 24 | 25 | 26 | 27 | 28 | 29 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | ); 50 | }; 51 | 52 | export { DefaultButtonGroup }; 53 | -------------------------------------------------------------------------------- /package/src/views/authentication/auth/AuthRegister.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Box, Typography, Button } from '@mui/material'; 3 | import { Link } from 'react-router'; 4 | 5 | import CustomTextField from '../../../components/forms/theme-elements/CustomTextField'; 6 | import { Stack } from '@mui/system'; 7 | 8 | const AuthRegister = ({ title, subtitle, subtext }) => ( 9 | <> 10 | {title ? ( 11 | 12 | {title} 13 | 14 | ) : null} 15 | 16 | {subtext} 17 | 18 | 19 | 20 | Name 22 | 23 | 24 | Email Address 26 | 27 | 28 | Password 30 | 31 | 32 | 35 | 36 | {subtitle} 37 | 38 | ); 39 | 40 | export default AuthRegister; 41 | -------------------------------------------------------------------------------- /package/src/theme/Shadows.js: -------------------------------------------------------------------------------- 1 | const shadows = [ 2 | 'none', 3 | '0px 2px 3px rgba(0,0,0,0.10)', 4 | '0 0 1px 0 rgba(0,0,0,0.31), 0 2px 2px -2px rgba(0,0,0,0.25)', 5 | '0 0 1px 0 rgba(0,0,0,0.31), 0 3px 4px -2px rgba(0,0,0,0.25)', 6 | '0 0 1px 0 rgba(0,0,0,0.31), 0 3px 4px -2px rgba(0,0,0,0.25)', 7 | '0 0 1px 0 rgba(0,0,0,0.31), 0 4px 6px -2px rgba(0,0,0,0.25)', 8 | '0 0 1px 0 rgba(0,0,0,0.31), 0 4px 6px -2px rgba(0,0,0,0.25)', 9 | '0 0 1px 0 rgba(0,0,0,0.31), 0 4px 8px -2px rgba(0,0,0,0.25)', 10 | '0 9px 17.5px rgb(0,0,0,0.05)', 11 | 'rgb(145 158 171 / 30%) 0px 0px 2px 0px, rgb(145 158 171 / 12%) 0px 12px 24px -4px', 12 | '0 0 1px 0 rgba(0,0,0,0.31), 0 7px 12px -4px rgba(0,0,0,0.25)', 13 | '0 0 1px 0 rgba(0,0,0,0.31), 0 6px 16px -4px rgba(0,0,0,0.25)', 14 | '0 0 1px 0 rgba(0,0,0,0.31), 0 7px 16px -4px rgba(0,0,0,0.25)', 15 | '0 0 1px 0 rgba(0,0,0,0.31), 0 8px 18px -8px rgba(0,0,0,0.25)', 16 | '0 0 1px 0 rgba(0,0,0,0.31), 0 9px 18px -8px rgba(0,0,0,0.25)', 17 | '0 0 1px 0 rgba(0,0,0,0.31), 0 10px 20px -8px rgba(0,0,0,0.25)', 18 | '0 0 1px 0 rgba(0,0,0,0.31), 0 11px 20px -8px rgba(0,0,0,0.25)', 19 | '0 0 1px 0 rgba(0,0,0,0.31), 0 12px 22px -8px rgba(0,0,0,0.25)', 20 | '0 0 1px 0 rgba(0,0,0,0.31), 0 13px 22px -8px rgba(0,0,0,0.25)', 21 | '0 0 1px 0 rgba(0,0,0,0.31), 0 14px 24px -8px rgba(0,0,0,0.25)', 22 | '0 0 1px 0 rgba(0,0,0,0.31), 0 16px 28px -8px rgba(0,0,0,0.25)', 23 | '0 0 1px 0 rgba(0,0,0,0.31), 0 18px 30px -8px rgba(0,0,0,0.25)', 24 | '0 0 1px 0 rgba(0,0,0,0.31), 0 20px 32px -8px rgba(0,0,0,0.25)', 25 | '0 0 1px 0 rgba(0,0,0,0.31), 0 22px 34px -8px rgba(0,0,0,0.25)', 26 | '0 0 1px 0 rgba(0,0,0,0.31), 0 24px 36px -8px rgba(0,0,0,0.25)', 27 | ]; 28 | 29 | export { shadows }; 30 | -------------------------------------------------------------------------------- /package/src/components/shared/DashboardCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card, CardContent, Typography, Stack, Box } from '@mui/material'; 3 | 4 | const DashboardCard = ({ 5 | title, 6 | subtitle, 7 | children, 8 | action, 9 | footer, 10 | cardheading, 11 | headtitle, 12 | headsubtitle, 13 | middlecontent, 14 | }) => { 15 | 16 | return ( 17 | 22 | {cardheading ? ( 23 | 24 | {headtitle} 25 | 26 | {headsubtitle} 27 | 28 | 29 | ) : ( 30 | 31 | {title ? ( 32 | 39 | 40 | {title ? {title} : ''} 41 | 42 | {subtitle ? ( 43 | 44 | {subtitle} 45 | 46 | ) : ( 47 | '' 48 | )} 49 | 50 | {action} 51 | 52 | ) : null} 53 | 54 | {children} 55 | 56 | )} 57 | 58 | {middlecontent} 59 | {footer} 60 | 61 | ); 62 | }; 63 | 64 | export default DashboardCard; 65 | -------------------------------------------------------------------------------- /package/src/components/forms/Button/ColorButtons.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { Box, Button } from "@mui/material"; 4 | 5 | import BaseCard from "../../BaseCard/BaseCard"; 6 | 7 | const ColorButtons = () => { 8 | return ( 9 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 71 | 72 | ); 73 | }; 74 | 75 | export { ColorButtons }; 76 | -------------------------------------------------------------------------------- /package/src/assets/images/svgs/bt-cat-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /package/src/views/utilities/Shadow.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Paper, Box, Grid } from '@mui/material'; 3 | import PageContainer from 'src/components/container/PageContainer'; 4 | import DashboardCard from '../../components/shared/DashboardCard'; 5 | import { createTheme, ThemeProvider, styled } from '@mui/material/styles'; 6 | 7 | const Item = styled(Paper)(({ theme }) => ({ 8 | ...theme.typography.body1, 9 | textAlign: 'center', 10 | color: theme.palette.text.secondary, 11 | height: 60, 12 | lineHeight: '60px', 13 | })); 14 | 15 | const darkTheme = createTheme({ palette: { mode: 'dark' } }); 16 | const lightTheme = createTheme({ palette: { mode: 'light' } }); 17 | 18 | const Shadow = () => { 19 | return ( 20 | 21 | 22 | 23 | {[lightTheme, darkTheme].map((theme, index) => ( 24 | 25 | 26 | 35 | {[0, 1, 2, 3, 4, 6, 8, 12, 16, 24].map((elevation) => ( 36 | 37 | {`elevation=${elevation}`} 38 | 39 | ))} 40 | 41 | 42 | 43 | ))} 44 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | export default Shadow; 51 | -------------------------------------------------------------------------------- /package/src/views/dashboard/Dashboard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Grid, Box } from '@mui/material'; 3 | import PageContainer from 'src/components/container/PageContainer'; 4 | 5 | // components 6 | import SalesOverview from './components/SalesOverview'; 7 | import YearlyBreakup from './components/YearlyBreakup'; 8 | import RecentTransactions from './components/RecentTransactions'; 9 | import ProductPerformance from './components/ProductPerformance'; 10 | import Blog from './components/Blog'; 11 | import MonthlyEarnings from './components/MonthlyEarnings'; 12 | 13 | 14 | const Dashboard = () => { 15 | return ( 16 | 17 | 18 | 19 | 24 | 25 | 26 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 45 | 46 | 47 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | ); 61 | }; 62 | 63 | export default Dashboard; 64 | -------------------------------------------------------------------------------- /package/src/components/forms/Button/IconColorButtons.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Box, IconButton } from "@mui/material"; 3 | import BaseCard from "../../BaseCard/BaseCard"; 4 | import NotificationsNoneOutlinedIcon from '@mui/icons-material/NotificationsNoneOutlined'; 5 | 6 | const IconColorButtons = () => { 7 | return ( 8 | 17 | 23 | 30 | 31 | 32 | 39 | 40 | 41 | 48 | 49 | 50 | 57 | 58 | 59 | 67 | 68 | 69 | 70 | 71 | ); 72 | }; 73 | 74 | export { IconColorButtons }; 75 | -------------------------------------------------------------------------------- /package/src/components/forms/Button/TextColorButtons.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { Box, Button } from "@mui/material"; 4 | 5 | import BaseCard from "../../BaseCard/BaseCard"; 6 | 7 | const TextColorButtons = () => { 8 | return ( 9 | 10 | 20 | 33 | 46 | 59 | 72 | 85 | 86 | 87 | ); 88 | }; 89 | 90 | export { TextColorButtons }; 91 | -------------------------------------------------------------------------------- /package/src/views/form-elements/ExAutoComplete.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Grid, Box } from '@mui/material' 3 | 4 | import { ComboBoxAutocomplete } from '../../components/forms/AutoComplete/ComboBoxAutocomplete' 5 | 6 | import { MultipleValuesAutocomplete } from '../../components/forms/AutoComplete/MultipleValuesAutocomplete' 7 | import { CheckboxesAutocomplete } from '../../components/forms/AutoComplete/CheckboxesAutocomplete' 8 | import { SizesAutocomplete } from '../../components/forms/AutoComplete/SizesAutocomplete' 9 | 10 | const ExAutoComplete = () => { 11 | // 2 12 | 13 | return ( 14 | 15 | 16 | {/* ------------------------- row 1 ------------------------- */} 17 | 24 | 25 | 26 | 27 | {/* ------------------------- row 5 ------------------------- */} 28 | 35 | 36 | 37 | 38 | {/* ------------------------- row 6 ------------------------- */} 39 | 46 | 47 | 48 | {/* ------------------------- row 7 ------------------------- */} 49 | 56 | 57 | 58 | 59 | 60 | ) 61 | } 62 | 63 | export default ExAutoComplete 64 | -------------------------------------------------------------------------------- /package/src/layouts/full/sidebar/Sidebar.js: -------------------------------------------------------------------------------- 1 | import { useMediaQuery, Box, Drawer } from '@mui/material'; 2 | import SidebarItems from './SidebarItems'; 3 | import Scrollbar from "../../../components/custom-scroll/Scrollbar"; 4 | import Upgrade from './Upgrade' 5 | 6 | const Sidebar = (props) => { 7 | 8 | const lgUp = useMediaQuery((theme) => theme.breakpoints.up("lg")); 9 | const sidebarWidth = '270px'; 10 | 11 | 12 | 13 | if (lgUp) { 14 | return ( 15 | 21 | {/* ------------------------------------------- */} 22 | {/* Sidebar for desktop */} 23 | {/* ------------------------------------------- */} 24 | 38 | {/* ------------------------------------------- */} 39 | {/* Sidebar Box */} 40 | {/* ------------------------------------------- */} 41 | 42 | 43 | {/* ------------------------------------------- */} 44 | {/* Sidebar Items */} 45 | {/* ------------------------------------------- */} 46 | 47 | 48 | 49 | 50 | 51 | ); 52 | } 53 | return ( 54 | theme.shadows[8], 64 | }, 65 | } 66 | }} 67 | > 68 | 69 | {/* ------------------------------------------- */} 70 | {/* Sidebar For Mobile */} 71 | {/* ------------------------------------------- */} 72 | 73 | 74 | 75 | 76 | ); 77 | }; 78 | export default Sidebar; 79 | -------------------------------------------------------------------------------- /package/src/components/forms/Button/OutlinedColorButtons.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { Box, Button } from "@mui/material"; 4 | 5 | import BaseCard from "../../BaseCard/BaseCard"; 6 | 7 | const OutlinedColorButtons = () => { 8 | return ( 9 | 18 | 28 | 42 | 56 | 70 | 84 | 98 | 99 | 100 | ); 101 | }; 102 | 103 | export { OutlinedColorButtons }; 104 | -------------------------------------------------------------------------------- /package/src/views/authentication/auth/AuthLogin.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Box, 4 | Typography, 5 | FormGroup, 6 | FormControlLabel, 7 | Button, 8 | Stack, 9 | Checkbox 10 | } from '@mui/material'; 11 | import { Link } from 'react-router'; 12 | 13 | import CustomTextField from '../../../components/forms/theme-elements/CustomTextField'; 14 | 15 | const AuthLogin = ({ title, subtitle, subtext }) => ( 16 | <> 17 | {title ? ( 18 | 19 | {title} 20 | 21 | ) : null} 22 | 23 | {subtext} 24 | 25 | 26 | 27 | Username 29 | 30 | 31 | 32 | Password 34 | 35 | 36 | 37 | 38 | } 40 | label="Remeber this Device" 41 | /> 42 | 43 | 52 | Forgot Password ? 53 | 54 | 55 | 56 | 57 | 68 | 69 | {subtitle} 70 | 71 | ); 72 | 73 | export default AuthLogin; 74 | -------------------------------------------------------------------------------- /package/src/views/dashboard/components/MonthlyEarnings.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Chart from 'react-apexcharts'; 3 | import { useTheme } from '@mui/material/styles'; 4 | import { Stack, Typography, Avatar, Fab } from '@mui/material'; 5 | import { IconArrowDownRight, IconCurrencyDollar } from '@tabler/icons-react'; 6 | import DashboardCard from '../../../components/shared/DashboardCard'; 7 | 8 | const MonthlyEarnings = () => { 9 | // chart color 10 | const theme = useTheme(); 11 | const secondary = theme.palette.secondary.main; 12 | const secondarylight = '#f5fcff'; 13 | const errorlight = '#fdede8'; 14 | 15 | // chart 16 | const optionscolumnchart = { 17 | chart: { 18 | type: 'area', 19 | fontFamily: "'Plus Jakarta Sans', sans-serif;", 20 | foreColor: '#adb0bb', 21 | toolbar: { 22 | show: false, 23 | }, 24 | height: 60, 25 | sparkline: { 26 | enabled: true, 27 | }, 28 | group: 'sparklines', 29 | }, 30 | stroke: { 31 | curve: 'smooth', 32 | width: 2, 33 | }, 34 | fill: { 35 | colors: [secondarylight], 36 | type: 'solid', 37 | opacity: 0.05, 38 | }, 39 | markers: { 40 | size: 0, 41 | }, 42 | tooltip: { 43 | theme: theme.palette.mode === 'dark' ? 'dark' : 'light', 44 | }, 45 | }; 46 | const seriescolumnchart = [ 47 | { 48 | name: '', 49 | color: secondary, 50 | data: [25, 66, 20, 40, 12, 58, 20], 51 | }, 52 | ]; 53 | 54 | return ( 55 | 59 | 60 | 61 | } 62 | footer={ 63 | 64 | } 65 | > 66 | <> 67 | 68 | $6,820 69 | 70 | 71 | 72 | 73 | 74 | 75 | +9% 76 | 77 | 78 | last year 79 | 80 | 81 | 82 | 83 | ); 84 | }; 85 | 86 | export default MonthlyEarnings; 87 | -------------------------------------------------------------------------------- /package/src/views/authentication/Register.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Grid, Box, Card, Typography, Stack } from '@mui/material'; 3 | import { Link } from 'react-router'; 4 | import PageContainer from 'src/components/container/PageContainer'; 5 | import Logo from 'src/layouts/full/shared/logo/Logo'; 6 | import AuthRegister from './auth/AuthRegister'; 7 | 8 | const Register2 = () => ( 9 | 10 | 25 | 26 | 36 | 37 | 38 | 39 | 40 | 43 | Your Social Campaigns 44 | 45 | } 46 | subtitle={ 47 | 48 | 49 | Already have an Account? 50 | 51 | 60 | Sign In 61 | 62 | 63 | } 64 | /> 65 | 66 | 67 | 68 | 69 | 70 | ); 71 | 72 | export default Register2; 73 | -------------------------------------------------------------------------------- /discount-code.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Discount Code 8 | 9 | 87 | 88 | 89 | 90 |
91 |
92 |
93 |
94 |

30% OFF

95 | On Premium 96 | Product 97 |
Use Coupon code : upgrade30 98 |
99 | 100 | Get Now 101 |
102 |
103 | 104 | 105 | -------------------------------------------------------------------------------- /package/src/views/authentication/Login.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router'; 3 | import { Grid, Box, Card, Stack, Typography } from '@mui/material'; 4 | 5 | // components 6 | import PageContainer from 'src/components/container/PageContainer'; 7 | import Logo from 'src/layouts/full/shared/logo/Logo'; 8 | import AuthLogin from './auth/AuthLogin'; 9 | 10 | const Login2 = () => { 11 | 12 | return ( 13 | 14 | 29 | 30 | 40 | 41 | 42 | 43 | 44 | 47 | Your Social Campaigns 48 | 49 | } 50 | subtitle={ 51 | 52 | 53 | New to Modernize? 54 | 55 | 64 | Create an account 65 | 66 | 67 | } 68 | /> 69 | 70 | 71 | 72 | 73 | 74 | ); 75 | }; 76 | 77 | export default Login2; 78 | -------------------------------------------------------------------------------- /package/src/assets/images/svgs/next-cat-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /package/src/layouts/full/FullLayout.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { styled, Container, Box } from '@mui/material'; 3 | 4 | 5 | 6 | import Header from './header/Header'; 7 | import Sidebar from './sidebar/Sidebar'; 8 | import { Outlet } from "react-router"; 9 | import Topbar from "./header/Topbar"; 10 | import Footer from "./footer/Footer"; 11 | 12 | const MainWrapper = styled('div')(() => ({ 13 | display: 'flex', 14 | //minHeight: '100vh', 15 | width: '100%', 16 | })); 17 | 18 | const PageWrapper = styled('div')(() => ({ 19 | display: 'flex', 20 | flexGrow: 1, 21 | // paddingBottom: '60px', 22 | flexDirection: 'column', 23 | zIndex: 1, 24 | backgroundColor: 'transparent', 25 | })); 26 | 27 | const FullLayout = () => { 28 | 29 | const [isSidebarOpen, setSidebarOpen] = useState(true); 30 | const [isMobileSidebarOpen, setMobileSidebarOpen] = useState(false); 31 | // const lgUp = useMediaQuery((theme) => theme.breakpoints.up("lg")); 32 | 33 | return ( 34 | <> 35 | {/* ------------------------------------------- */} 36 | {/* Topbar */} 37 | {/* ------------------------------------------- */} 38 | 39 | 42 | 43 | {/* ------------------------------------------- */} 44 | {/* Sidebar */} 45 | {/* ------------------------------------------- */} 46 | setMobileSidebarOpen(false)} /> 49 | 50 | 51 | {/* ------------------------------------------- */} 52 | {/* Main Wrapper */} 53 | {/* ------------------------------------------- */} 54 | 57 | {/* ------------------------------------------- */} 58 | {/* Header */} 59 | {/* ------------------------------------------- */} 60 |
setSidebarOpen(!isSidebarOpen)} toggleMobileSidebar={() => setMobileSidebarOpen(true)} /> 61 | {/* ------------------------------------------- */} 62 | {/* PageContent */} 63 | {/* ------------------------------------------- */} 64 | 69 | {/* ------------------------------------------- */} 70 | {/* Page Route */} 71 | {/* ------------------------------------------- */} 72 | 73 | 74 | 75 | {/* ------------------------------------------- */} 76 | {/* End Page */} 77 | {/* ------------------------------------------- */} 78 | 79 |