From 93adf57d0004aec967a2b25921408cfa8bfbdf60 Mon Sep 17 00:00:00 2001
From: Jeroen Reumkens <hello@jeroenreumkens.nl>
Date: Sun, 4 Sep 2022 16:59:16 +0200
Subject: [PATCH] #4110: Made vertical tabs in bookings and event types pages
 sticky. (#4145)

Co-authored-by: Jeroen Reumkens <jeroen.reumkens@deptagency.com>
---
 .../components/v2/eventtype/EventTypeSingleLayout.tsx  |  2 +-
 packages/ui/v2/core/layouts/BookingLayout.tsx          |  2 +-
 packages/ui/v2/core/navigation/tabs/VerticalTabs.tsx   | 10 ++++++++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx
index f068878e34..4b165cc9ec 100644
--- a/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx
@@ -243,7 +243,7 @@ function EventTypeSingleLayout({
       <ClientSuspense fallback={<Loader />}>
         <div className="flex flex-col xl:flex-row xl:space-x-8">
           <div className="hidden xl:block">
-            <VerticalTabs tabs={EventTypeTabs} />
+            <VerticalTabs tabs={EventTypeTabs} sticky />
           </div>
           <div className="p-2 md:p-0 xl:hidden">
             <HorizontalTabs tabs={EventTypeTabs} />
diff --git a/packages/ui/v2/core/layouts/BookingLayout.tsx b/packages/ui/v2/core/layouts/BookingLayout.tsx
index 5881bdbef5..6ce5e35f35 100644
--- a/packages/ui/v2/core/layouts/BookingLayout.tsx
+++ b/packages/ui/v2/core/layouts/BookingLayout.tsx
@@ -42,7 +42,7 @@ export default function BookingLayout({
     <Shell {...rest}>
       <div className="flex flex-col p-2 md:p-0 xl:flex-row ">
         <div className="hidden xl:block">
-          <VerticalTabs tabs={tabs} />
+          <VerticalTabs tabs={tabs} sticky />
         </div>
         <div className="block xl:hidden">
           <HorizontalTabs tabs={tabs} />
diff --git a/packages/ui/v2/core/navigation/tabs/VerticalTabs.tsx b/packages/ui/v2/core/navigation/tabs/VerticalTabs.tsx
index 3d85409baa..2b0e4b7ece 100644
--- a/packages/ui/v2/core/navigation/tabs/VerticalTabs.tsx
+++ b/packages/ui/v2/core/navigation/tabs/VerticalTabs.tsx
@@ -1,16 +1,22 @@
 import { FC } from "react";
 
+import { classNames } from "@calcom/lib";
+
 import VerticalTabItem, { VerticalTabItemProps } from "./VerticalTabItem";
 
 export interface NavTabProps {
   tabs: VerticalTabItemProps[];
   children?: React.ReactNode;
   className?: string;
+  sticky?: boolean;
 }
 
-const NavTabs: FC<NavTabProps> = ({ tabs, className = "", ...props }) => {
+const NavTabs: FC<NavTabProps> = ({ tabs, className = "", sticky, ...props }) => {
   return (
-    <nav className={`no-scrollbar flex flex-col space-y-1 ${className}`} aria-label="Tabs" {...props}>
+    <nav
+      className={classNames(`no-scrollbar flex flex-col space-y-1 ${className}`, sticky && "sticky top-0")}
+      aria-label="Tabs"
+      {...props}>
       {props.children}
       {tabs.map((tab, idx) => (
         <VerticalTabItem {...tab} key={idx} />