diff --git a/public/arrow-right.svg b/public/arrow-right.svg new file mode 100644 index 000000000..01d388b6c --- /dev/null +++ b/public/arrow-right.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/studio/components/CustomToolMenu.tsx b/studio/components/CustomToolMenu.tsx new file mode 100644 index 000000000..2967c1573 --- /dev/null +++ b/studio/components/CustomToolMenu.tsx @@ -0,0 +1,12 @@ +import { ToolMenuProps } from "sanity"; +import { Inline } from "@sanity/ui"; +import { LinkButton } from "./linkButton/LinkButton"; + +export default function CustomToolMenu(props: ToolMenuProps) { + return ( + + {props.renderDefault(props)} + + + ); +} diff --git a/studio/components/linkButton/LinkButton.tsx b/studio/components/linkButton/LinkButton.tsx new file mode 100644 index 000000000..8f146f577 --- /dev/null +++ b/studio/components/linkButton/LinkButton.tsx @@ -0,0 +1,14 @@ +import { ArrowRightIcon } from "@sanity/icons"; +import styles from "./linkButton.module.css"; + +interface LinkButtonProps { + value?: string; +} + +export const LinkButton = ({ value }: LinkButtonProps) => { + return ( + + Shared Studio + + ); +}; diff --git a/studio/components/linkButton/linkButton.module.css b/studio/components/linkButton/linkButton.module.css new file mode 100644 index 000000000..522a640a7 --- /dev/null +++ b/studio/components/linkButton/linkButton.module.css @@ -0,0 +1,34 @@ +.wrapper { + align-items: center; + display: block; + list-style: none; + text-decoration: none; + white-space: nowrap; + border-radius: 3px; + padding: 0.2rem 0.5rem; +} + +.wrapper:hover { + background: #f5f5f7; +} + +.text { + display: flex; + align-items: center; + text-decoration: block; + font-weight: 500; + color: #323545; + letter-spacing: 0; + font-size: 13px; + gap: 0.2rem; + line-height: 19px; + + &::after { + content: ""; + width: 1rem; + height: 1rem; + -webkit-mask: url("/arrow-right.svg") no-repeat; + -webkit-mask-size: contain; + background-color: #323545; + } +} diff --git a/studio/sanity.config.ts b/studio/sanity.config.ts index 7cc583e0a..ef1aa6237 100644 --- a/studio/sanity.config.ts +++ b/studio/sanity.config.ts @@ -3,7 +3,7 @@ */ import { visionTool } from "@sanity/vision"; -import { defineConfig } from "sanity"; +import { defineConfig, StudioToolMenu } from "sanity"; import { presentationTool } from "sanity/presentation"; import { structureTool } from "sanity/structure"; @@ -11,6 +11,7 @@ import { structureTool } from "sanity/structure"; import { apiVersion, dataset, projectId } from "./env"; import { schema } from "./schema"; import deskStructure from "./schemas/deskStructure"; +import CustomToolMenu from "./components/CustomToolMenu"; export default defineConfig({ basePath: "/studio", @@ -18,6 +19,11 @@ export default defineConfig({ dataset, // Add and edit the content schema in the './studio/schema' folder schema, + studio: { + components: { + toolMenu: CustomToolMenu, + }, + }, plugins: [ structureTool({ structure: deskStructure,