Menubar

// Package menubar holds the site's example gsx components for ui/menubar.
package menubar

import (
	"github.com/gsxhq/gsxui/ui"
)

// Basic mirrors shadcn's own menubar-demo.tsx (registry/new-york-v4/
// examples/menubar-demo.tsx) shape, trimmed to two menus: File (plain items
// with shortcuts, a separator) and Edit (plain items). Once one of the two
// triggers is open, hovering the other switches menus with no click — the
// open-follows-hover behavior this task's own ui/menubar.js adds.
component Basic() {
	<ui.Menubar>
		<ui.MenubarMenu>
			<ui.MenubarTrigger>File</ui.MenubarTrigger>
			<ui.MenubarContent>
				<ui.MenubarItem>
					New Tab
					<ui.MenubarShortcut>⌘T</ui.MenubarShortcut>
				</ui.MenubarItem>
				<ui.MenubarItem>
					New Window
					<ui.MenubarShortcut>⌘N</ui.MenubarShortcut>
				</ui.MenubarItem>
				<ui.MenubarSeparator/>
				<ui.MenubarItem>
					Print...
					<ui.MenubarShortcut>⌘P</ui.MenubarShortcut>
				</ui.MenubarItem>
			</ui.MenubarContent>
		</ui.MenubarMenu>
		<ui.MenubarMenu>
			<ui.MenubarTrigger>Edit</ui.MenubarTrigger>
			<ui.MenubarContent>
				<ui.MenubarItem>
					Undo
					<ui.MenubarShortcut>⌘Z</ui.MenubarShortcut>
				</ui.MenubarItem>
				<ui.MenubarItem>
					Redo
					<ui.MenubarShortcut>⇧⌘Z</ui.MenubarShortcut>
				</ui.MenubarItem>
				<ui.MenubarSeparator/>
				<ui.MenubarItem>Cut</ui.MenubarItem>
				<ui.MenubarItem>Copy</ui.MenubarItem>
				<ui.MenubarItem>Paste</ui.MenubarItem>
			</ui.MenubarContent>
		</ui.MenubarMenu>
	</ui.Menubar>
}

package menubar

import (
	"github.com/gsxhq/gsxui/ui"
)

