+29

src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.module.css

View file Reviewed

··· 7 7 } 8 8 } 9 9 10 10 + /* navlink inactive (open collection - green) */ 11 11 + .navLinkGreen { 12 12 + color: var(--mantine-color-green-7); 13 13 + 14 14 + @mixin dark { 15 15 + color: var(--mantine-color-green-5); 16 16 + } 17 17 + } 18 18 + 10 19 /* navlink active */ 11 20 .navLinkActive { 12 21 color: var(--mantine-color-dark-filled); ··· 16 25 } 17 26 } 18 27 28 28 + /* navlink active (open collection - green) */ 29 29 + .navLinkActiveGreen { 30 30 + color: var(--mantine-color-green-9); 31 31 + 32 32 + @mixin dark { 33 33 + color: var(--mantine-color-green-4); 34 34 + } 35 35 + } 36 36 + 19 37 /* badge inactive */ 20 38 .badge { 21 39 background-color: var(--mantine-color-gray-light); ··· 37 55 color: var(--mantine-color-white); 38 56 } 39 57 } 58 58 + 59 59 + /* badge active (open collection - green) */ 60 60 + .badgeActiveGreen { 61 61 + background-color: var(--mantine-color-green-9); 62 62 + color: var(--mantine-color-white); 63 63 + 64 64 + @mixin dark { 65 65 + background-color: var(--mantine-color-green-7); 66 66 + color: var(--mantine-color-white); 67 67 + } 68 68 + }

+16 -15

src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.tsx

View file Reviewed

··· 1 1 import { useNavbarContext } from '@/providers/navbar'; 2 2 - import { Badge, NavLink, ThemeIcon } from '@mantine/core'; 2 2 + import { Badge, NavLink } from '@mantine/core'; 3 3 import Link from 'next/link'; 4 4 import { usePathname } from 'next/navigation'; 5 5 import styles from './CollectionNavItem.module.css'; 6 6 import { isMarginUri } from '@/lib/utils/margin'; 7 7 import MarginLogo from '@/components/MarginLogo'; 8 8 import { CollectionAccessType } from '@semble/types'; 9 9 - import { FaSeedling } from 'react-icons/fa6'; 10 9 11 10 interface Props { 12 11 name: string; ··· 21 20 const pathname = usePathname(); 22 21 const isActive = pathname === props.url; 23 22 const isMargin = isMarginUri(props.uri); 23 23 + const isOpenCollection = props.accessType === CollectionAccessType.OPEN; 24 24 25 25 return ( 26 26 <NavLink 27 27 component={Link} 28 28 href={props.url} 29 29 label={props.name} 30 30 - variant="subtle" 30 30 + active={isActive} 31 31 + color="gray" 31 32 classNames={{ 32 33 root: isActive 33 33 - ? `${styles.navLink} ${styles.navLinkActive}` 34 34 - : styles.navLink, 34 34 + ? `${styles.navLink} ${isOpenCollection ? styles.navLinkActiveGreen : styles.navLinkActive}` 35 35 + : isOpenCollection 36 36 + ? `${styles.navLink} ${styles.navLinkGreen}` 37 37 + : styles.navLink, 35 38 }} 36 39 onClick={toggleMobile} 37 37 - leftSection={ 38 38 - isMargin ? ( 39 39 - <MarginLogo size={16} /> 40 40 - ) : props.accessType === CollectionAccessType.OPEN ? ( 41 41 - <ThemeIcon size={'sm'} variant="light" color={'green'} radius={'xl'}> 42 42 - <FaSeedling size={10} /> 43 43 - </ThemeIcon> 44 44 - ) : undefined 45 45 - } 40 40 + leftSection={isMargin ? <MarginLogo size={16} /> : undefined} 46 41 rightSection={ 47 42 props.cardCount > 0 ? ( 48 43 <Badge 49 49 - className={isActive ? styles.badgeActive : styles.badge} 44 44 + className={ 45 45 + isActive 46 46 + ? isOpenCollection 47 47 + ? styles.badgeActiveGreen 48 48 + : styles.badgeActive 49 49 + : styles.badge 50 50 + } 50 51 circle 51 52 > 52 53 {props.cardCount}