import { VerticalNav, VerticalNavItem } from "./VerticalNav";
import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
import FlyTooltip from '../../overlays/FlyTooltip/FlyTooltip';

<Meta title="Modules/VerticalNav" component={VerticalNav} />

# macOS

<Canvas>
	<Story name="macOS">
        <div>
			<VerticalNav location={{ pathname: '' }}>
				<VerticalNavItem
					tooltip="Local Sites"
					routeTo="/main/site-info"
				>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.08 32"><path d="M4.08 13a1 1 0 1 1 1 1 1 1 0 0 1-1-1zm4 1a1 1 0 1 0-1-1 1 1 0 0 0 1 1zm3 0a1 1 0 1 0-1-1 1 1 0 0 0 1 1zm-6-8h22a1 1 0 0 0 0-2h-22a1 1 0 0 0 0 2zm4-4h14a1 1 0 0 0 0-2h-14a1 1 0 0 0 0 2zm23 9v18a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V11a3 3 0 0 1 3-3h26.08a3 3 0 0 1 3 3zM2 11v5h28.08v-5a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1zm28.08 18V18H2v11a1 1 0 0 0 1 1h26.08a1 1 0 0 0 1-1z"></path></svg>
				</VerticalNavItem>
				<VerticalNavItem
					tooltip="Connect to Flywheel"
					routeTo="/main/flywheel"
				>
					<svg xmlns="http://www.w3.org/2000/svg" width="32" height="27" viewBox="0 0 32 27"><path d="M6 21H5c-2.8 0-5-2.2-5-5 0-2.1 1.3-3.9 3.1-4.6-.1-.5-.1-.9-.1-1.4C3 4.5 7.5 0 13 0c2.9 0 5.6 1.2 7.5 3.4.8-.3 1.6-.4 2.5-.4 5 0 9 4 9 9 0 3.7-2.2 7-5.6 8.3-.5.2-1.1 0-1.3-.6-.2-.5 0-1.1.6-1.3 2.7-1.1 4.4-3.6 4.4-6.5 0-3.9-3.1-7-7-7-.8 0-1.7.2-2.5.5-.4.2-.9 0-1.2-.3C17.8 3.1 15.5 2 13 2c-4.4 0-8 3.6-8 8 0 .6.1 1.2.2 1.8.1.3 0 .5-.1.8s-.4.4-.7.5C3 13.3 2 14.6 2 16c0 1.7 1.3 3 3 3h1c.6 0 1 .4 1 1s-.4 1-1 1zM16 27c-.2 0-.3 0-.4-.1l-6-3c-.5-.2-.7-.8-.4-1.3.2-.5.8-.7 1.3-.4l5.6 2.8 5.6-2.8c.5-.2 1.1 0 1.3.4.2.5 0 1.1-.4 1.3l-6 3c-.3.1-.4.1-.6.1z"></path><path d="M16 14.5c-.4 0-.8-.2-1.1-.4-.1-.1-.1-.2-.2-.2 0-.1-.1-.2-.1-.3 0-.1-.1-.2-.1-.3V13v-.3c0-.1 0-.2.1-.3 0-.1.1-.2.1-.3.1-.1.1-.2.2-.2l.2-.2c.1-.1.2-.1.3-.1.1 0 .2-.1.3-.1h.6c.1 0 .2 0 .3.1.1 0 .2.1.3.1.1.1.2.1.2.2l.2.2c0 .1.1.2.1.3 0 .1.1.2.1.3v.6c0 .1 0 .2-.1.3 0 .1-.1.2-.1.3-.1.1-.1.2-.2.2-.3.2-.7.4-1.1.4zM16 23c-.2 0-.3 0-.4-.1l-4-2c-.5-.2-.7-.8-.4-1.3.2-.5.8-.7 1.3-.4l3.6 1.8 3.6-1.8c.5-.2 1.1 0 1.3.4.2.5 0 1.1-.4 1.3l-4 2c-.3.1-.4.1-.6.1zM16 19c-.2 0-.3 0-.4-.1l-2-1c-.5-.2-.7-.8-.4-1.3.2-.5.8-.7 1.3-.4l1.6.8 1.6-.8c.5-.2 1.1 0 1.3.4.2.5 0 1.1-.4 1.3l-2 1c-.3.1-.4.1-.6.1z"></path></svg>
				</VerticalNavItem>
				<VerticalNavItem
					className='VerticalNavItem_Addons'
					tooltip="Add-ons"
					routeTo="/main/marketplace"
				>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.529 26.463" aria-hidden="true"><path d="m10.966 24.953-2-3.46-1.19.69a3.992 3.992 0 1 1-6.35-4.33 3.866 3.866 0 0 1 3.32-.83l1.22-.71-1-1.73a3.007 3.007 0 0 1 1.1-4.1l2.6-1.5-.7-1.19a4.07 4.07 0 0 1-2.47-2.43 4.055 4.055 0 0 1 1.18-4.42 4.008 4.008 0 0 1 6.05 1.06 3.817 3.817 0 0 1 .43 2.74l.71 1.23 2.6-1.5a3.007 3.007 0 0 1 4.1 1.1l1 1.73 1.19-.7a3.994 3.994 0 1 1 5.77 4.76 3.817 3.817 0 0 1-2.74.43l-1.23.71 2 3.46a3.007 3.007 0 0 1-1.1 4.1l-1.73 1a3.007 3.007 0 0 1-4.1-1.1l-.21-.36a1.974 1.974 0 0 1-.21-1.36 1.95 1.95 0 0 0-.43-1.67 2.02 2.02 0 0 0-2.19-.59 2.006 2.006 0 0 0-1.06 2.89 1.959 1.959 0 0 0 1.09.88 1.924 1.924 0 0 1 1.07.86l.21.36a3.007 3.007 0 0 1-1.1 4.1l-1.73 1a3.022 3.022 0 0 1-4.1-1.12Zm4.94-10.86a4.009 4.009 0 0 1 4.41 1.19 3.858 3.858 0 0 1 .83 3.32l.21.36a1.01 1.01 0 0 0 1.37.37l1.73-1a1.01 1.01 0 0 0 .37-1.37l-2-3.46a2.006 2.006 0 0 1 .73-2.73l1.23-.71a1.918 1.918 0 0 1 1.36-.2 1.972 1.972 0 0 0 1.38-.22 2 2 0 0 0 .97-1.38 1.96 1.96 0 0 0-.45-1.65 2.024 2.024 0 0 0-2.19-.58 1.97 1.97 0 0 0-1.21 1.23 1.946 1.946 0 0 1-.86 1.08l-1.22.71a2 2 0 0 1-2.73-.73l-1-1.73a1.01 1.01 0 0 0-1.37-.37l-2.6 1.5a2 2 0 0 1-2.73-.73l-.71-1.23a1.918 1.918 0 0 1-.2-1.36 1.972 1.972 0 0 0-.22-1.38 2 2 0 0 0-3.03-.52 1.967 1.967 0 0 0 .63 3.38 1.946 1.946 0 0 1 1.08.86l.71 1.22a2.006 2.006 0 0 1-.73 2.73l-2.6 1.5a1.01 1.01 0 0 0-.37 1.37l1 1.73a2.006 2.006 0 0 1-.73 2.73l-1.22.71a1.918 1.918 0 0 1-1.36.2 1.982 1.982 0 0 0-1.67.43 2.02 2.02 0 0 0-.59 2.19 1.988 1.988 0 0 0 3.76-.02 1.924 1.924 0 0 1 .86-1.07l1.23-.71a2 2 0 0 1 2.73.73l2 3.46a1.01 1.01 0 0 0 1.37.37l1.73-1a1.01 1.01 0 0 0 .37-1.37l-.19-.32a3.981 3.981 0 0 1-.7-7.23 3.231 3.231 0 0 1 .62-.3Z"></path></svg>
				</VerticalNavItem>
				<VerticalNavItem
					type="button"
					tooltip="Trigger an action"
					onClick={() => alert('Clicked me!')}
				>
					<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M0 1C0 0.447715 0.447715 0 1 0H3C3.55228 0 4 0.447715 4 1V3C4 3.55228 3.55228 4 3 4H1C0.447715 4 0 3.55228 0 3V1ZM9 1C9 0.447715 9.44771 0 10 0H12C12.5523 0 13 0.447715 13 1V3C13 3.55228 12.5523 4 12 4H10C9.44771 4 9 3.55228 9 3V1ZM19 0C18.4477 0 18 0.447715 18 1V3C18 3.55228 18.4477 4 19 4H21C21.5523 4 22 3.55228 22 3V1C22 0.447715 21.5523 0 21 0H19ZM0 10C0 9.44771 0.447715 9 1 9H3C3.55228 9 4 9.44771 4 10V12C4 12.5523 3.55228 13 3 13H1C0.447715 13 0 12.5523 0 12V10ZM10 9C9.44771 9 9 9.44771 9 10V12C9 12.5523 9.44771 13 10 13H12C12.5523 13 13 12.5523 13 12V10C13 9.44771 12.5523 9 12 9H10ZM18 10C18 9.44771 18.4477 9 19 9H21C21.5523 9 22 9.44771 22 10V12C22 12.5523 21.5523 13 21 13H19C18.4477 13 18 12.5523 18 12V10ZM1 18C0.447715 18 0 18.4477 0 19V21C0 21.5523 0.447715 22 1 22H3C3.55228 22 4 21.5523 4 21V19C4 18.4477 3.55228 18 3 18H1ZM9 19C9 18.4477 9.44771 18 10 18H12C12.5523 18 13 18.4477 13 19V21C13 21.5523 12.5523 22 12 22H10C9.44771 22 9 21.5523 9 21V19ZM19 18C18.4477 18 18 18.4477 18 19V21C18 21.5523 18.4477 22 19 22H21C21.5523 22 22 21.5523 22 21V19C22 18.4477 21.5523 18 21 18H19Z" fill="black"/></svg>
				</VerticalNavItem>
				<VerticalNavItem type="filler" />
				<VerticalNavItem
					navLinkActiveClassName="none"
					routeTo="/main/add-site"
					tooltip="Add Local Site"
					type="addsite"
				>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 13h10a1 1 0 1 0 0-2H13V1a1 1 0 0 0-2 0v10H1a1 1 0 1 0 0 2h10v10a1 1 0 1 0 2 0z"></path></svg>
				</VerticalNavItem>
			</VerticalNav>
		</div>
	</Story>
</Canvas>

# Windows

_Note the lack of top padding._

<Canvas>
	<Story name="Windows">
        <div className="__OsWindows" style={{ height: '300px' }}>
			<VerticalNav location={{ pathname: '' }}>
				<FlyTooltip
					content="Local Sites"
					position="right"
					hoverIntent={true}
				>
					<a>
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.08 32"><path d="M4.08 13a1 1 0 1 1 1 1 1 1 0 0 1-1-1zm4 1a1 1 0 1 0-1-1 1 1 0 0 0 1 1zm3 0a1 1 0 1 0-1-1 1 1 0 0 0 1 1zm-6-8h22a1 1 0 0 0 0-2h-22a1 1 0 0 0 0 2zm4-4h14a1 1 0 0 0 0-2h-14a1 1 0 0 0 0 2zm23 9v18a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V11a3 3 0 0 1 3-3h26.08a3 3 0 0 1 3 3zM2 11v5h28.08v-5a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1zm28.08 18V18H2v11a1 1 0 0 0 1 1h26.08a1 1 0 0 0 1-1z"></path></svg>
					</a>
				</FlyTooltip>
			</VerticalNav>
		</div>
	</Story>
</Canvas>