<!DOCTYPE html>
<html>
<head>
</head>
<body>
import { NavLink } from "react-router-dom";
import { FaBars, FaHome, FaLock, FaMoneyBill, FaUser } from "react-icons/fa";
import { MdMessage } from "react-icons/md";
import { BiAnalyse, BiSearch } from "react-icons/bi";
import { BiCog } from "react-icons/bi";
import { AiFillHeart, AiTwotoneFileExclamation } from "react-icons/ai";
import { BsCartCheck } from "react-icons/bs";
import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import SidebarMenu from "./SidebarMenu";
const routes = [
{
path: "/",
name: "Dashboard",
icon: <FaHome />,
},
{
path: "/users",
name: "Users",
icon: <FaUser />,
},
{
path: "/messages",
name: "Messages",
icon: <MdMessage />,
},
{
path: "/analytics",
name: "Analytics",
icon: <BiAnalyse />,
},
{
path: "/file-manager",
name: "File Manager",
icon: <AiTwotoneFileExclamation />,
subRoutes: [
{
path: "/settings/profile",
name: "Profile ",
icon: <FaUser />,
},
{
path: "/settings/2fa",
name: "2FA",
icon: <FaLock />,
},
{
path: "/settings/billing",
name: "Billing",
icon: <FaMoneyBill />,
},
],
},
{
path: "/order",
name: "Order",
icon: <BsCartCheck />,
},
{
path: "/settings",
name: "Settings",
icon: <BiCog />,
exact: true,
subRoutes: [
{
path: "/settings/profile",
name: "Profile ",
icon: <FaUser />,
},
{
path: "/settings/2fa",
name: "2FA",
icon: <FaLock />,
},
{
path: "/settings/billing",
name: "Billing",
icon: <FaMoneyBill />,
},
],
},
{
path: "/saved",
name: "Saved",
icon: <AiFillHeart />,
},
];
const SideBar = ({ children }) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
const inputAnimation = {
hidden: {
width: 0,
padding: 0,
transition: {
duration: 0.2,
},
},
show: {
width: "140px",
padding: "5px 15px",
transition: {
duration: 0.2,
},
},
};
const showAnimation = {
hidden: {
width: 0,
opacity: 0,
transition: {
duration: 0.5,
},
},
show: {
opacity: 1,
width: "auto",
transition: {
duration: 0.5,
},
},
};
return (
<>
<div className="main-container">
<motion.div
animate={{
width: isOpen ? "200px" : "45px",
transition: {
duration: 0.5,
type: "spring",
damping: 10,
},
}}
className={`sidebar `}
>
<div className="top_section">
<AnimatePresence>
{isOpen && (
<motion.h1
variants={showAnimation}
initial="hidden"
animate="show"
exit="hidden"
className="logo"
>
DoSomeCoding
</motion.h1>
)}
</AnimatePresence>
<div className="bars">
<FaBars onClick={toggle} />
</div>
</div>
<div className="search">
<div className="search_icon">
<BiSearch />
</div>
<AnimatePresence>
{isOpen && (
<motion.input
initial="hidden"
animate="show"
exit="hidden"
variants={inputAnimation}
type="text"
placeholder="Search"
/>
)}
</AnimatePresence>
</div>
<section className="routes">
{routes.map((route, index) => {
if (route.subRoutes) {
return (
<SidebarMenu
setIsOpen={setIsOpen}
route={route}
showAnimation={showAnimation}
isOpen={isOpen}
/>
);
}
return (
<NavLink
to={route.path}
key={index}
className="link"
activeClassName="active"
>
<div className="icon">{route.icon}</div>
<AnimatePresence>
{isOpen && (
<motion.div
variants={showAnimation}
initial="hidden"
animate="show"
exit="hidden"
className="link_text"
>
{route.name}
</motion.div>
)}
</AnimatePresence>
</NavLink>
);
})}
</section>
</motion.div>
<main>{children}</main>
</div>
</>
);
};
export default SideBar;
</body>
</html> Write, Run & Share NodeJS code online using OneCompiler's NodeJS online compiler for free. It's one of the robust, feature-rich online compilers for NodeJS language,running on the latest LTS version NodeJS 16.14.2. Getting started with the OneCompiler's NodeJS editor is easy and fast. The editor shows sample boilerplate code when you choose language as NodeJS and start coding. You can provide the dependencies in package.json.
Node.js is a free and open-source server environment. Node.js is very popular in recent times and a large number of companies like Microsoft, Paypal, Uber, Yahoo, General Electric and many others are using Node.js.
Google chrome's javascript engine V8 and is pretty fast.Asynchronous, event-driven and works on single-thread model thus eliminating the dis-advantages of multi-thread model.Express is one of the most popular web application framework in the NodeJS echosystem.
let moment = require('moment');
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));const _ = require("lodash");
let colors = ['blue', 'green', 'yellow', 'red'];
let firstElement = _.first(colors);
let lastElement = _.last(colors);
console.log(`First element: ${firstElement}`);
console.log(`Last element: ${lastElement}`);Following are the libraries supported by OneCompiler's NodeJS compiler.