Scribd
Upload
8 views6 pages

New Microsoft Word Document

The document contains a React component named AdminNav that renders a sidebar navigation for an admin panel. It includes links to various sections such as Dashboard, Projects and Events, Donations, Inventory, Feedback, Beneficiaries, Members, Analytics, and Reports, each accompanied by an icon. The sidebar is styled with CSS to have a fixed position, a bright yellow background, and hover and active link effects.

Uploaded by

Maica Palas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views6 pages

New Microsoft Word Document

The document contains a React component named AdminNav that renders a sidebar navigation for an admin panel. It includes links to various sections such as Dashboard, Projects and Events, Donations, Inventory, Feedback, Beneficiaries, Members, Analytics, and Reports, each accompanied by an icon. The sidebar is styled with CSS to have a fixed position, a bright yellow background, and hover and active link effects.

Uploaded by

Maica Palas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

import React from 'react';

import { NavLink } from 'react-router-dom';

import logo from '../img/d_logo.png';


import homeIcon from '../img/home.png';
import projIcon from '../img/proj.png';
import heartIcon from '../img/heart.png';
import boxIcon from '../img/box.png';
import feedIcon from '../img/feed.png';
import locationIcon from '../img/location_on.png';
import memIcon from '../img/mem.png';
import analyticsIcon from '../img/analytics.png';
import reportIcon from '../img/report.png';

import './admin-nav.css';

function AdminNav() {
return (
<div className="admin-sidebar">
<div className="logo">
<img src={logo} alt="Logo" />
</div>
<nav>
<ul>
<li>
<NavLink to="/admin/dashboard" className={({ isActive }) => isActive ?
'active' : ''}>
<img src={homeIcon} alt="Dashboard" className="icon" /> Dashboard
</NavLink>
</li>
<li>
<NavLink to="/admin/projectevent" className={({ isActive }) =>
isActive ? 'active' : ''}>
<img src={projIcon} alt="Projects and Events" className="icon" />
Projects and Events
</NavLink>
</li>
<li>
<NavLink to="/admin/donations" className={({ isActive }) => isActive ?
'active' : ''}>
<img src={heartIcon} alt="Donation" className="icon" /> Donation
</NavLink>
</li>
<li>
<NavLink to="/admin/inventory" className={({ isActive }) => isActive ?
'active' : ''}>
<img src={boxIcon} alt="Inventory" className="icon" /> Inventory
</NavLink>
</li>
<li>
<NavLink to="/admin/feedback" className={({ isActive }) => isActive ?
'active' : ''}>
<img src={feedIcon} alt="Feedback" className="icon" /> Feedback
</NavLink>
</li>
<li>
<NavLink to="/admin/beneficiaries" className={({ isActive }) =>
isActive ? 'active' : ''}>
<img src={locationIcon} alt="Beneficiaries" className="icon" />
Beneficiaries
</NavLink>
</li>
<li>
<NavLink to="/admin/members" className={({ isActive }) => isActive ?
'active' : ''}>
<img src={memIcon} alt="Members" className="icon" /> Members
</NavLink>
</li>
<li>
<NavLink to="/admin/analytics" className={({ isActive }) => isActive ?
'active' : ''}>
<img src={analyticsIcon} alt="Analytics" className="icon" /> Analytics
</NavLink>
</li>
<li>
<NavLink to="/admin/report" className={({ isActive }) => isActive ?
'active' : ''}>
<img src={reportIcon} alt="Reports" className="icon" /> Reports
</NavLink>
</li>
</ul>
</nav>
</div>
);
}

export default AdminNav;


/* Sidebar container */
.admin-sidebar {
width: 220px;
height: 100vh;
background-color: #FFD700; /* Bright yellow */
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
left: 0;
top: 0;
padding-top: 20px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

/* Logo */
.admin-sidebar .logo img {
width: 100px;
height: auto;
margin-bottom: 30px;
}

/* Navigation list */
.admin-sidebar nav ul {
list-style: none;
padding: 0;
width: 100%;
}
/* Navigation list items */
.admin-sidebar nav ul li {
width: 100%;
}

/* NavLink style */
.admin-sidebar nav ul li a {
display: flex;
align-items: center;
padding: 12px 20px;
text-decoration: none;
font-size: 16px;
color: #000;
font-weight: 500;
transition: background-color 0.3s ease, color 0.3s ease;
}

.admin-sidebar nav ul li a .icon {


width: 20px;
height: 20px;
margin-right: 12px;
}

/* Hover effect */
.admin-sidebar nav ul li a:hover {
background-color: #fff3b0;
color: #000;
}

/* Active link style */


.admin-sidebar nav ul li a.active {
background-color: #000;
color: #fff;
font-weight: 600;
}

.admin-sidebar nav ul li a.active .icon {


filter: brightness(0) invert(1); /* Make icons white in active state */
}

You might also like