// Full mirrors shadcn's own menubar-demo.tsx (registry/new-york-v4/
// examples/menubar-demo.tsx) end to end: a File menu with a disabled item
// and a submenu, an Edit menu with checkbox items, a View menu with a
// radio group, and a Profiles-shaped menu — exercising every shared item
// type Task 1/2 already shipped (Item, CheckboxItem, RadioGroup/RadioItem,
// Sub/SubTrigger/SubContent) plus this task's own bar-level roving tabindex
// and open-follows-hover. Every `inset` prop shadcn's demo passes maps to
// the CSS-only data-inset attr axis (see docs/jsx-parity.md's
// ## dropdown-menu ledger).
component Full() {
	<ui.Menubar>
		<ui.MenubarMenu>
			<ui.MenubarTrigger>File</ui.MenubarTrigger>
			<ui.MenubarContent>
				<ui.MenubarGroup>
					<ui.MenubarLabel>File actions</ui.MenubarLabel>
					<ui.MenubarItem>
						New Tab
						<ui.MenubarShortcut>⌘T</ui.MenubarShortcut>
					</ui.MenubarItem>
					<ui.MenubarItem>
						New Window
						<ui.MenubarShortcut>⌘N</ui.MenubarShortcut>
					</ui.MenubarItem>
					<ui.MenubarItem variant="destructive" aria-disabled="true" data-disabled="true">
						New Incognito Window
					</ui.MenubarItem>
				</ui.MenubarGroup>
				<ui.MenubarSub>
					<ui.MenubarSubTrigger>Share</ui.MenubarSubTrigger>
					<ui.MenubarSubContent>
						<ui.MenubarItem>Email Link</ui.MenubarItem>
						<ui.MenubarItem>Messages</ui.MenubarItem>
						<ui.MenubarItem>Notes</ui.MenubarItem>
					</ui.MenubarSubContent>
				</ui.MenubarSub>
				<ui.MenubarSeparator/>
				<ui.MenubarItem>
					Print...
					<ui.MenubarShortcut>⌘P</ui.MenubarShortcut>
				</ui.MenubarItem>
			</ui.MenubarContent>
		</ui.MenubarMenu>
		<ui.MenubarMenu>
			<ui.MenubarTrigger>Edit</ui.MenubarTrigger>
			<ui.MenubarContent>
				<ui.MenubarItem>
					Undo
					<ui.MenubarShortcut>⌘Z</ui.MenubarShortcut>
				</ui.MenubarItem>
				<ui.MenubarItem>
					Redo
					<ui.MenubarShortcut>⇧⌘Z</ui.MenubarShortcut>
				</ui.MenubarItem>
				<ui.MenubarSeparator/>
				<ui.MenubarSub>
					<ui.MenubarSubTrigger>Find</ui.MenubarSubTrigger>
					<ui.MenubarSubContent>
						<ui.MenubarItem>Search the web</ui.MenubarItem>
						<ui.MenubarSeparator/>
						<ui.MenubarItem>Find...</ui.MenubarItem>
						<ui.MenubarItem>Find Next</ui.MenubarItem>
						<ui.MenubarItem>Find Previous</ui.MenubarItem>
					</ui.MenubarSubContent>
				</ui.MenubarSub>
				<ui.MenubarSeparator/>
				<ui.MenubarItem>Cut</ui.MenubarItem>
				<ui.MenubarItem>Copy</ui.MenubarItem>
				<ui.MenubarItem>Paste</ui.MenubarItem>
			</ui.MenubarContent>
		</ui.MenubarMenu>
		<ui.MenubarMenu>
			<ui.MenubarTrigger>View</ui.MenubarTrigger>
			<ui.MenubarContent>
				<ui.MenubarCheckboxItem checked={true} value="bookmarks">Always Show Bookmarks Bar</ui.MenubarCheckboxItem>
				<ui.MenubarCheckboxItem checked={false} value="full-urls">Always Show Full URLs</ui.MenubarCheckboxItem>
				<ui.MenubarSeparator/>
				<ui.MenubarItem aria-disabled="true" data-disabled="true" data-inset="true">
					Reload
					<ui.MenubarShortcut>⌘R</ui.MenubarShortcut>
				</ui.MenubarItem>
				<ui.MenubarItem aria-disabled="true" data-disabled="true" data-inset="true">
					Force Reload
					<ui.MenubarShortcut>⇧⌘R</ui.MenubarShortcut>
				</ui.MenubarItem>
			</ui.MenubarContent>
		</ui.MenubarMenu>
		<ui.MenubarMenu>
			<ui.MenubarTrigger>Profiles</ui.MenubarTrigger>
			<ui.MenubarContent>
				<ui.MenubarRadioGroup value="benoit">
					<ui.MenubarRadioItem checked={false} value="andy">Andy</ui.MenubarRadioItem>
					<ui.MenubarRadioItem checked={true} value="benoit">Benoit</ui.MenubarRadioItem>
					<ui.MenubarRadioItem checked={false} value="luis">Luis</ui.MenubarRadioItem>
				</ui.MenubarRadioGroup>
				<ui.MenubarSeparator/>
				<ui.MenubarItem data-inset="true">Edit...</ui.MenubarItem>
				<ui.MenubarSeparator/>
				<ui.MenubarItem data-inset="true">Add Profile...</ui.MenubarItem>
			</ui.MenubarContent>
		</ui.MenubarMenu>
	</ui.Menubar>
}

// Package menubar holds the site's example gsx components for ui/menubar.
package menubar

import (
	"github.com/gsxhq/gsxui/site/uirtl"
)

