Navigation.js
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import { Link, useLocation } from 'react-router-dom'; |
| 3 | |
| 4 | // settings icons. |
| 5 | import GeneralIcon from './settingsIcon.js'; |
| 6 | |
| 7 | function useQuery() { |
| 8 | return new URLSearchParams( useLocation().search ); |
| 9 | } |
| 10 | |
| 11 | const Navigation = () => { |
| 12 | const activatedTab = useQuery(); |
| 13 | const navigation = [ |
| 14 | { |
| 15 | name: __( 'General', 'sureforms' ), |
| 16 | slug: 'general-settings', |
| 17 | icon: <GeneralIcon />, |
| 18 | }, |
| 19 | { |
| 20 | name: __( 'Email Summary', 'sureforms' ), |
| 21 | slug: 'email-summary', |
| 22 | icon: <GeneralIcon />, |
| 23 | }, |
| 24 | ]; |
| 25 | return ( |
| 26 | <nav |
| 27 | className="srfm-flex srfm-flex-col srfm-max-w-[300px] srfm-min-h-full srfm-p-[20px] srfm-gap-[2px] srfm-w-[20%] srfm-bg-[#FBFBFC] srfm-shadow-md" |
| 28 | style={ { borderRight: '1px solid #E4E7EB' } } |
| 29 | > |
| 30 | { navigation.map( ( item ) => ( |
| 31 | <Link |
| 32 | to={ { |
| 33 | location: `${ srfm_admin.site_url }/wp-admin/admin.php`, |
| 34 | search: `?page=sureforms_form_settings&tab=${ item.slug }`, |
| 35 | } } |
| 36 | key={ item.name } |
| 37 | className={ `srfm-no-underline srfm-group srfm-p-2 srfm-cursor-pointer srfm-rounded-md srfm-transition-colors srfm-duration-300 srfm-ease-in-out hover:srfm-bg-wpcolor focus:srfm-bg-wpcolor focus:srfm-text-[#FBFBFC] focus:srfm-ring-0 ${ |
| 38 | activatedTab.get( 'tab' ) === item.slug |
| 39 | ? 'srfm-bg-wpcolor srfm-text-[#FBFBFC]' |
| 40 | : 'srfm-text-[#111827]' |
| 41 | }` } |
| 42 | > |
| 43 | <div className="srfm-flex srfm-justify-start srfm-gap-2"> |
| 44 | { item.icon } |
| 45 | <span className="truncate srfm-text-[16px] group-hover:srfm-text-[#FBFBFC] srfm-transition-colors srfm-duration-300 srfm-ease-in-out"> |
| 46 | { item.name } |
| 47 | </span> |
| 48 | </div> |
| 49 | </Link> |
| 50 | ) ) } |
| 51 | </nav> |
| 52 | ); |
| 53 | }; |
| 54 | |
| 55 | export default Navigation; |
| 56 |