Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: new menubar component #260

Merged
merged 8 commits into from
Nov 3, 2023
Merged

feat: new menubar component #260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4e62227
feat: new menubar component
jer3m01 Aug 14, 2023
f12eab9
wip
jer3m01 Aug 27, 2023
a72c0a5
wip
jer3m01 Oct 30, 2023
d498688
feat: new menubar component
jer3m01 Oct 30, 2023
ceeaf6d
chore: format
jer3m01 Oct 30, 2023
118be2f
chore: reset playground
jer3m01 Oct 30, 2023
2d7f7a3
docs: add menubar
jer3m01 Oct 31, 2023
3c582f1
fix: ssr & touch
jer3m01 Oct 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions apps/docs/src/examples/context-menu.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,7 @@
background-color: white;
border-radius: 6px;
border: 1px solid hsl(240 6% 90%);
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
outline: none;
transform-origin: var(--kb-menu-content-transform-origin);
animation: contentHide 250ms ease-in forwards;
Expand Down
4 changes: 1 addition & 3 deletions apps/docs/src/examples/dropdown-menu.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,7 @@
background-color: white;
border-radius: 6px;
border: 1px solid hsl(240 6% 90%);
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
outline: none;
transform-origin: var(--kb-menu-content-transform-origin);
animation: contentHide 250ms ease-in forwards;
Expand Down
191 changes: 191 additions & 0 deletions apps/docs/src/examples/menubar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
.menubar__root {
display: flex;
justify-content: center;
align-items: center;
}

.menubar__trigger {
appearance: none;
display: inline-flex;
justify-content: center;
align-items: center;
height: 40px;
width: auto;
outline: none;
padding: 0 16px;
background-color: #f6f6f7;
color: hsl(240 4% 16%);
font-size: 16px;
gap: 8px;
line-height: 0;
transition: 250ms background-color;
}

.menubar__trigger[data-highlighted="true"] {
background-color: hsl(200 98% 39%);
color: white;
}

.menubar__trigger:first-child {
border-radius: 4px 0 0 4px;
}

.menubar__trigger:last-child {
border-radius: 0 4px 4px 0;
}

.menubar__content,
.menubar__sub-content {
min-width: 220px;
padding: 8px;
background-color: white;
border-radius: 6px;
border: 1px solid hsl(240 6% 90%);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
outline: none;
transform-origin: var(--kb-menu-content-transform-origin);
animation: contentHide 250ms ease-in forwards;
}

.menubar__content[data-expanded],
.menubar__sub-content[data-expanded] {
animation: contentShow 250ms ease-out;
}

.menubar__item,
.menubar__checkbox-item,
.menubar__radio-item,
.menubar__sub-trigger {
font-size: 16px;
line-height: 1;
color: hsl(240 4% 16%);
border-radius: 4px;
display: flex;
align-items: center;
height: 32px;
padding: 0 8px 0 24px;
position: relative;
user-select: none;
outline: none;
}

.menubar__sub-trigger[data-expanded] {
background-color: hsl(204 94% 94%);
color: hsl(201 96% 32%);
}

.menubar__item[data-disabled],
.menubar__checkbox-item[data-disabled],
.menubar__radio-item[data-disabled],
.menubar__sub-trigger[data-disabled] {
color: hsl(240 5% 65%);
opacity: 0.5;
pointer-events: none;
}

.menubar__item[data-highlighted],
.menubar__checkbox-item[data-highlighted],
.menubar__radio-item[data-highlighted],
.menubar__sub-trigger[data-highlighted] {
outline: none;
background-color: hsl(200 98% 39%);
color: white;
}

.menubar__group-label {
padding: 0 24px;
font-size: 14px;
line-height: 32px;
color: hsl(240 4% 46%);
}

.menubar__separator {
height: 1px;
border-top: 1px solid hsl(240 6% 90%);
margin: 6px;
}

.menubar__item-indicator {
position: absolute;
left: 0;
height: 20px;
width: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.menubar__item-right-slot {
margin-left: auto;
padding-left: 20px;
font-size: 14px;
color: hsl(240 4% 46%);
}

[data-highlighted] > .menubar__item-right-slot {
color: white;
}

[data-disabled] .menubar__item-right-slot {
color: hsl(240 5% 65%);
opacity: 0.5;
}

@keyframes contentShow {
from {
opacity: 0;
transform: scale(0.96);
}
to {
opacity: 1;
transform: scale(1);
}
}

@keyframes contentHide {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.96);
}
}

