andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

styled chrome scrollbar

Browse Source
This commit is contained in:
kayela
2026-01-05 14:16:05 -06:00
parent 11142ec50e
commit 11de3d1eed
2 changed files with 35 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/AdminSidebar.js
View File

@@ -204,8 +204,8 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
${item.disabled
? 'opacity-50 cursor-not-allowed text-[#664fa3]'
: active
? 'bg-[#ff9e77]/10 text-[#ff9e77]'
: 'text-[#422268] hover:bg-[#DDD8EB]/20'
? 'bg-[#ff9e77]/10 text-[#ff9e77]'
: 'text-[#422268] hover:bg-[#DDD8EB]/20'
}
`}
>
@@ -269,9 +269,8 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
<img
src={`${process.env.PUBLIC_URL}/loaf-logo.png`}
alt="LOAF Logo"
className={`object-contain transition-all duration-200 ${
isOpen ? 'h-10 w-10' : 'h-8 w-8'
}`}
className={`object-contain transition-all duration-200 ${isOpen ? 'h-10 w-10' : 'h-8 w-8'
}`}
/>
{isOpen && (
<div className="flex-1 min-w-0">
@@ -300,7 +299,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
</div>
{/* Navigation */}
<nav className="flex-1 overflow-y-auto p-4">
<nav className="flex-1 overflow-y-auto p-4 scrollbar-dashboard scrollbar-x-dashboard">
{/* Dashboard - Standalone */}
{renderNavItem(filteredNavItems.find(item => item.name === 'Dashboard'))}
@@ -397,11 +396,10 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
</div>
<div className="w-full bg-[#ddd8eb] rounded-full h-2">
<div
className={`h-2 rounded-full transition-all ${
storagePercentage > 90 ? 'bg-red-500' :
className={`h-2 rounded-full transition-all ${storagePercentage > 90 ? 'bg-red-500' :
storagePercentage > 75 ? 'bg-yellow-500' :
'bg-[#81B29A]'
}`}
'bg-[#81B29A]'
}`}
style={{ width: `${storagePercentage}%` }}
/>
</div>
@@ -412,11 +410,10 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
) : (
<div className="flex justify-center">
<div className="relative group">
<HardDrive className={`h-5 w-5 ${
storagePercentage > 90 ? 'text-red-500' :
<HardDrive className={`h-5 w-5 ${storagePercentage > 90 ? 'text-red-500' :
storagePercentage > 75 ? 'text-yellow-500' :
'text-[#664fa3]'
}`} />
'text-[#664fa3]'
}`} />
{storagePercentage > 75 && (
<div className="absolute -top-1 -right-1 bg-red-500 h-2 w-2 rounded-full" />
)}