#4110: Made vertical tabs in bookings and event types pages sticky. (#4145)

Co-authored-by: Jeroen Reumkens <jeroen.reumkens@deptagency.com>

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} />

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} />

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} />