[data-kb-theme="dark"] .menubar__trigger {
background-color: hsl(240 4% 16%);
color: hsl(0 100% 100% / 0.9);
}

[data-kb-theme="dark"] .menubar__content,
[data-kb-theme="dark"] .menubar__sub-content {
border: 1px solid hsl(240 5% 26%);
background-color: hsl(240 4% 16%);
box-shadow: none;
}

[data-kb-theme="dark"] .menubar__group-label {
color: hsl(0 100% 100% / 0.7);
}

[data-kb-theme="dark"] .menubar__item,
[data-kb-theme="dark"] .menubar__checkbox-item,
[data-kb-theme="dark"] .menubar__radio-item,
[data-kb-theme="dark"] .menubar__sub-trigger {
color: hsl(0 100% 100% / 0.9);
}

[data-kb-theme="dark"] .menubar__sub-trigger[data-expanded]:not([data-highlighted]) {
background-color: hsl(202 80% 24% / 0.7);
color: hsl(198 93% 60%);
}

[data-kb-theme="dark"] .menubar__separator {
border-color: hsl(240 5% 34%);
}

[data-kb-theme="dark"] .menubar__trigger[data-highlighted="true"] {
background-color: hsl(201 96% 32%);
color: hsla(0 100% 100% / 0.9);
}
175 changes: 175 additions & 0 deletions apps/docs/src/examples/menubar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
import { Menubar } from "@kobalte/core";
import { createSignal } from "solid-js";

import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "../components";
import style from "./menubar.module.css";

