8-bit Menu Bar

1"use client";
2 
3import * as React from "react";
4 
5import * as MenubarPrimitive from "@radix-ui/react-menubar";
6import { cva } from "class-variance-authority";
7import { Circle } from "lucide-react";
8 
9import { cn } from "@/lib/utils";
10 
11import "@/components/ui/8bit/styles/retro.css";
12 
13export const menubarVariants = cva("", {
14  variants: {
15    font: {
16      normal: "",
17      retro: "retro",
18    },
19  },
20  defaultVariants: {
21    font: "retro",
22  },
23});
24 
25function MenubarMenu({
26  ...props
27}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
28  return <MenubarPrimitive.Menu {...props} />;
29}
30 
31function MenubarGroup({
32  ...props
33}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
34  return <MenubarPrimitive.Group {...props} />;
35}
36 
37function MenubarPortal({
38  ...props
39}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
40  return <MenubarPrimitive.Portal {...props} />;
41}
42 
43function MenubarRadioGroup({
44  ...props
45}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
46  return <MenubarPrimitive.RadioGroup {...props} />;
47}
48 
49function MenubarSub({
50  ...props
51}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
52  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
53}
54 
55const Menubar = React.forwardRef<
56  React.ComponentRef<typeof MenubarPrimitive.Root>,
57  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
58>(({ className, ...props }, ref) => (
59  <div
60    className={cn(
61      "relative border-y-6 border-foreground dark:border-ring !p-0",
62      menubarVariants({ font: "retro" }),
63      className
64    )}
65  >
66    <MenubarPrimitive.Root
67      ref={ref}
68      className={cn(
69        "flex h-10 items-center space-x-1 bg-background p-1",
70        className
71      )}
72      {...props}
73    />
74    <div
75      className="absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none"
76      aria-hidden="true"
77    />
78  </div>
79));
80Menubar.displayName = MenubarPrimitive.Root.displayName;
81 
82const MenubarTrigger = React.forwardRef<
83  React.ComponentRef<typeof MenubarPrimitive.Trigger>,
84  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
85>(({ className, ...props }, ref) => (
86  <MenubarPrimitive.Trigger
87    ref={ref}
88    className={cn(
89// … truncated