From c48a1c74c38a5b58f61ace58731de97d719d0eeb Mon Sep 17 00:00:00 2001
From: anemne <63043552+anemne@users.noreply.github.com>
Date: Mon, 2 Sep 2024 07:42:09 +0200
Subject: [PATCH] v3 - Added tab for opening shared studio (#533)

* Add OpenSharedButton component for opening shared studio

* Prettier fix

* Update studio/schemas/documents/blog.ts

Co-authored-by: christinaroise <54266462+christinaroise@users.noreply.github.com>

* Update studio/components/OpenSharedButton.tsx

Co-authored-by: christinaroise <54266462+christinaroise@users.noreply.github.com>

* Rename OpenSharedButton with OpenSharedLink in blog schema

* Rename opensharedlink to linkbutton and added style to link

* Prettier

* added border and round corners to button

* Add shared studio in navigationbar

* Removed module.css file for customToolMenu

* Prettier fix

* Pretty

* removed link from blog

* refactor: Rename CustomLink component property to 'component'

* moved arrow icon to css file for a11y

---------

Co-authored-by: christinaroise <54266462+christinaroise@users.noreply.github.com>
---
 public/arrow-right.svg                        |  4 +++
 studio/components/CustomToolMenu.tsx          | 12 +++++++
 studio/components/linkButton/LinkButton.tsx   | 14 ++++++++
 .../linkButton/linkButton.module.css          | 34 +++++++++++++++++++
 studio/sanity.config.ts                       |  8 ++++-
 5 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 public/arrow-right.svg
 create mode 100644 studio/components/CustomToolMenu.tsx
 create mode 100644 studio/components/linkButton/LinkButton.tsx
 create mode 100644 studio/components/linkButton/linkButton.module.css

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 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path d="M3.20215 12L20 12" stroke="#80828F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13 5L20 12L13 19" stroke="#80828F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ 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 (
+    <Inline>
+      {props.renderDefault(props)}
+      <LinkButton value="/shared" />
+    </Inline>
+  );
+}
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 (
+    <a className={styles.wrapper} href={value}>
+      <span className={styles.text}>Shared Studio</span>
+    </a>
+  );
+};
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,