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

react-sidebar-v1-master

Browse Source
This commit is contained in:
Peter Hoppe
2022-12-07 00:31:33 +01:00
parent 49158a2b24
commit 6c18cc6336
21 changed files with 187 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,72 +0,0 @@
.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
View File

@ -1,46 +0,0 @@
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
View File

@ -1,43 +0,0 @@
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
thirdParty/react-sidebar-v1-master/src/pages/Home.js vendored
View File

@ -1,11 +0,0 @@
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
View File

@ -1,11 +0,0 @@
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
View File

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