Hello guys, how are you? Welcome back to my blog therichpost.com. Today in this post I am going to Mosaic React Dashboard Customization — Add User Management Page.
Here are the two videos in first I am telling how to download and set Mosaic React DASHBOARD on localhost and in second I am adding custom page inside it:
For react js new comers, please check the below links:
JavaScript development services
Guys here is the code snippet and please use carefully:
Here’s your complete working new created file for but also we need to create users folder inside pages folder as well:src/pages/users/index.jsx 👇
import React, { useState } from "react";
import Sidebar from "../../partials/Sidebar";
import Header from "../../partials/Header";
import Banner from "../../partials/Banner";
import FilterButton from "../../components/DropdownFilter";
function UserManagement() {
const [sidebarOpen, setSidebarOpen] = useState(false);
// Sample users (for demo)
const [users, setUsers] = useState([
{ id: 1, name: "Ajay Kumar", email: "ajay@example.com", role: "Admin" },
{ id: 2, name: "Riya Sharma", email: "riya@example.com", role: "Editor" },
{ id: 3, name: "John Doe", email: "john@example.com", role: "Viewer" },
]);
const [newUser, setNewUser] = useState({ name: "", email: "", role: "Viewer" });
const handleAddUser = () => {
if (!newUser.name || !newUser.email) return alert("Please fill all fields");
const id = users.length + 1;
setUsers([...users, { id, ...newUser }]);
setNewUser({ name: "", email: "", role: "Viewer" });
};
return (
<div className="flex h-screen overflow-hidden">
{/* Sidebar */}
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
{/* Content area */}
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
{/* Header */}
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
<main className="grow">
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
{/* Page Header */}
<div className="sm:flex sm:justify-between sm:items-center mb-8">
<div className="mb-4 sm:mb-0">
<h1 className="text-2xl md:text-3xl text-gray-800 dark:text-gray-100 font-bold">
User Management
</h1>
</div>
<div className="grid">
<FilterButton align="right" />
</div>
</div>
{/* Add User Form */}
<div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-8">
<h2 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100">
Add New User
</h2>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<input
type="text"
placeholder="Name"
value={newUser.name}
onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
className="border rounded-lg p-2 dark:bg-gray-900 dark:border-gray-700"
/>
<input
type="email"
placeholder="Email"
value={newUser.email}
onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
className="border rounded-lg p-2 dark:bg-gray-900 dark:border-gray-700"
/>
<select
value={newUser.role}
onChange={(e) => setNewUser({ ...newUser, role: e.target.value })}
className="border rounded-lg p-2 dark:bg-gray-900 dark:border-gray-700"
>
<option>Admin</option>
<option>Editor</option>
<option>Viewer</option>
</select>
<button
onClick={handleAddUser}
className="bg-violet-600 hover:bg-violet-700 text-white rounded-lg p-2"
>
Add User
</button>
</div>
</div>
{/* User Table */}
<div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
<h2 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100">
User List
</h2>
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead>
<tr className="bg-gray-50 dark:bg-gray-900">
<th className="px-4 py-2 text-left text-sm font-medium text-gray-600 dark:text-gray-300">
ID
</th>
<th className="px-4 py-2 text-left text-sm font-medium text-gray-600 dark:text-gray-300">
Name
</th>
<th className="px-4 py-2 text-left text-sm font-medium text-gray-600 dark:text-gray-300">
Email
</th>
<th className="px-4 py-2 text-left text-sm font-medium text-gray-600 dark:text-gray-300">
Role
</th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr
key={user.id}
className="border-t border-gray-100 dark:border-gray-700"
>
<td className="px-4 py-2 text-gray-800 dark:text-gray-200">
{user.id}
</td>
<td className="px-4 py-2 text-gray-800 dark:text-gray-200">
{user.name}
</td>
<td className="px-4 py-2 text-gray-800 dark:text-gray-200">
{user.email}
</td>
<td className="px-4 py-2 text-gray-800 dark:text-gray-200">
{user.role}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</main>
<Banner />
</div>
</div>
);
}
export default UserManagement;
Here is the updated code for src/App.jsx:
import React, { useEffect } from 'react';
import {
Routes,
Route,
useLocation
} from 'react-router-dom';
import './css/style.css';
import './charts/ChartjsConfig';
// Import pages
import Dashboard from './pages/Dashboard';
import UserManagement from "./pages/Users";
function App() {
const location = useLocation();
useEffect(() => {
document.querySelector('html').style.scrollBehavior = 'auto'
window.scroll({ top: 0 })
document.querySelector('html').style.scrollBehavior = ''
}, [location.pathname]); // triggered on route change
return (
<>
<Routes>
<Route exact path="/" element={<Dashboard />} />
<Route exact path="/users" element={<UserManagement />} />
</Routes>
</>
);
}
export default App;
Here is the updated code for src/partials/Sidenav.jsx:
import React, { useState, useEffect, useRef } from "react";
import { NavLink, useLocation } from "react-router-dom";
import SidebarLinkGroup from "./SidebarLinkGroup";
function Sidebar({
sidebarOpen,
setSidebarOpen,
variant = 'default',
}) {
const location = useLocation();
const { pathname } = location;
const trigger = useRef(null);
const sidebar = useRef(null);
const storedSidebarExpanded = localStorage.getItem("sidebar-expanded");
const [sidebarExpanded, setSidebarExpanded] = useState(storedSidebarExpanded === null ? false : storedSidebarExpanded === "true");
// close on click outside
useEffect(() => {
const clickHandler = ({ target }) => {
if (!sidebar.current || !trigger.current) return;
if (!sidebarOpen || sidebar.current.contains(target) || trigger.current.contains(target)) return;
setSidebarOpen(false);
};
document.addEventListener("click", clickHandler);
return () => document.removeEventListener("click", clickHandler);
});
// close if the esc key is pressed
useEffect(() => {
const keyHandler = ({ keyCode }) => {
if (!sidebarOpen || keyCode !== 27) return;
setSidebarOpen(false);
};
document.addEventListener("keydown", keyHandler);
return () => document.removeEventListener("keydown", keyHandler);
});
useEffect(() => {
localStorage.setItem("sidebar-expanded", sidebarExpanded);
if (sidebarExpanded) {
document.querySelector("body").classList.add("sidebar-expanded");
} else {
document.querySelector("body").classList.remove("sidebar-expanded");
}
}, [sidebarExpanded]);
return (
<div className="min-w-fit">
{/* Sidebar backdrop (mobile only) */}
<div
className={`fixed inset-0 bg-gray-900/30 z-40 lg:hidden lg:z-auto transition-opacity duration-200 ${
sidebarOpen ? "opacity-100" : "opacity-0 pointer-events-none"
}`}
aria-hidden="true"
></div>
{/* Sidebar */}
<div
id="sidebar"
ref={sidebar}
className={`flex lg:flex! flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-[100dvh] overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:w-64! shrink-0 bg-white dark:bg-gray-800 p-4 transition-all duration-200 ease-in-out ${sidebarOpen ? "translate-x-0" : "-translate-x-64"} ${variant === 'v2' ? 'border-r border-gray-200 dark:border-gray-700/60' : 'rounded-r-2xl shadow-xs'}`}
>
{/* Sidebar header */}
<div className="flex justify-between mb-10 pr-3 sm:px-2">
{/* Close button */}
<button
ref={trigger}
className="lg:hidden text-gray-500 hover:text-gray-400"
onClick={() => setSidebarOpen(!sidebarOpen)}
aria-controls="sidebar"
aria-expanded={sidebarOpen}
>
<span className="sr-only">Close sidebar</span>
<svg className="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M10.7 18.7l1.4-1.4L7.8 13H20v-2H7.8l4.3-4.3-1.4-1.4L4 12z" />
</svg>
</button>
{/* Logo */}
<NavLink end to="/" className="block">
<svg className="fill-violet-500" xmlns="http://www.w3.org/2000/svg" width={32} height={32}>
<path d="M31.956 14.8C31.372 6.92 25.08.628 17.2.044V5.76a9.04 9.04 0 0 0 9.04 9.04h5.716ZM14.8 26.24v5.716C6.92 31.372.63 25.08.044 17.2H5.76a9.04 9.04 0 0 1 9.04 9.04Zm11.44-9.04h5.716c-.584 7.88-6.876 14.172-14.756 14.756V26.24a9.04 9.04 0 0 1 9.04-9.04ZM.044 14.8C.63 6.92 6.92.628 14.8.044V5.76a9.04 9.04 0 0 1-9.04 9.04H.044Z" />
</svg>
</NavLink>
</div>
{/* Links */}
<div className="space-y-8">
{/* Pages group */}
<div>
<h3 className="text-xs uppercase text-gray-400 dark:text-gray-500 font-semibold pl-3">
<span className="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6" aria-hidden="true">
•••
</span>
<span className="lg:hidden lg:sidebar-expanded:block 2xl:block">Pages</span>
</h3>
<ul className="mt-3">
{/* Dashboard */}
<SidebarLinkGroup activecondition={pathname === "/" || pathname.includes("dashboard")}>
{(handleClick, open) => {
return (
<React.Fragment>
<a
href="#0"
className={`block text-gray-800 dark:text-gray-100 truncate transition duration-150 ${
pathname === "/" || pathname.includes("dashboard") ? "" : "hover:text-gray-900 dark:hover:text-white"
}`}
onClick={(e) => {
e.preventDefault();
handleClick();
setSidebarExpanded(true);
}}
>
<div className="flex items-center justify-between">
<div className="flex items-center">
<svg className={`shrink-0 fill-current ${pathname === "/" || pathname.includes("dashboard") ? 'text-violet-500' : 'text-gray-400 dark:text-gray-500'}`} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M5.936.278A7.983 7.983 0 0 1 8 0a8 8 0 1 1-8 8c0-.722.104-1.413.278-2.064a1 1 0 1 1 1.932.516A5.99 5.99 0 0 0 2 8a6 6 0 1 0 6-6c-.53 0-1.045.076-1.548.21A1 1 0 1 1 5.936.278Z" />
<path d="M6.068 7.482A2.003 2.003 0 0 0 8 10a2 2 0 1 0-.518-3.932L3.707 2.293a1 1 0 0 0-1.414 1.414l3.775 3.775Z" />
</svg>
<span className="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Dashboard
</span>
</div>
{/* Icon */}
<div className="flex shrink-0 ml-2">
<svg className={`w-3 h-3 shrink-0 ml-1 fill-current text-gray-400 dark:text-gray-500 ${open && "rotate-180"}`} viewBox="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
</div>
</div>
</a>
<div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul className={`pl-8 mt-1 ${!open && "hidden"}`}>
<li className="mb-1 last:mb-0">
<NavLink
end
to="/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Main
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Analytics
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Fintech
</span>
</NavLink>
</li>
</ul>
</div>
</React.Fragment>
);
}}
</SidebarLinkGroup>
{/* Users */}
<li
className={`pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0 bg-linear-to-r ${
pathname.includes("users") &&
"from-violet-500/[0.12] dark:from-violet-500/[0.24] to-violet-500/[0.04]"
}`}
>
<NavLink
end
to="/users"
className={`block text-gray-800 dark:text-gray-100 truncate transition duration-150 ${
pathname.includes("users")
? ""
: "hover:text-gray-900 dark:hover:text-white"
}`}
>
<div className="flex items-center">
{/* 👤 User Icon */}
<svg
className={`shrink-0 fill-current ${
pathname.includes("users")
? "text-violet-500"
: "text-gray-400 dark:text-gray-500"
}`}
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" />
</svg>
<span className="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Users
</span>
</div>
</NavLink>
</li>
{/* E-Commerce */}
<SidebarLinkGroup activecondition={pathname.includes("ecommerce")}>
{(handleClick, open) => {
return (
<React.Fragment>
<a
href="#0"
className={`block text-gray-800 dark:text-gray-100 truncate transition duration-150 ${
pathname.includes("ecommerce") ? "" : "hover:text-gray-900 dark:hover:text-white"
}`}
onClick={(e) => {
e.preventDefault();
handleClick();
setSidebarExpanded(true);
}}
>
<div className="flex items-center justify-between">
<div className="flex items-center">
<svg className={`shrink-0 fill-current ${pathname.includes('ecommerce') ? 'text-violet-500' : 'text-gray-400 dark:text-gray-500'}`} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M9 6.855A3.502 3.502 0 0 0 8 0a3.5 3.5 0 0 0-1 6.855v1.656L5.534 9.65a3.5 3.5 0 1 0 1.229 1.578L8 10.267l1.238.962a3.5 3.5 0 1 0 1.229-1.578L9 8.511V6.855ZM6.5 3.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm4.803 8.095c.005-.005.01-.01.013-.016l.012-.016a1.5 1.5 0 1 1-.025.032ZM3.5 11c.474 0 .897.22 1.171.563l.013.016.013.017A1.5 1.5 0 1 1 3.5 11Z" />
</svg>
<span className="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
E-Commerce
</span>
</div>
{/* Icon */}
<div className="flex shrink-0 ml-2">
<svg className={`w-3 h-3 shrink-0 ml-1 fill-current text-gray-400 dark:text-gray-500 ${open && "rotate-180"}`} viewBox="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
</div>
</div>
</a>
<div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul className={`pl-8 mt-1 ${!open && "hidden"}`}>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Customers
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Orders
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Invoices
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Shop
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Shop 2
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Single Product
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Cart
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Cart 2
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Cart 3
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Pay
</span>
</NavLink>
</li>
</ul>
</div>
</React.Fragment>
);
}}
</SidebarLinkGroup>
{/* Community */}
<SidebarLinkGroup activecondition={pathname.includes("community")}>
{(handleClick, open) => {
return (
<React.Fragment>
<a
href="#0"
className={`block text-gray-800 dark:text-gray-100 truncate transition duration-150 ${
pathname.includes("community") ? "" : "hover:text-gray-900 dark:hover:text-white"
}`}
onClick={(e) => {
e.preventDefault();
handleClick();
setSidebarExpanded(true);
}}
>
<div className="flex items-center justify-between">
<div className="flex items-center">
<svg className={`shrink-0 fill-current ${pathname.includes('community') ? 'text-violet-500' : 'text-gray-400 dark:text-gray-500'}`} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M12 1a1 1 0 1 0-2 0v2a3 3 0 0 0 3 3h2a1 1 0 1 0 0-2h-2a1 1 0 0 1-1-1V1ZM1 10a1 1 0 1 0 0 2h2a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0v-2a3 3 0 0 0-3-3H1ZM5 0a1 1 0 0 1 1 1v2a3 3 0 0 1-3 3H1a1 1 0 0 1 0-2h2a1 1 0 0 0 1-1V1a1 1 0 0 1 1-1ZM12 13a1 1 0 0 1 1-1h2a1 1 0 1 0 0-2h-2a3 3 0 0 0-3 3v2a1 1 0 1 0 2 0v-2Z" />
</svg>
<span className="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Community
</span>
</div>
{/* Icon */}
<div className="flex shrink-0 ml-2">
<svg className={`w-3 h-3 shrink-0 ml-1 fill-current text-gray-400 dark:text-gray-500 ${open && "rotate-180"}`} viewBox="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
</div>
</div>
</a>
<div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul className={`pl-8 mt-1 ${!open && "hidden"}`}>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Users - Tabs
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Users - Tiles
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Profile
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Feed
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Forum
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Forum - Post
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Meetups
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Meetups - Post
</span>
</NavLink>
</li>
</ul>
</div>
</React.Fragment>
);
}}
</SidebarLinkGroup>
{/* Finance */}
<SidebarLinkGroup activecondition={pathname.includes("finance")}>
{(handleClick, open) => {
return (
<React.Fragment>
<a
href="#0"
className={`block text-gray-800 dark:text-gray-100 truncate transition duration-150 ${
pathname.includes("finance") ? "" : "hover:text-gray-900 dark:hover:text-white"
}`}
onClick={(e) => {
e.preventDefault();
handleClick();
setSidebarExpanded(true);
}}
>
<div className="flex items-center justify-between">
<div className="flex items-center">
<svg className={`shrink-0 fill-current ${pathname.includes('finance') ? 'text-violet-500' : 'text-gray-400 dark:text-gray-500'}`} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M6 0a6 6 0 0 0-6 6c0 1.077.304 2.062.78 2.912a1 1 0 1 0 1.745-.976A3.945 3.945 0 0 1 2 6a4 4 0 0 1 4-4c.693 0 1.344.194 1.936.525A1 1 0 1 0 8.912.779 5.944 5.944 0 0 0 6 0Z" />
<path d="M10 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12Zm-4 6a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" />
</svg>
<span className="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Finance
</span>
</div>
{/* Icon */}
<div className="flex shrink-0 ml-2">
<svg className={`w-3 h-3 shrink-0 ml-1 fill-current text-gray-400 dark:text-gray-500 ${open && "rotate-180"}`} viewBox="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
</div>
</div>
</a>
<div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul className={`pl-8 mt-1 ${!open && "hidden"}`}>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Cards
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Transactions
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Transaction Details
</span>
</NavLink>
</li>
</ul>
</div>
</React.Fragment>
);
}}
</SidebarLinkGroup>
{/* Job Board */}
<SidebarLinkGroup activecondition={pathname.includes("job")}>
{(handleClick, open) => {
return (
<React.Fragment>
<a
href="#0"
className={`block text-gray-800 dark:text-gray-100 truncate transition duration-150 ${
pathname.includes("job") ? "" : "hover:text-gray-900 dark:hover:text-white"
}`}
onClick={(e) => {
e.preventDefault();
handleClick();
setSidebarExpanded(true);
}}
>
<div className="flex items-center justify-between">
<div className="flex items-center">
<svg className={`shrink-0 fill-current ${pathname.includes('job') ? 'text-violet-500' : 'text-gray-400 dark:text-gray-500'}`} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M6.753 2.659a1 1 0 0 0-1.506-1.317L2.451 4.537l-.744-.744A1 1 0 1 0 .293 5.207l1.5 1.5a1 1 0 0 0 1.46-.048l3.5-4ZM6.753 10.659a1 1 0 1 0-1.506-1.317l-2.796 3.195-.744-.744a1 1 0 0 0-1.414 1.414l1.5 1.5a1 1 0 0 0 1.46-.049l3.5-4ZM8 4.5a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1ZM9 11.5a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H9Z" />
</svg>
<span className="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Job Board
</span>
</div>
{/* Icon */}
<div className="flex shrink-0 ml-2">
<svg className={`w-3 h-3 shrink-0 ml-1 fill-current text-gray-400 dark:text-gray-500 ${open && "rotate-180"}`} viewBox="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
</div>
</div>
</a>
<div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul className={`pl-8 mt-1 ${!open && "hidden"}`}>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Listing
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Job Post
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Company Profile
</span>
</NavLink>
</li>
</ul>
</div>
</React.Fragment>
);
}}
</SidebarLinkGroup>
{/* Tasks */}
<SidebarLinkGroup activecondition={pathname.includes("tasks")}>
{(handleClick, open) => {
return (
<React.Fragment>
<a
href="#0"
className={`block text-gray-800 dark:text-gray-100 truncate transition duration-150 ${
pathname.includes("tasks") ? "" : "hover:text-gray-900 dark:hover:text-white"
}`}
onClick={(e) => {
e.preventDefault();
handleClick();
setSidebarExpanded(true);
}}
>
<div className="flex items-center justify-between">
<div className="flex items-center">
<svg className={`shrink-0 fill-current ${pathname.includes('tasks') ? 'text-violet-500' : 'text-gray-400 dark:text-gray-500'}`} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M7.586 9H1a1 1 0 1 1 0-2h6.586L6.293 5.707a1 1 0 0 1 1.414-1.414l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 1 1-1.414-1.414L7.586 9ZM3.075 4.572a1 1 0 1 1-1.64-1.144 8 8 0 1 1 0 9.144 1 1 0 0 1 1.64-1.144 6 6 0 1 0 0-6.856Z" />
</svg>
<span className="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Tasks
</span>
</div>
{/* Icon */}
<div className="flex shrink-0 ml-2">
<svg className={`w-3 h-3 shrink-0 ml-1 fill-current text-gray-400 dark:text-gray-500 ${open && "rotate-180"}`} viewBox="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
</div>
</div>
</a>
<div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul className={`pl-8 mt-1 ${!open && "hidden"}`}>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Kanban
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
List
</span>
</NavLink>
</li>
</ul>
</div>
</React.Fragment>
);
}}
</SidebarLinkGroup>
{/* Messages */}
<li className={`pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0 bg-linear-to-r ${pathname.includes("messages") && "from-violet-500/[0.12] dark:from-violet-500/[0.24] to-violet-500/[0.04]"}`}>
<NavLink
end
to="https://cruip.com/mosaic/"
className={`block text-gray-800 dark:text-gray-100 truncate transition duration-150 ${
pathname.includes("messages") ? "" : "hover:text-gray-900 dark:hover:text-white"
}`}
>
<div className="flex items-center justify-between">
<div className="grow flex items-center">
<svg className={`shrink-0 fill-current ${pathname.includes('messages') ? 'text-violet-500' : 'text-gray-400 dark:text-gray-500'}`} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M13.95.879a3 3 0 0 0-4.243 0L1.293 9.293a1 1 0 0 0-.274.51l-1 5a1 1 0 0 0 1.177 1.177l5-1a1 1 0 0 0 .511-.273l8.414-8.414a3 3 0 0 0 0-4.242L13.95.879ZM11.12 2.293a1 1 0 0 1 1.414 0l1.172 1.172a1 1 0 0 1 0 1.414l-8.2 8.2-3.232.646.646-3.232 8.2-8.2Z" />
<path d="M10 14a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2h-5Z" />
</svg>
<span className="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Messages
</span>
</div>
{/* Badge */}
<div className="flex shrink-0 ml-2">
<span className="inline-flex items-center justify-center h-5 text-xs font-medium text-white bg-violet-400 px-2 rounded-sm">4</span>
</div>
</div>
</NavLink>
</li>
{/* Inbox */}
<li className={`pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0 bg-linear-to-r ${pathname.includes("inbox") && "from-violet-500/[0.12] dark:from-violet-500/[0.24] to-violet-500/[0.04]"}`}>
<NavLink
end
to="https://cruip.com/mosaic/"
className={`block text-gray-800 dark:text-gray-100 truncate transition duration-150 ${
pathname.includes("inbox") ? "" : "hover:text-gray-900 dark:hover:text-white"
}`}
>
<div className="flex items-center">
<svg className={`shrink-0 fill-current ${pathname.includes('inbox') ? 'text-violet-500' : 'text-gray-400 dark:text-gray-500'}`} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M11.92 6.851c.044-.027.09-.05.137-.07.481-.275.758-.68.908-1.256.126-.55.169-.81.357-2.058.075-.498.144-.91.217-1.264-4.122.75-7.087 2.984-9.12 6.284a18.087 18.087 0 0 0-1.985 4.585 17.07 17.07 0 0 0-.354 1.506c-.05.265-.076.448-.086.535a1 1 0 0 1-1.988-.226c.056-.49.209-1.312.502-2.357a20.063 20.063 0 0 1 2.208-5.09C5.31 3.226 9.306.494 14.913.004a1 1 0 0 1 .954 1.494c-.237.414-.375.993-.567 2.267-.197 1.306-.244 1.586-.392 2.235-.285 1.094-.789 1.853-1.552 2.363-.748 3.816-3.976 5.06-8.515 4.326a1 1 0 0 1 .318-1.974c2.954.477 4.918.025 5.808-1.556-.628.085-1.335.121-2.127.121a1 1 0 1 1 0-2c1.458 0 2.434-.116 3.08-.429Z" />
</svg>
<span className="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Inbox</span>
</div>
</NavLink>
</li>
{/* Calendar */}
<li className={`pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0 bg-linear-to-r ${pathname.includes("calendar") && "from-violet-500/[0.12] dark:from-violet-500/[0.24] to-violet-500/[0.04]"}`}>
<NavLink
end
to="https://cruip.com/mosaic/"
className={`block text-gray-800 dark:text-gray-100 truncate transition duration-150 ${
pathname.includes("calendar") ? "" : "hover:text-gray-900 dark:hover:text-white"
}`}
>
<div className="flex items-center">
<svg className={`shrink-0 fill-current ${pathname.includes('calendar') ? 'text-violet-500' : 'text-gray-400 dark:text-gray-500'}`} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M5 4a1 1 0 0 0 0 2h6a1 1 0 1 0 0-2H5Z" />
<path d="M4 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4H4ZM2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Z" />
<path d="M4 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4H4ZM2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Z" />
</svg>
<span className="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Calendar
</span>
</div>
</NavLink>
</li>
{/* Campaigns */}
<li className={`pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0 bg-linear-to-r ${pathname.includes("campaigns") && "from-violet-500/[0.12] dark:from-violet-500/[0.24] to-violet-500/[0.04]"}`}>
<NavLink
end
to="https://cruip.com/mosaic/"
className={`block text-gray-800 dark:text-gray-100 truncate transition duration-150 ${
pathname.includes("campaigns") ? "" : "hover:text-gray-900 dark:hover:text-white"
}`}
>
<div className="flex items-center">
<svg className={`shrink-0 fill-current ${pathname.includes('campaigns') ? 'text-violet-500' : 'text-gray-400 dark:text-gray-500'}`} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M6.649 1.018a1 1 0 0 1 .793 1.171L6.997 4.5h3.464l.517-2.689a1 1 0 1 1 1.964.378L12.498 4.5h2.422a1 1 0 0 1 0 2h-2.807l-.77 4h2.117a1 1 0 1 1 0 2h-2.501l-.517 2.689a1 1 0 1 1-1.964-.378l.444-2.311H5.46l-.517 2.689a1 1 0 1 1-1.964-.378l.444-2.311H1a1 1 0 1 1 0-2h2.807l.77-4H2.46a1 1 0 0 1 0-2h2.5l.518-2.689a1 1 0 0 1 1.17-.793ZM9.307 10.5l.77-4H6.612l-.77 4h3.464Z" />
</svg>
<span className="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Campaigns
</span>
</div>
</NavLink>
</li>
{/* Settings */}
<SidebarLinkGroup activecondition={pathname.includes("settings")}>
{(handleClick, open) => {
return (
<React.Fragment>
<a
href="#0"
className={`block text-gray-800 dark:text-gray-100 truncate transition duration-150 ${
pathname.includes("settings") ? "" : "hover:text-gray-900 dark:hover:text-white"
}`}
onClick={(e) => {
e.preventDefault();
handleClick();
setSidebarExpanded(true);
}}
>
<div className="flex items-center justify-between">
<div className="flex items-center">
<svg className={`shrink-0 fill-current ${pathname.includes('settings') ? 'text-violet-500' : 'text-gray-400 dark:text-gray-500'}`} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M10.5 1a3.502 3.502 0 0 1 3.355 2.5H15a1 1 0 1 1 0 2h-1.145a3.502 3.502 0 0 1-6.71 0H1a1 1 0 0 1 0-2h6.145A3.502 3.502 0 0 1 10.5 1ZM9 4.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM5.5 9a3.502 3.502 0 0 1 3.355 2.5H15a1 1 0 1 1 0 2H8.855a3.502 3.502 0 0 1-6.71 0H1a1 1 0 1 1 0-2h1.145A3.502 3.502 0 0 1 5.5 9ZM4 12.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0Z" fillRule="evenodd" />
</svg>
<span className="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Settings
</span>
</div>
{/* Icon */}
<div className="flex shrink-0 ml-2">
<svg className={`w-3 h-3 shrink-0 ml-1 fill-current text-gray-400 dark:text-gray-500 ${open && "rotate-180"}`} viewBox="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
</div>
</div>
</a>
<div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul className={`pl-8 mt-1 ${!open && "hidden"}`}>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
My Account
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
My Notifications
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Connected Apps
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Plans
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Billing & Invoices
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Give Feedback
</span>
</NavLink>
</li>
</ul>
</div>
</React.Fragment>
);
}}
</SidebarLinkGroup>
{/* Utility */}
<SidebarLinkGroup activecondition={pathname.includes("utility")}>
{(handleClick, open) => {
return (
<React.Fragment>
<a
href="#0"
className={`block text-gray-800 dark:text-gray-100 truncate transition duration-150 ${
pathname.includes("utility") ? "" : "hover:text-gray-900 dark:hover:text-white"
}`}
onClick={(e) => {
e.preventDefault();
handleClick();
setSidebarExpanded(true);
}}
>
<div className="flex items-center justify-between">
<div className="flex items-center">
<svg className={`shrink-0 fill-current ${pathname.includes('utility') ? 'text-violet-500' : 'text-gray-400 dark:text-gray-500'}`} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M14.75 2.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM14.75 16a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM2.5 14.75a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM1.25 2.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z" />
<path d="M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2ZM4 8a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" />
</svg>
<span className="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Utility
</span>
</div>
{/* Icon */}
<div className="flex shrink-0 ml-2">
<svg className={`w-3 h-3 shrink-0 ml-1 fill-current text-gray-400 dark:text-gray-500 ${open && "rotate-180"}`} viewBox="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
</div>
</div>
</a>
<div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul className={`pl-8 mt-1 ${!open && "hidden"}`}>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Changelog
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Roadmap
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
FAQs
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Empty State
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
404
</span>
</NavLink>
</li>
</ul>
</div>
</React.Fragment>
);
}}
</SidebarLinkGroup>
</ul>
</div>
{/* More group */}
<div>
<h3 className="text-xs uppercase text-gray-400 dark:text-gray-500 font-semibold pl-3">
<span className="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6" aria-hidden="true">
•••
</span>
<span className="lg:hidden lg:sidebar-expanded:block 2xl:block">More</span>
</h3>
<ul className="mt-3">
{/* Authentication */}
<SidebarLinkGroup>
{(handleClick, open) => {
return (
<React.Fragment>
<a
href="#0"
className={`block text-gray-800 dark:text-gray-100 truncate transition duration-150 ${open ? "" : "hover:text-gray-900 dark:hover:text-white"}`}
onClick={(e) => {
e.preventDefault();
handleClick();
setSidebarExpanded(true);
}}
>
<div className="flex items-center justify-between">
<div className="flex items-center">
<svg className={`shrink-0 fill-current text-gray-400 dark:text-gray-500`} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M11.442 4.576a1 1 0 1 0-1.634-1.152L4.22 11.35 1.773 8.366A1 1 0 1 0 .227 9.634l3.281 4a1 1 0 0 0 1.59-.058l6.344-9ZM15.817 4.576a1 1 0 1 0-1.634-1.152l-5.609 7.957a1 1 0 0 0-1.347 1.453l.656.8a1 1 0 0 0 1.59-.058l6.344-9Z" />
</svg>
<span className="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Authentication
</span>
</div>
{/* Icon */}
<div className="flex shrink-0 ml-2">
<svg className={`w-3 h-3 shrink-0 ml-1 fill-current text-gray-400 dark:text-gray-500 ${open && "rotate-180"}`} viewBox="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
</div>
</div>
</a>
<div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul className={`pl-8 mt-1 ${!open && "hidden"}`}>
<li className="mb-1 last:mb-0">
<NavLink end to="https://cruip.com/mosaic/ dark:hover:text-gray-200 transition duration-150 truncate">
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Sign in
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink end to="https://cruip.com/mosaic/ dark:hover:text-gray-200 transition duration-150 truncate">
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Sign up
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink end to="https://cruip.com/mosaic/ hover:text-gray-700 dark:hover:text-gray-200 transition duration-150 truncate">
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Reset Password
</span>
</NavLink>
</li>
</ul>
</div>
</React.Fragment>
);
}}
</SidebarLinkGroup>
{/* Onboarding */}
<SidebarLinkGroup>
{(handleClick, open) => {
return (
<React.Fragment>
<a
href="#0"
className={`block text-gray-800 dark:text-gray-100 truncate transition duration-150 ${open ? "" : "hover:text-gray-900 dark:hover:text-white"}`}
onClick={(e) => {
e.preventDefault();
handleClick();
setSidebarExpanded(true);
}}
>
<div className="flex items-center justify-between">
<div className="flex items-center">
<svg className={`shrink-0 fill-current text-gray-400 dark:text-gray-500`} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M6.668.714a1 1 0 0 1-.673 1.244 6.014 6.014 0 0 0-4.037 4.037 1 1 0 1 1-1.916-.571A8.014 8.014 0 0 1 5.425.041a1 1 0 0 1 1.243.673ZM7.71 4.709a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM9.995.04a1 1 0 1 0-.57 1.918 6.014 6.014 0 0 1 4.036 4.037 1 1 0 0 0 1.917-.571A8.014 8.014 0 0 0 9.995.041ZM14.705 8.75a1 1 0 0 1 .673 1.244 8.014 8.014 0 0 1-5.383 5.384 1 1 0 0 1-.57-1.917 6.014 6.014 0 0 0 4.036-4.037 1 1 0 0 1 1.244-.673ZM1.958 9.424a1 1 0 0 0-1.916.57 8.014 8.014 0 0 0 5.383 5.384 1 1 0 0 0 .57-1.917 6.014 6.014 0 0 1-4.037-4.037Z" />
</svg>
<span className="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Onboarding
</span>
</div>
{/* Icon */}
<div className="flex shrink-0 ml-2">
<svg className={`w-3 h-3 shrink-0 ml-1 fill-current text-gray-400 dark:text-gray-500 ${open && "rotate-180"}`} viewBox="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
</div>
</div>
</a>
<div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul className={`pl-8 mt-1 ${!open && "hidden"}`}>
<li className="mb-1 last:mb-0">
<NavLink end to="https://cruip.com/mosaic/ hover:text-gray-700 dark:hover:text-gray-200 transition duration-150 truncate">
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Step 1
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink end to="https://cruip.com/mosaic/ hover:text-gray-700 dark:hover:text-gray-200 transition duration-150 truncate">
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Step 2
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink end to="https://cruip.com/mosaic/ hover:text-gray-700 dark:hover:text-gray-200 transition duration-150 truncate">
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Step 3
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink end to="https://cruip.com/mosaic/ hover:text-gray-700 dark:hover:text-gray-200 transition duration-150 truncate">
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Step 4
</span>
</NavLink>
</li>
</ul>
</div>
</React.Fragment>
);
}}
</SidebarLinkGroup>
{/* Components */}
<SidebarLinkGroup activecondition={pathname.includes("component")}>
{(handleClick, open) => {
return (
<React.Fragment>
<a
href="#0"
className={`block text-gray-800 dark:text-gray-100 truncate transition duration-150 ${
pathname.includes("component") ? "" : "hover:text-gray-900 dark:hover:text-white"
}`}
onClick={(e) => {
e.preventDefault();
handleClick();
setSidebarExpanded(true);
}}
>
<div className="flex items-center justify-between">
<div className="flex items-center">
<svg className={`shrink-0 fill-current ${pathname.includes('components-library') ? 'text-violet-500' : 'text-gray-400 dark:text-gray-500'}`} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M.06 10.003a1 1 0 0 1 1.948.455c-.019.08.01.152.078.19l5.83 3.333c.053.03.116.03.168 0l5.83-3.333a.163.163 0 0 0 .078-.188 1 1 0 0 1 1.947-.459 2.161 2.161 0 0 1-1.032 2.384l-5.83 3.331a2.168 2.168 0 0 1-2.154 0l-5.83-3.331a2.162 2.162 0 0 1-1.032-2.382Zm7.856-7.981-5.83 3.332a.17.17 0 0 0 0 .295l5.828 3.33c.054.031.118.031.17.002l5.83-3.333a.17.17 0 0 0 0-.294L8.085 2.023a.172.172 0 0 0-.17-.001ZM9.076.285l5.83 3.332c1.458.833 1.458 2.935 0 3.768l-5.83 3.333c-.667.38-1.485.38-2.153-.001l-5.83-3.332c-1.457-.833-1.457-2.935 0-3.767L6.925.285a2.173 2.173 0 0 1 2.15 0Z" />
</svg>
<span className="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Components
</span>
</div>
{/* Icon */}
<div className="flex shrink-0 ml-2">
<svg className={`w-3 h-3 shrink-0 ml-1 fill-current text-gray-400 dark:text-gray-500 ${open && "rotate-180"}`} viewBox="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
</div>
</div>
</a>
<div className="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul className={`pl-8 mt-1 ${!open && "hidden"}`}>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Button
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Input Form
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Dropdown
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Alert & Banner
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Modal
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Pagination
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Tabs
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Breadcrumb
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Badge
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Avatar
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Tooltip
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Accordion
</span>
</NavLink>
</li>
<li className="mb-1 last:mb-0">
<NavLink
end
to="https://cruip.com/mosaic/"
className={({ isActive }) =>
"block transition duration-150 truncate " + (isActive ? "text-violet-500" : "text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200")
}
>
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
Icons
</span>
</NavLink>
</li>
</ul>
</div>
</React.Fragment>
);
}}
</SidebarLinkGroup>
</ul>
</div>
</div>
{/* Expand / collapse button */}
<div className="pt-3 hidden lg:inline-flex 2xl:hidden justify-end mt-auto">
<div className="w-12 pl-4 pr-3 py-2">
<button className="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400" onClick={() => setSidebarExpanded(!sidebarExpanded)}>
<span className="sr-only">Expand / collapse sidebar</span>
<svg className="shrink-0 fill-current text-gray-400 dark:text-gray-500 sidebar-expanded:rotate-180" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M15 16a1 1 0 0 1-1-1V1a1 1 0 1 1 2 0v14a1 1 0 0 1-1 1ZM8.586 7H1a1 1 0 1 0 0 2h7.586l-2.793 2.793a1 1 0 1 0 1.414 1.414l4.5-4.5A.997.997 0 0 0 12 8.01M11.924 7.617a.997.997 0 0 0-.217-.324l-4.5-4.5a1 1 0 0 0-1.414 1.414L8.586 7M12 7.99a.996.996 0 0 0-.076-.373Z" />
</svg>
</button>
</div>
</div>
</div>
</div>
);
}
export default Sidebar;
Save and restart your dev server
npm run devGuys if you will have any kind of query then feel free to contact me.
Ajay
Thanks