Delete Onboarding and Component from Sidebar
This commit is contained in:
DwCay
@@ -47,10 +47,6 @@ function Sidebar({
|
||||
}
|
||||
}, [sidebarExpanded]);
|
||||
|
||||
function saveDigitalId () {
|
||||
localStorage.setItem('digitalId', '7234ABC3423423523457234ABC34234')
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Sidebar backdrop (mobile only) */}
|
||||
@@ -340,193 +336,6 @@ function Sidebar({
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* More group */}
|
||||
<div>
|
||||
<h3 className="text-xs uppercase text-slate-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">
|
||||
{/* Onboarding */}
|
||||
<SidebarLinkGroup>
|
||||
{(handleClick, open) => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<a
|
||||
href="#0"
|
||||
className={`block text-slate-200 hover:text-white truncate transition duration-150 ${open && 'hover:text-slate-200'}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
sidebarExpanded ? handleClick() : setSidebarExpanded(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<svg className="shrink-0 h-6 w-6" viewBox="0 0 24 24">
|
||||
<path
|
||||
className="fill-current text-slate-600"
|
||||
d="M19 5h1v14h-2V7.414L5.707 19.707 5 19H4V5h2v11.586L18.293 4.293 19 5Z"
|
||||
/>
|
||||
<path
|
||||
className="fill-current text-slate-400"
|
||||
d="M5 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm14 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8ZM5 23a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm14 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-sm font-medium ml-3 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-slate-400 ${open && 'transform 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-9 mt-1 ${!open && 'hidden'}`}>
|
||||
<li className="mb-1 last:mb-0">
|
||||
<NavLink end to="/onboarding-1" className="block text-slate-400 hover:text-slate-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="/onboarding-2" className="block text-slate-400 hover:text-slate-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="/onboarding-3" className="block text-slate-400 hover:text-slate-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="/onboarding-4" className="block text-slate-400 hover:text-slate-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>
|
||||
<li className="mb-1 last:mb-0">
|
||||
<NavLink onClick={()=>saveDigitalId()} end to="/shared-data" className="block text-slate-400 hover:text-slate-200 transition duration-150 truncate">
|
||||
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
||||
Shared Data
|
||||
</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-slate-200 hover:text-white truncate transition duration-150 ${
|
||||
pathname.includes('component') && 'hover:text-slate-200'
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
sidebarExpanded ? handleClick() : setSidebarExpanded(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<svg className="shrink-0 h-6 w-6" viewBox="0 0 24 24">
|
||||
<circle
|
||||
className={`fill-current text-slate-600 ${pathname.includes('component') && 'text-indigo-500'}`}
|
||||
cx="16"
|
||||
cy="8"
|
||||
r="8"
|
||||
/>
|
||||
<circle
|
||||
className={`fill-current text-slate-400 ${pathname.includes('component') && 'text-indigo-300'}`}
|
||||
cx="8"
|
||||
cy="16"
|
||||
r="8"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-sm font-medium ml-3 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-slate-400 ${open && 'transform 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-9 mt-1 ${!open && 'hidden'}`}>
|
||||
<li className="mb-1 last:mb-0">
|
||||
<NavLink
|
||||
end
|
||||
to="/component/button"
|
||||
className={({ isActive }) =>
|
||||
'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
|
||||
}
|
||||
>
|
||||
<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="/component/badge"
|
||||
className={({ isActive }) =>
|
||||
'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
|
||||
}
|
||||
>
|
||||
<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="/component/accordion"
|
||||
className={({ isActive }) =>
|
||||
'block text-slate-400 hover:text-slate-200 transition duration-150 truncate ' + (isActive ? '!text-indigo-500' : '')
|
||||
}
|
||||
>
|
||||
<span className="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
||||
Accordion
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}}
|
||||
</SidebarLinkGroup>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expand / collapse button */}
|
||||
|
||||
Reference in New Issue
Block a user