export function BasicExample() {
const [showGitLog, setShowGitLog] = createSignal(true);
const [showHistory, setShowHistory] = createSignal(false);
const [branch, setBranch] = createSignal("main");

return (
<Menubar.Root class={style["menubar__root"]}>
<Menubar.Menu>
<Menubar.Trigger class={style["menubar__trigger"]}>Git</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content class={style["menubar__content"]}>
<Menubar.Item class={style["menubar__item"]}>
Commit <div class={style["menubar__item-right-slot"]}>⌘+K</div>
</Menubar.Item>
<Menubar.Item class={style["menubar__item"]}>
Push <div class={style["menubar__item-right-slot"]}>⇧+⌘+K</div>
</Menubar.Item>
<Menubar.Item class={style["menubar__item"]} disabled>
Update Project <div class={style["menubar__item-right-slot"]}>⌘+T</div>
</Menubar.Item>
<Menubar.Sub overlap gutter={4} shift={-8}>
<Menubar.SubTrigger class={style["menubar__sub-trigger"]}>
GitHub
<div class={style["menubar__item-right-slot"]}>
<ChevronRightIcon width={20} height={20} />
</div>
</Menubar.SubTrigger>
<Menubar.Portal>
<Menubar.SubContent class={style["menubar__sub-content"]}>
<Menubar.Item class={style["menubar__item"]}>Create Pull Request…</Menubar.Item>
<Menubar.Item class={style["menubar__item"]}>View Pull Requests</Menubar.Item>
<Menubar.Item class={style["menubar__item"]}>Sync Fork</Menubar.Item>
<Menubar.Separator class={style["menubar__separator"]} />
<Menubar.Item class={style["menubar__item"]}>Open on GitHub</Menubar.Item>
</Menubar.SubContent>
</Menubar.Portal>
</Menubar.Sub>

<Menubar.Separator class={style["menubar__separator"]} />

<Menubar.CheckboxItem
class={style["menubar__checkbox-item"]}
checked={showGitLog()}
onChange={setShowGitLog}
>
<Menubar.ItemIndicator class={style["menubar__item-indicator"]}>
<CheckIcon />
</Menubar.ItemIndicator>
Show Git Log
</Menubar.CheckboxItem>
<Menubar.CheckboxItem
class={style["menubar__checkbox-item"]}
checked={showHistory()}
onChange={setShowHistory}
>
<Menubar.ItemIndicator class={style["menubar__item-indicator"]}>
<CheckIcon />
</Menubar.ItemIndicator>
Show History
</Menubar.CheckboxItem>

<Menubar.Separator class={style["menubar__separator"]} />

<Menubar.Group>
<Menubar.GroupLabel class={style["menubar__group-label"]}>
Branches
</Menubar.GroupLabel>
<Menubar.RadioGroup value={branch()} onChange={setBranch}>
<Menubar.RadioItem class={style["menubar__radio-item"]} value="main">
<Menubar.ItemIndicator class={style["menubar__item-indicator"]}>
<DotFilledIcon />
</Menubar.ItemIndicator>
main
</Menubar.RadioItem>
<Menubar.RadioItem class={style["menubar__radio-item"]} value="develop">
<Menubar.ItemIndicator class={style["menubar__item-indicator"]}>
<DotFilledIcon />
</Menubar.ItemIndicator>
develop
</Menubar.RadioItem>
</Menubar.RadioGroup>
</Menubar.Group>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>

<Menubar.Menu>
<Menubar.Trigger class={style["menubar__trigger"]}>File</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content class={style["menubar__content"]}>
<Menubar.Item class={style["menubar__item"]}>
New Tab <div class={style["menubar__item-right-slot"]}>⌘+T</div>
</Menubar.Item>
<Menubar.Item class={style["menubar__item"]}>
New Window <div class={style["menubar__item-right-slot"]}>⌘+N</div>
</Menubar.Item>
<Menubar.Item class={style["menubar__item"]} disabled>
New Incognito Window
</Menubar.Item>

<Menubar.Separator class={style["menubar__separator"]} />

<Menubar.Sub overlap gutter={4} shift={-8}>
<Menubar.SubTrigger class={style["menubar__sub-trigger"]}>
Share
<div class={style["menubar__item-right-slot"]}>
<ChevronRightIcon width={20} height={20} />
</div>
</Menubar.SubTrigger>
<Menubar.Portal>
<Menubar.SubContent class={style["menubar__sub-content"]}>
<Menubar.Item class={style["menubar__item"]}>Email Link</Menubar.Item>
<Menubar.Item class={style["menubar__item"]}>Messages</Menubar.Item>
<Menubar.Item class={style["menubar__item"]}>Notes</Menubar.Item>
</Menubar.SubContent>
</Menubar.Portal>
</Menubar.Sub>

<Menubar.Separator class={style["menubar__separator"]} />

<Menubar.Item class={style["menubar__item"]}>
Print... <div class={style["menubar__item-right-slot"]}>⌘+P</div>
</Menubar.Item>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>

<Menubar.Menu>
<Menubar.Trigger class={style["menubar__trigger"]}>Edit</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content class={style["menubar__content"]}>
<Menubar.Item class={style["menubar__item"]}>
Undo <div class={style["menubar__item-right-slot"]}>⌘+Z</div>
</Menubar.Item>
<Menubar.Item class={style["menubar__item"]}>
Redo <div class={style["menubar__item-right-slot"]}>⇧+⌘+Z</div>
</Menubar.Item>

<Menubar.Separator class={style["menubar__separator"]} />

<Menubar.Sub overlap gutter={4} shift={-8}>
<Menubar.SubTrigger class={style["menubar__sub-trigger"]}>
Find
<div class={style["menubar__item-right-slot"]}>
<ChevronRightIcon width={20} height={20} />
</div>
</Menubar.SubTrigger>
<Menubar.Portal>
<Menubar.SubContent class={style["menubar__sub-content"]}>
<Menubar.Item class={style["menubar__item"]}>Search The Web</Menubar.Item>
<Menubar.Separator class={style["menubar__separator"]} />
<Menubar.Item class={style["menubar__item"]}>Find...</Menubar.Item>
<Menubar.Item class={style["menubar__item"]}>Find Next</Menubar.Item>
<Menubar.Item class={style["menubar__item"]}>Find Previous</Menubar.Item>
</Menubar.SubContent>
</Menubar.Portal>
</Menubar.Sub>

<Menubar.Separator class={style["menubar__separator"]} />

<Menubar.Item class={style["menubar__item"]}>Cut</Menubar.Item>
<Menubar.Item class={style["menubar__item"]}>Copy</Menubar.Item>
<Menubar.Item class={style["menubar__item"]}>Paste</Menubar.Item>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root>
);
}
Loading