Skip to content

Instantly share code, notes, and snippets.

@mstijak

mstijak/NavItem.js

Created June 2, 2021 06:08
Show Gist options
  • Save mstijak/0dcea4b191f937e58a7d1aab6e7a8983 to your computer and use it in GitHub Desktop.
Save mstijak/0dcea4b191f937e58a7d1aab6e7a8983 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mstijak created this gist Jun 2, 2021.
    26 changes: 26 additions & 0 deletions NavItem.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    const NavItem = ({ text, href, tooltip, onClick, className, icon, badge, expanded }) => (
    <cx>
    <Link
    href={href}
    url-bind="url"
    class="hover:bg-gray-100 flex items-center px-3 py-3 text-gray-600 relative font-semibold whitespace-nowrap text-opacity-70 text-[15px] border-l-[3px] border-transparent cursor-pointer"
    className={className}
    activeClass="!bg-blue-100 !border-blue-500 !text-blue-500 !opacity-100"
    tooltip={tooltip}
    onClick={onClick}
    match="subroute"
    >
    <Icon name={icon} class="w-7 h-7 ml-3 mr-3 opacity-80" />
    <div text={text} class="flex-grow" />
    <div text={badge} visible={badge} class="text-xs bg-black bg-opacity-20 rounded-full px-3 py-1" />
    <Icon
    name="drop-down"
    class="w-5 h-5 mr-2 transform transition-all opacity-80"
    visible={!!expanded}
    className={{
    'rotate-180': expanded,
    }}
    />
    </Link>
    </cx>
    );