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/ui"
)

// 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">
		<ui.Menubar>
			<ui.MenubarMenu>
				<ui.MenubarTrigger>ملف</ui.MenubarTrigger>
				<ui.MenubarContent>
					<ui.MenubarGroup>
						<ui.MenubarItem>
							علامة تبويب جديدة
							<ui.MenubarShortcut>⌘T</ui.MenubarShortcut>
						</ui.MenubarItem>
						<ui.MenubarItem>
							نافذة جديدة
							<ui.MenubarShortcut>⌘N</ui.MenubarShortcut>
						</ui.MenubarItem>
						<ui.MenubarItem aria-disabled="true" data-disabled="true">نافذة التصفح المتخفي الجديدة</ui.MenubarItem>
					</ui.MenubarGroup>
					<ui.MenubarSub>
						<ui.MenubarSubTrigger>مشاركة</ui.MenubarSubTrigger>
						<ui.MenubarSubContent>
							<ui.MenubarItem>رابط البريد الإلكتروني</ui.MenubarItem>
							<ui.MenubarItem>الرسائل</ui.MenubarItem>
							<ui.MenubarItem>الملاحظات</ui.MenubarItem>
						</ui.MenubarSubContent>
					</ui.MenubarSub>
					<ui.MenubarSeparator/>
					<ui.MenubarItem>
						طباعة...
						<ui.MenubarShortcut>⌘P</ui.MenubarShortcut>
					</ui.MenubarItem>
				</ui.MenubarContent>
			</ui.MenubarMenu>
			<ui.MenubarMenu>
				<ui.MenubarTrigger>تعديل</ui.MenubarTrigger>
				<ui.MenubarContent>
					<ui.MenubarItem>
						تراجع
						<ui.MenubarShortcut>⌘Z</ui.MenubarShortcut>
					</ui.MenubarItem>
					<ui.MenubarItem>
						إعادة
						<ui.MenubarShortcut>⇧⌘Z</ui.MenubarShortcut>
					</ui.MenubarItem>
					<ui.MenubarSeparator/>
					<ui.MenubarSub>
						<ui.MenubarSubTrigger>بحث</ui.MenubarSubTrigger>
						<ui.MenubarSubContent>
							<ui.MenubarItem>البحث على الويب</ui.MenubarItem>
							<ui.MenubarSeparator/>
							<ui.MenubarItem>بحث...</ui.MenubarItem>
							<ui.MenubarItem>البحث التالي</ui.MenubarItem>
							<ui.MenubarItem>البحث السابق</ui.MenubarItem>
						</ui.MenubarSubContent>
					</ui.MenubarSub>
					<ui.MenubarSeparator/>
					<ui.MenubarItem>قص</ui.MenubarItem>
					<ui.MenubarItem>نسخ</ui.MenubarItem>
					<ui.MenubarItem>لصق</ui.MenubarItem>
				</ui.MenubarContent>
			</ui.MenubarMenu>
			<ui.MenubarMenu>
				<ui.MenubarTrigger>عرض</ui.MenubarTrigger>
				<ui.MenubarContent>
					<ui.MenubarCheckboxItem checked={true} value="bookmarks">شريط الإشارات المرجعية</ui.MenubarCheckboxItem>
					<ui.MenubarCheckboxItem checked={false} value="full-urls">عناوين URL الكاملة</ui.MenubarCheckboxItem>
					<ui.MenubarSeparator/>
					<ui.MenubarItem aria-disabled="true" data-disabled="true">
						إعادة تحميل
						<ui.MenubarShortcut>⌘R</ui.MenubarShortcut>
					</ui.MenubarItem>
					<ui.MenubarItem aria-disabled="true" data-disabled="true">
						إعادة تحميل قسري
						<ui.MenubarShortcut>⇧⌘R</ui.MenubarShortcut>
					</ui.MenubarItem>
				</ui.MenubarContent>
			</ui.MenubarMenu>
			<ui.MenubarMenu>
				<ui.MenubarTrigger>الملفات الشخصية</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>تعديل...</ui.MenubarItem>
					<ui.MenubarSeparator/>
					<ui.MenubarItem>إضافة ملف شخصي...</ui.MenubarItem>
				</ui.MenubarContent>
			</ui.MenubarMenu>
		</ui.Menubar>
	</div>
}