hope/php_xcstat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

navesidebar

Browse Source
This commit is contained in:
Peter Hoppe
2022-12-06 22:51:16 +01:00
parent 9fb8a0aafb
commit 49158a2b24
18 changed files with 477 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/Navbar.css Normal file
View File

@ -0,0 +1,72 @@
.navbar {
background-color: #060b26;
height: 80px;
display: flex;
justify-content: start;
align-items: center;
}
.menu-bars {
margin-left: 2rem;
font-size: 2rem;
background: none;
}
.nav-menu {
background-color: #060b26;
width: 250px;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: -100%;
transition: 850ms;
}
.nav-menu.active {
left: 0;
transition: 350ms;
}
.nav-text {
display: flex;
justify-content: start;
align-items: center;
padding: 8px 0px 8px 16px;
list-style: none;
height: 60px;
}
.nav-text a {
text-decoration: none;
color: #f5f5f5;
font-size: 18px;
width: 95%;
height: 100%;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 4px;
}
.nav-text a:hover {
background-color: #1a83ff;
}
.nav-menu-items {
width: 100%;
}
.navbar-toggle {
background-color: #060b26;
width: 100%;
height: 80px;
display: flex;
justify-content: start;
align-items: center;
}
span {
margin-left: 16px;
}

47
src/components/Navbar.ts Normal file
View File

@ -0,0 +1,47 @@
import React, { useState } from 'react';
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/ai';
import { Link } from 'react-router-dom';
import { SidebarData } from './SidebarData';
import './Navbar.css';
import { IconContext } from 'react-icons';
function Navbar()
{
const [sidebar, setSidebar] = useState(false);
const showSidebar = () => setSidebar(!sidebar);
return (
<>
<IconContext.Provider value={{ color: '#fff' }}>
<div className='navbar'>
<Link to='#' className='menu-bars'>
<FaIcons.FaBars onClick={showSidebar} />
</Link>
</div>
<nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
<ul className='nav-menu-items' onClick={showSidebar}>
<li className='navbar-toggle'>
<Link to='#' className='menu-bars'>
<AiIcons.AiOutlineClose />
</Link>
</li>
{SidebarData.map((item, index) => {
return (
<li key={index} className={item.cName}>
<Link to={item.path}>
{item.icon}
<span>{item.title}</span>
</Link>
</li>
);
})}
</ul>
</nav>
</IconContext.Provider>
</>
);
}
export default Navbar;

43
src/components/SidebarData.ts Normal file
View File

@ -0,0 +1,43 @@
import React from 'react';
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/ai';
import * as IoIcons from 'react-icons/io';
export const SidebarData = [
{
title: 'Home',
path: '/',
icon: <AiIcons.AiFillHome />,
cName: 'nav-text'
},
{
title: 'Reports',
path: '/reports',
icon: <IoIcons.IoIosPaper />,
cName: 'nav-text'
},
{
title: 'Products',
path: '/products',
icon: <FaIcons.FaCartPlus />,
cName: 'nav-text'
},
{
title: 'Team',
path: '/team',
icon: <IoIcons.IoMdPeople />,
cName: 'nav-text'
},
{
title: 'Messages',
path: '/messages',
icon: <FaIcons.FaEnvelopeOpenText />,
cName: 'nav-text'
},
{
title: 'Support',
path: '/support',
icon: <IoIcons.IoMdHelpCircle />,
cName: 'nav-text'
}
];

11
src/pages/Home.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
function Home() {
return (
<div className='home'>
<h1>Home</h1>
</div>
);
}
export default Home;

0
src/pages/Home.tsx Normal file
View File

11
src/pages/Products.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
function Products() {
return (
<div className='products'>
<h1>Products</h1>
</div>
);
}
export default Products;

11
src/pages/Reports.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
function Reports() {
return (
<div className='reports'>
<h1>Reports</h1>
</div>
);
}
export default Reports;

BIN
thirdParty/react-sidebar-v1-master.zip vendored Normal file
View File

Binary file not shown.

36
thirdParty/react-sidebar-v1-master/package.json vendored Normal file
View File

