Merge remote-tracking branch 'origin/master' into Onboarding_steps
This commit is contained in:
DwCay
@@ -1,5 +1,6 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { NavLink, useLocation } from 'react-router-dom';
|
||||
import Logo from '../images/logo.png';
|
||||
|
||||
import SidebarLinkGroup from './SidebarLinkGroup';
|
||||
|
||||
@@ -66,7 +67,7 @@ function Sidebar({
|
||||
}`}
|
||||
>
|
||||
{/* Sidebar header */}
|
||||
<div className="flex justify-between mb-10 pr-3 sm:px-2">
|
||||
<div className="flex justify-between mb-10 pr-3 sm:px-3">
|
||||
{/* Close button */}
|
||||
<button
|
||||
ref={trigger}
|
||||
@@ -82,28 +83,7 @@ function Sidebar({
|
||||
</button>
|
||||
{/* Logo */}
|
||||
<NavLink end to="/" className="block">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="logo-a">
|
||||
<stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
|
||||
<stop stopColor="#A5B4FC" offset="100%" />
|
||||
</linearGradient>
|
||||
<linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="logo-b">
|
||||
<stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
|
||||
<stop stopColor="#38BDF8" offset="100%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="#6366F1" width="32" height="32" rx="16" />
|
||||
<path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
|
||||
<path
|
||||
d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z"
|
||||
fill="url(#logo-a)"
|
||||
/>
|
||||
<path
|
||||
d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z"
|
||||
fill="url(#logo-b)"
|
||||
/>
|
||||
</svg>
|
||||
<img alt='logo' src={Logo} width="89" height="32"/>
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
@@ -213,6 +193,116 @@ function Sidebar({
|
||||
);
|
||||
}}
|
||||
</SidebarLinkGroup>
|
||||
{/* digitalId */}
|
||||
<SidebarLinkGroup activecondition={pathname.includes('digitalId')}>
|
||||
{(handleClick, open) => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<a
|
||||
href="#0"
|
||||
className={`block text-slate-200 hover:text-white truncate transition duration-150 ${
|
||||
pathname.includes('digitalId') && '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 ${pathname.includes('digitalId') && 'text-indigo-500'}`}
|
||||
d="M19.714 14.7l-7.007 7.007-1.414-1.414 7.007-7.007c-.195-.4-.298-.84-.3-1.286a3 3 0 113 3 2.969 2.969 0 01-1.286-.3z"
|
||||
/>
|
||||
<path
|
||||
className={`fill-current text-slate-400 ${pathname.includes('digitalId') && 'text-indigo-300'}`}
|
||||
d="M10.714 18.3c.4-.195.84-.298 1.286-.3a3 3 0 11-3 3c.002-.446.105-.885.3-1.286l-6.007-6.007 1.414-1.414 6.007 6.007z"
|
||||
/>
|
||||
<path
|
||||
className={`fill-current text-slate-600 ${pathname.includes('digitalId') && 'text-indigo-500'}`}
|
||||
d="M5.7 10.714c.195.4.298.84.3 1.286a3 3 0 11-3-3c.446.002.885.105 1.286.3l7.007-7.007 1.414 1.414L5.7 10.714z"
|
||||
/>
|
||||
<path
|
||||
className={`fill-current text-slate-400 ${pathname.includes('digitalId') && 'text-indigo-300'}`}
|
||||
d="M19.707 9.292a3.012 3.012 0 00-1.415 1.415L13.286 5.7c-.4.195-.84.298-1.286.3a3 3 0 113-3 2.969 2.969 0 01-.3 1.286l5.007 5.006z"
|
||||
/>
|
||||
</svg>
|
||||
<span className="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
||||
Digital ID
|
||||
</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="/digitalId/profile-id"
|
||||
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">
|
||||
Profile
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="mb-1 last:mb-0">
|
||||
<NavLink
|
||||
end
|
||||
to="/digitalId/validate"
|
||||
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">
|
||||
Validate
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="mb-1 last:mb-0">
|
||||
<NavLink
|
||||
end
|
||||
to="/digitalId/validation-log"
|
||||
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">
|
||||
Validation log
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="mb-1 last:mb-0">
|
||||
<NavLink
|
||||
end
|
||||
to="/digitalId/verify"
|
||||
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">
|
||||
Verify
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}}
|
||||
</SidebarLinkGroup>
|
||||
{/* E-Commerce */}
|
||||
<SidebarLinkGroup activecondition={pathname.includes('ecommerce')}>
|
||||
{(handleClick, open) => {
|
||||
|
||||
Reference in New Issue
Block a user