// Rtl mirrors shadcn's own menubar-rtl demo (itself menubar-demo.tsx's
// shape, same as this dir's own Full): a File menu with a disabled item
// and a Share submenu, an Edit menu with a Find submenu, a View menu with
// checkbox items, and a Profiles menu with a radio group — translated to
// Arabic and wrapped in dir="rtl".
component Rtl() {
	<div dir="rtl" lang="ar">
		<uirtl.Menubar>
			<uirtl.MenubarMenu>
				<uirtl.MenubarTrigger>ملف</uirtl.MenubarTrigger>
				<uirtl.MenubarContent>
					<uirtl.MenubarGroup>
						<uirtl.MenubarItem>
							علامة تبويب جديدة
							<uirtl.MenubarShortcut>⌘T</uirtl.MenubarShortcut>
						</uirtl.MenubarItem>
						<uirtl.MenubarItem>
							نافذة جديدة
							<uirtl.MenubarShortcut>⌘N</uirtl.MenubarShortcut>
						</uirtl.MenubarItem>
						<uirtl.MenubarItem aria-disabled="true" data-disabled="true">
							نافذة التصفح المتخفي الجديدة
						</uirtl.MenubarItem>
					</uirtl.MenubarGroup>
					<uirtl.MenubarSub>
						<uirtl.MenubarSubTrigger>مشاركة</uirtl.MenubarSubTrigger>
						<uirtl.MenubarSubContent>
							<uirtl.MenubarItem>رابط البريد الإلكتروني</uirtl.MenubarItem>
							<uirtl.MenubarItem>الرسائل</uirtl.MenubarItem>
							<uirtl.MenubarItem>الملاحظات</uirtl.MenubarItem>
						</uirtl.MenubarSubContent>
					</uirtl.MenubarSub>
					<uirtl.MenubarSeparator/>
					<uirtl.MenubarItem>
						طباعة...
						<uirtl.MenubarShortcut>⌘P</uirtl.MenubarShortcut>
					</uirtl.MenubarItem>
				</uirtl.MenubarContent>
			</uirtl.MenubarMenu>
			<uirtl.MenubarMenu>
				<uirtl.MenubarTrigger>تعديل</uirtl.MenubarTrigger>
				<uirtl.MenubarContent>
					<uirtl.MenubarItem>
						تراجع
						<uirtl.MenubarShortcut>⌘Z</uirtl.MenubarShortcut>
					</uirtl.MenubarItem>
					<uirtl.MenubarItem>
						إعادة
						<uirtl.MenubarShortcut>⇧⌘Z</uirtl.MenubarShortcut>
					</uirtl.MenubarItem>
					<uirtl.MenubarSeparator/>
					<uirtl.MenubarSub>
						<uirtl.MenubarSubTrigger>بحث</uirtl.MenubarSubTrigger>
						<uirtl.MenubarSubContent>
							<uirtl.MenubarItem>البحث على الويب</uirtl.MenubarItem>
							<uirtl.MenubarSeparator/>
							<uirtl.MenubarItem>بحث...</uirtl.MenubarItem>
							<uirtl.MenubarItem>البحث التالي</uirtl.MenubarItem>
							<uirtl.MenubarItem>البحث السابق</uirtl.MenubarItem>
						</uirtl.MenubarSubContent>
					</uirtl.MenubarSub>
					<uirtl.MenubarSeparator/>
					<uirtl.MenubarItem>قص</uirtl.MenubarItem>
					<uirtl.MenubarItem>نسخ</uirtl.MenubarItem>
					<uirtl.MenubarItem>لصق</uirtl.MenubarItem>
				</uirtl.MenubarContent>
			</uirtl.MenubarMenu>
			<uirtl.MenubarMenu>
				<uirtl.MenubarTrigger>عرض</uirtl.MenubarTrigger>
				<uirtl.MenubarContent>
					<uirtl.MenubarCheckboxItem checked={true} value="bookmarks">شريط الإشارات المرجعية</uirtl.MenubarCheckboxItem>
					<uirtl.MenubarCheckboxItem checked={false} value="full-urls">عناوين URL الكاملة</uirtl.MenubarCheckboxItem>
					<uirtl.MenubarSeparator/>
					<uirtl.MenubarItem aria-disabled="true" data-disabled="true">
						إعادة تحميل
						<uirtl.MenubarShortcut>⌘R</uirtl.MenubarShortcut>
					</uirtl.MenubarItem>
					<uirtl.MenubarItem aria-disabled="true" data-disabled="true">
						إعادة تحميل قسري
						<uirtl.MenubarShortcut>⇧⌘R</uirtl.MenubarShortcut>
					</uirtl.MenubarItem>
				</uirtl.MenubarContent>
			</uirtl.MenubarMenu>
			<uirtl.MenubarMenu>
				<uirtl.MenubarTrigger>الملفات الشخصية</uirtl.MenubarTrigger>
				<uirtl.MenubarContent>
					<uirtl.MenubarRadioGroup value="benoit">
						<uirtl.MenubarRadioItem checked={false} value="andy">Andy</uirtl.MenubarRadioItem>
						<uirtl.MenubarRadioItem checked={true} value="benoit">Benoit</uirtl.MenubarRadioItem>
						<uirtl.MenubarRadioItem checked={false} value="luis">Luis</uirtl.MenubarRadioItem>
					</uirtl.MenubarRadioGroup>
					<uirtl.MenubarSeparator/>
					<uirtl.MenubarItem>تعديل...</uirtl.MenubarItem>
					<uirtl.MenubarSeparator/>
					<uirtl.MenubarItem>إضافة ملف شخصي...</uirtl.MenubarItem>
				</uirtl.MenubarContent>
			</uirtl.MenubarMenu>
		</uirtl.Menubar>
	</div>
}