| 1 |
import { __ } from '@wordpress/i18n'; |
| 2 |
import Icon from './Icon'; |
| 3 |
import { CloseIcon, SparklesIcon } from '../icons'; |
| 4 |
import { |
| 5 |
buildSidebarSections, |
| 6 |
getAdminBarHeight, |
| 7 |
groupHeadingClass, |
| 8 |
} from '../utils'; |
| 9 |
|
| 10 |
const Sidebar = ({ |
| 11 |
activePage, |
| 12 |
onNavigate, |
| 13 |
isPro, |
| 14 |
isOpen, |
| 15 |
isDesktop, |
| 16 |
onClose, |
| 17 |
settingsGroups = [], |
| 18 |
}) => { |
| 19 |
const sections = buildSidebarSections({ |
| 20 |
isPro, |
| 21 |
settingsGroups, |
| 22 |
}); |
| 23 |
|
| 24 |
const content = ( |
| 25 |
<> |
| 26 |
<nav className="flex flex-col gap-6" aria-label="Main"> |
| 27 |
{sections.map((section) => ( |
| 28 |
<div key={section.group}> |
| 29 |
<p className={`m-0 ${groupHeadingClass}`}>{section.group}</p> |
| 30 |
<ul className="m-0 list-none space-y-1 p-0"> |
| 31 |
{section.items |
| 32 |
.filter((item) => !(isPro && item.id === 'get-pro')) |
| 33 |
.map((item) => { |
| 34 |
const isActive = activePage === item.id; |
| 35 |
return ( |
| 36 |
<li key={item.id}> |
| 37 |
<button |
| 38 |
type="button" |
| 39 |
onClick={() => { |
| 40 |
onNavigate(item.id); |
| 41 |
window.location.hash = `#${item.id}`; |
| 42 |
onClose(); |
| 43 |
}} |
| 44 |
className={`flex w-full cursor-pointer items-center gap-3 rounded-lg border-0 px-3 py-3 text-left text-sm font-medium transition-colors ${ |
| 45 |
isActive |
| 46 |
? 'bg-uks-brand text-white shadow-sm' |
| 47 |
: 'bg-transparent text-slate-700 hover:bg-gray-100 hover:text-slate-900' |
| 48 |
}`} |
| 49 |
> |
| 50 |
<Icon name={item.icon} /> |
| 51 |
<span className="flex-1">{item.label}</span> |
| 52 |
{item.badge && ( |
| 53 |
<span |
| 54 |
className="shrink-0 whitespace-nowrap rounded-md border border-solid px-1.5 py-0.5 text-[9px] font-bold" |
| 55 |
style={{ |
| 56 |
borderColor: isActive |
| 57 |
? 'rgba(255,255,255,0.4)' |
| 58 |
: '#e5e7eb', |
| 59 |
color: isActive ? '#fff' : '#6b7280', |
| 60 |
background: isActive |
| 61 |
? 'rgba(255,255,255,0.18)' |
| 62 |
: 'transparent', |
| 63 |
}} |
| 64 |
> |
| 65 |
{item.badge} |
| 66 |
</span> |
| 67 |
)} |
| 68 |
</button> |
| 69 |
</li> |
| 70 |
); |
| 71 |
})} |
| 72 |
</ul> |
| 73 |
</div> |
| 74 |
))} |
| 75 |
</nav> |
| 76 |
<div className="mt-6 hidden rounded-xl bg-slate-100 p-4 lg:block lg:mt-8"> |
| 77 |
<span className="mb-2.5 flex items-center gap-2 text-base font-bold text-slate-800"> |
| 78 |
<SparklesIcon className="w-5 h-5" /> |
| 79 |
{__('Coming soon', 'ultimate-store-kit')} |
| 80 |
</span> |
| 81 |
<p className="m-0 text-[12px] leading-relaxed text-slate-600"> |
| 82 |
{__( |
| 83 |
'New items planned for upcoming updates:', |
| 84 |
'ultimate-store-kit' |
| 85 |
)} |
| 86 |
</p> |
| 87 |
<ul className="mt-2.5 m-0 space-y-1.5 p-0 text-[12px] text-slate-600"> |
| 88 |
<li className="flex items-start gap-2"> |
| 89 |
<span className="mt-1 h-1.5 w-1.5 rounded-full bg-uks-brand" /> |
| 90 |
{__('7+ WooCommerce widgets', 'ultimate-store-kit')} |
| 91 |
</li> |
| 92 |
<li className="flex items-start gap-2"> |
| 93 |
<span className="mt-1 h-1.5 w-1.5 rounded-full bg-uks-brand" /> |
| 94 |
{__('Template-based presets', 'ultimate-store-kit')} |
| 95 |
</li> |
| 96 |
<li className="flex items-start gap-2"> |
| 97 |
<span className="mt-1 h-1.5 w-1.5 rounded-full bg-uks-brand" /> |
| 98 |
{__('Performance-focused improvements', 'ultimate-store-kit')} |
| 99 |
</li> |
| 100 |
</ul> |
| 101 |
<button |
| 102 |
onClick={() => |
| 103 |
window.open( |
| 104 |
'https://feedback.bdthemes.com/b/6vr2250l/feature-requests', |
| 105 |
'_blank' |
| 106 |
) |
| 107 |
} |
| 108 |
type="button" |
| 109 |
className="mt-3 inline-flex cursor-pointer items-center rounded-lg border border-uks-brand bg-white px-3 py-1.5 text-[12px] font-semibold text-uks-brand transition-colors hover:bg-uks-brand hover:text-white" |
| 110 |
> |
| 111 |
{__('See roadmap', 'ultimate-store-kit')} |
| 112 |
</button> |
| 113 |
</div> |
| 114 |
</> |
| 115 |
); |
| 116 |
|
| 117 |
if (isDesktop) { |
| 118 |
return ( |
| 119 |
<div |
| 120 |
style={{ display: 'flex' }} |
| 121 |
className="w-64 shrink-0 flex-col justify-between self-stretch rounded-lg border border-solid border-gray-100 bg-white px-4 py-6 lg:sticky lg:top-[7.5rem]" |
| 122 |
> |
| 123 |
{content} |
| 124 |
</div> |
| 125 |
); |
| 126 |
} |
| 127 |
|
| 128 |
const adminBarH = getAdminBarHeight(); |
| 129 |
|
| 130 |
return ( |
| 131 |
<> |
| 132 |
{isOpen && ( |
| 133 |
<div |
| 134 |
style={{ |
| 135 |
display: 'block', |
| 136 |
position: 'fixed', |
| 137 |
top: adminBarH, |
| 138 |
left: 0, |
| 139 |
right: 0, |
| 140 |
bottom: 0, |
| 141 |
zIndex: 99998, |
| 142 |
backgroundColor: 'rgba(0,0,0,0.3)', |
| 143 |
}} |
| 144 |
onClick={onClose} |
| 145 |
aria-hidden="true" |
| 146 |
/> |
| 147 |
)} |
| 148 |
<div |
| 149 |
style={{ |
| 150 |
position: 'fixed', |
| 151 |
left: 0, |
| 152 |
top: adminBarH, |
| 153 |
zIndex: 99999, |
| 154 |
height: `calc(100vh - ${adminBarH}px)`, |
| 155 |
width: '86vw', |
| 156 |
maxWidth: '320px', |
| 157 |
display: 'flex', |
| 158 |
flexDirection: 'column', |
| 159 |
backgroundColor: '#fff', |
| 160 |
padding: '1rem', |
| 161 |
boxShadow: '4px 0 24px rgba(0,0,0,0.15)', |
| 162 |
transform: isOpen ? 'translateX(0)' : 'translateX(-100%)', |
| 163 |
transition: 'transform 300ms ease-out', |
| 164 |
pointerEvents: isOpen ? 'auto' : 'none', |
| 165 |
overflowY: 'auto', |
| 166 |
}} |
| 167 |
> |
| 168 |
<div className="mb-3 flex items-center justify-between"> |
| 169 |
<p className="m-0 text-sm font-bold text-slate-700"> |
| 170 |
{__('Navigation', 'ultimate-store-kit')} |
| 171 |
</p> |
| 172 |
<button |
| 173 |
type="button" |
| 174 |
onClick={onClose} |
| 175 |
className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 hover:text-slate-700" |
| 176 |
aria-label={__('Close menu', 'ultimate-store-kit')} |
| 177 |
> |
| 178 |
<CloseIcon className="h-4 w-4" /> |
| 179 |
</button> |
| 180 |
</div> |
| 181 |
{content} |
| 182 |
</div> |
| 183 |
</> |
| 184 |
); |
| 185 |
}; |
| 186 |
|
| 187 |
export default Sidebar; |
| 188 |
|
| 189 |
|