@ -0,0 +1,36 @@
{
"name": "react-sidebar-v1",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-icons": "^3.10.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

18
thirdParty/react-sidebar-v1-master/src/App.css vendored Normal file
View File

@ -0,0 +1,18 @@
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
.home,
.reports,
.products {
display: flex;
height: 90vh;
align-items: center;
justify-content: center;
font-size: 3rem;
}

24
thirdParty/react-sidebar-v1-master/src/App.js vendored Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import './App.css';
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './pages/Home';
import Reports from './pages/Reports';
import Products from './pages/Products';
function App() {
return (
<>
<Router>
<Navbar />
<Switch>
<Route path='/' exact component={Home} />
<Route path='/reports' component={Reports} />
<Route path='/products' component={Products} />
</Switch>
</Router>
</>
);
}
export default App;

72
thirdParty/react-sidebar-v1-master/src/components/Navbar.css vendored Normal file
View File

@ -0,0 +1,72 @@
.navbar {
background-color: #060b26;
height: 80px;
display: flex;
justify-content: start;
align-items: center;
}
.menu-bars {
margin-left: 2rem;
font-size: 2rem;
background: none;
}
.nav-menu {
background-color: #060b26;
width: 250px;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: -100%;
transition: 850ms;
}
.nav-menu.active {
left: 0;
transition: 350ms;
}
.nav-text {
display: flex;
justify-content: start;
align-items: center;
padding: 8px 0px 8px 16px;
list-style: none;
height: 60px;
}
.nav-text a {
text-decoration: none;
color: #f5f5f5;
font-size: 18px;
width: 95%;
height: 100%;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 4px;
}
.nav-text a:hover {
background-color: #1a83ff;
}
.nav-menu-items {
width: 100%;
}
.navbar-toggle {
background-color: #060b26;
width: 100%;
height: 80px;
display: flex;
justify-content: start;
align-items: center;
}
span {
margin-left: 16px;
}

46
thirdParty/react-sidebar-v1-master/src/components/Navbar.js vendored Normal file
View File

@ -0,0 +1,46 @@
import React, { useState } from 'react';
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/ai';
import { Link } from 'react-router-dom';
import { SidebarData } from './SidebarData';
import './Navbar.css';
import { IconContext } from 'react-icons';
function Navbar() {
const [sidebar, setSidebar] = useState(false);
const showSidebar = () => setSidebar(!sidebar);
return (
<>
<IconContext.Provider value={{ color: '#fff' }}>
<div className='navbar'>
<Link to='#' className='menu-bars'>
<FaIcons.FaBars onClick={showSidebar} />
</Link>
</div>
<nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
<ul className='nav-menu-items' onClick={showSidebar}>
<li className='navbar-toggle'>
<Link to='#' className='menu-bars'>
<AiIcons.AiOutlineClose />
</Link>
</li>
{SidebarData.map((item, index) => {
return (
<li key={index} className={item.cName}>
<Link to={item.path}>
{item.icon}
<span>{item.title}</span>
</Link>
</li>
);
})}
</ul>
</nav>
</IconContext.Provider>
</>
);
}
export default Navbar;

43
thirdParty/react-sidebar-v1-master/src/components/SidebarData.js vendored Normal file
View File

@ -0,0 +1,43 @@
import React from 'react';
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/ai';
import * as IoIcons from 'react-icons/io';
export const SidebarData = [
{
title: 'Home',
path: '/',
icon: <AiIcons.AiFillHome />,
cName: 'nav-text'
},
{
title: 'Reports',
path: '/reports',
icon: <IoIcons.IoIosPaper />,
cName: 'nav-text'
},
{
title: 'Products',
path: '/products',
icon: <FaIcons.FaCartPlus />,
cName: 'nav-text'
},
{
title: 'Team',
path: '/team',
icon: <IoIcons.IoMdPeople />,
cName: 'nav-text'
},
{
title: 'Messages',
path: '/messages',
icon: <FaIcons.FaEnvelopeOpenText />,
cName: 'nav-text'
},
{
title: 'Support',
path: '/support',
icon: <IoIcons.IoMdHelpCircle />,
cName: 'nav-text'
}
];

10
thirdParty/react-sidebar-v1-master/src/index.js vendored Normal file
View File

@ -0,0 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

11
thirdParty/react-sidebar-v1-master/src/pages/Home.js vendored Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
function Home() {
return (
<div className='home'>
<h1>Home</h1>
</div>
);
}
export default Home;

11
thirdParty/react-sidebar-v1-master/src/pages/Products.js vendored Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
function Products() {
return (
<div className='products'>
<h1>Products</h1>
</div>
);
}
export default Products;

11
thirdParty/react-sidebar-v1-master/src/pages/Reports.js vendored Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
function Reports() {
return (
<div className='reports'>
<h1>Reports</h1>
</div>
);
}
export default Reports;