[DRAFT] feat: responsive project view

src/components/molecules/navigationButton.tsx

@@ -22,7 +22,7 @@ export const NavigationButton = ({
 	showUnderline = true,
 }: NavigationButtonProps) => {
 	const buttonClassName = cn(
-		"group relative size-full gap-2 whitespace-nowrap rounded-none bg-transparent p-3.5 text-gray-1500 hover:bg-gray-1050",
+		"group relative size-full gap-1 whitespace-nowrap rounded-none bg-transparent p-2 text-gray-1500 hover:bg-gray-1050 sm:gap-2 sm:p-3.5",
 		{
 			"bg-black font-semibold active text-white": isSelected,
 		},

src/components/organisms/configuration/configrationDrawer.tsx

@@ -5,7 +5,7 @@ import { useLocation, useParams } from "react-router-dom";
 import { defaultProjectSettingsWidth } from "@src/constants";
 import { EventListenerName } from "@src/enums";
 import { DrawerName } from "@src/enums/components";
-import { triggerEvent, useResize } from "@src/hooks";
+import { triggerEvent, useResize, useWindowDimensions } from "@src/hooks";
 import { useCacheStore, useSharedBetweenProjectsStore } from "@src/store";
 import { cn } from "@src/utilities";
 import { extractSettingsPath } from "@src/utilities/navigation";
@@ -19,6 +19,9 @@ export const ProjectConfigurationDrawer = () => {
 	const location = useLocation();
 	const setProjectSettingsWidth = useSharedBetweenProjectsStore((state) => state.setProjectSettingsWidth);
 	const projectSettingsWidth = useSharedBetweenProjectsStore((state) => state.projectSettingsWidth);
+	const { isMobile, isTablet } = useWindowDimensions();
+
+	const isMobileOrTablet = isMobile || isTablet;
 
 	const fetchTriggers = useCacheStore((state) => state.fetchTriggers);
 	const fetchVariables = useCacheStore((state) => state.fetchVariables);
@@ -63,29 +66,36 @@ export const ProjectConfigurationDrawer = () => {
 
 	const className = cn(
 		"flex h-full flex-col overflow-y-auto overflow-x-hidden bg-gray-1100",
-		"rounded-r-2xl px-8 py-3 sm:py-5 md:py-7"
+		"rounded-r-2xl px-4 py-3 sm:px-6 sm:py-5 md:px-8 md:py-7"
 	);
 
+	const mobileWidth = isMobileOrTablet ? 100 : drawerWidth;
+
 	return (
 		<Drawer
-			bgClickable
-			bgTransparent
+			bgClickable={!isMobileOrTablet}
+			bgTransparent={!isMobileOrTablet}
 			className={className}
 			divId="project-sidebar-config"
 			isForcedOpen={true}
 			isScreenHeight={false}
 			name={DrawerName.settings}
 			onCloseCallback={() => triggerEvent(EventListenerName.hideProjectConfigSidebar)}
-			width={drawerWidth}
-			wrapperClassName="p-0 relative absolute rounded-r-2xl"
+			width={mobileWidth}
+			wrapperClassName={cn("absolute p-0", {
+				"rounded-r-2xl": !isMobileOrTablet,
+				"rounded-none": isMobileOrTablet,
+			})}
 		>
 			<ConfigurationBySubPath settingsSubPath={settingsSubPath} />
-			<ResizeButton
-				className="absolute left-0 right-auto top-1/2 z-[125] w-2 -translate-y-1/2 cursor-ew-resize px-1 hover:bg-white"
-				direction="horizontal"
-				id="project-config-drawer-resize-button"
-				resizeId="project-config-drawer-resize"
-			/>
+			{!isMobileOrTablet ? (
+				<ResizeButton
+					className="absolute left-0 right-auto top-1/2 z-[125] w-2 -translate-y-1/2 cursor-ew-resize px-1 hover:bg-white"
+					direction="horizontal"
+					id="project-config-drawer-resize-button"
+					resizeId="project-config-drawer-resize"
+				/>
+			) : null}
 		</Drawer>
 	);
 };

src/components/organisms/sidebar/sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useMemo, useState } from "react";
+import React, { Suspense, useCallback, useEffect, useMemo, useState } from "react";
 
 import { AnimatePresence, motion } from "motion/react";
 import Avatar from "react-avatar";
@@ -7,6 +7,7 @@ import { LuUnplug } from "react-icons/lu";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import { descopeProjectId, featureFlags } from "@constants";
+import { useWindowDimensions } from "@src/hooks";
 import { cn } from "@src/utilities";
 
 import { useLoggerStore, useOrganizationStore, useToastStore } from "@store";
@@ -31,11 +32,18 @@ export const Sidebar = () => {
 	const { t } = useTranslation("sidebar");
 	const addToast = useToastStore((state) => state.addToast);
 	const navigate = useNavigate();
+	const { isMobile, isTablet } = useWindowDimensions();
+
+	const isMobileOrTablet = isMobile || isTablet;
 
 	useEffect(() => {
 		setIsOpen(false);
 	}, [location.pathname]);
 
+	const handleCloseSidebar = useCallback(() => {
+		setIsOpen(false);
+	}, []);
+
 	const loadOrganizations = async () => {
 		const { data, error } = await getEnrichedOrganizations();
 		if (error || !data) {
@@ -70,14 +78,45 @@ export const Sidebar = () => {
 	};
 
 	const rootClassName = useMemo(
-		() => cn("relative z-30 flex h-full items-start", { "z-50": isFeedbackOpen }),
-		[isFeedbackOpen]
+		() =>
+			cn("relative z-30 flex h-full items-start", {
+				"z-50": isFeedbackOpen,
+				"fixed left-0 top-0 z-50": isMobileOrTablet && isOpen,
+				hidden: isMobileOrTablet && !isOpen,
+			}),
+		[isFeedbackOpen, isMobileOrTablet, isOpen]
+	);
+
+	const sidebarContentClassName = useMemo(
+		() =>
+			cn("z-10 flex h-full flex-col justify-between bg-white p-2.5 pb-3 pt-6", {
+				"min-w-[60px]": !isMobileOrTablet,
+				"shadow-xl": isMobileOrTablet && isOpen,
+			}),
+		[isMobileOrTablet, isOpen]
 	);
 
 	return (
 		<Suspense fallback={<Loader isCenter size="lg" />}>
+			{isMobileOrTablet && !isOpen ? (
+				<Button
+					ariaLabel={t("openSidebar")}
+					className="fixed left-2 top-2 z-50 rounded-lg bg-white p-2 shadow-lg hover:bg-gray-100 lg:hidden"
+					onClick={() => setIsOpen(true)}
+					title={t("openSidebar")}
+				>
+					<MenuToggle className="flex w-6 items-center justify-center" isOpen={false} />
+				</Button>
+			) : null}
+			{isMobileOrTablet && isOpen ? (
+				<div
+					aria-hidden="true"
+					className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"
+					onClick={handleCloseSidebar}
+				/>
+			) : null}
 			<div className={rootClassName}>
-				<div className="z-10 flex h-full flex-col justify-between bg-white p-2.5 pb-3 pt-6">
+				<div className={sidebarContentClassName}>
 					<div>
 						<Button
 							className="ml-1 flex items-center justify-start gap-2.5"

src/components/organisms/splitFrame.tsx

@@ -5,21 +5,23 @@ import { useParams, useLocation } from "react-router-dom";
 import { TourId } from "@enums";
 import { SplitFrameProps } from "@interfaces/components";
 import { defaultSplitFrameSize, tourStepsHTMLIds } from "@src/constants";
+import { useWindowDimensions, useResize } from "@src/hooks";
 import { useSharedBetweenProjectsStore, useTourStore } from "@src/store";
 import { cn } from "@utilities";
 
-import { useResize } from "@hooks";
-
 import { Frame, ResizeButton } from "@components/atoms";
 import { EditorTabs } from "@components/organisms";
 
 export const SplitFrame = ({ children, rightFrameClass: rightBoxClass }: SplitFrameProps) => {
 	const resizeHorizontalId = useId();
-	const { projectSplitScreenWidth, setProjectSplitScreenWidth, isProjectFilesVisible } =
+	const { projectSplitScreenWidth, setProjectSplitScreenWidth, isProjectFilesVisible, setIsProjectFilesVisible } =
 		useSharedBetweenProjectsStore();
 	const { projectId } = useParams();
 	const { pathname } = useLocation();
 	const { activeTour } = useTourStore();
+	const { isMobile, isTablet } = useWindowDimensions();
+
+	const isMobileOrTablet = isMobile || isTablet;
 
 	const [leftSideWidth] = useResize({
 		direction: "horizontal",
@@ -51,16 +53,41 @@ export const SplitFrame = ({ children, rightFrameClass: rightBoxClass }: SplitFr
 	const rightFrameClass = cn(
 		`h-full overflow-hidden rounded-l-none pb-0`,
 		{
-			"rounded-2xl": !children || leftSideWidth === 0 || !shouldShowProjectFiles,
+			"rounded-2xl": !children || leftSideWidth === 0 || !shouldShowProjectFiles || isMobileOrTablet,
 		},
 		rightBoxClass
 	);
 
-	const leftFrameClass = cn(`h-full flex-auto rounded-r-none border-r border-gray-1050 bg-gray-1100`);
+	const leftFrameClass = cn(`h-full flex-auto rounded-r-none border-r border-gray-1050 bg-gray-1100`, {
+		"fixed inset-0 z-40 rounded-none border-0": isMobileOrTablet,
+	});
+
+	const handleCloseMobileFiles = () => {
+		if (projectId) {
+			setIsProjectFilesVisible(projectId, false);
+		}
+	};
+
+	const showFilesPanel = leftSideWidth > 0 && shouldShowProjectFiles;
+	const showDesktopFiles = showFilesPanel && !isMobileOrTablet;
+	const showMobileFiles = showFilesPanel && isMobileOrTablet;
 
 	return (
 		<div className="flex size-full overflow-hidden">
-			{leftSideWidth > 0 && shouldShowProjectFiles ? (
+			{showMobileFiles ? (
+				<>
+					<div
+						aria-hidden="true"
+						className="fixed inset-0 z-30 bg-black/50 backdrop-blur-sm"
+						onClick={handleCloseMobileFiles}
+					/>
+					<div className="fixed inset-0 z-40 p-4">
+						{children ? <Frame className={leftFrameClass}>{children}</Frame> : null}
+					</div>
+				</>
+			) : null}
+
+			{showDesktopFiles ? (
 				<>
 					<div style={{ width: `${leftSideWidth}%`, minWidth: 0 }}>
 						{children ? <Frame className={leftFrameClass}>{children}</Frame> : null}

src/components/organisms/topbar/project/buttons.tsx

@@ -285,19 +285,19 @@ export const ProjectTopbarButtons = () => {
 	const isDeployAndBuildDisabled = Object.values(actionInProcess).some((value) => value);
 
 	return (
-		<div className="flex items-center gap-3 pr-2 maxScreenWidth-1600:gap-1.5">
+		<div className="flex items-center gap-1 pr-1 sm:gap-1.5 sm:pr-2 lg:gap-3 maxScreenWidth-1600:gap-1.5">
 			<PopoverWrapper interactionType="hover" placement="top">
 				<PopoverTrigger>
 					<Button
 						ariaLabel={t("topbar.buttons.ariaBuildProject")}
-						className="group h-8 whitespace-nowrap px-3.5 text-white maxScreenWidth-1600:px-2"
+						className="group h-7 whitespace-nowrap px-2 text-white sm:h-8 sm:px-2.5 lg:px-3.5 maxScreenWidth-1600:px-2"
 						disabled={isDeployAndBuildDisabled}
 						onClick={debouncedBuild}
 						title={isValid ? t("topbar.buttons.build") : projectErrors}
 						variant="outline"
 					>
 						{actionInProcess[ProjectActions.build] ? (
-							<Spinner className="size-4" />
+							<Spinner className="size-3 sm:size-4" />
 						) : (
 							<IconSvg
 								className="stroke-white transition group-hover:stroke-green-200 group-active:stroke-green-800"
@@ -306,7 +306,7 @@ export const ProjectTopbarButtons = () => {
 							/>
 						)}
 
-						<span className="maxScreenWidth-1600:hidden">{t("topbar.buttons.build")}</span>
+						<span className="hidden lg:inline maxScreenWidth-1600:hidden">{t("topbar.buttons.build")}</span>
 					</Button>
 				</PopoverTrigger>
 				<PopoverContent className="border border-gray-700 bg-gray-900 p-1 text-xs text-white">
@@ -318,15 +318,15 @@ export const ProjectTopbarButtons = () => {
 				<PopoverTrigger>
 					<Button
 						ariaLabel={t("topbar.buttons.ariaDeployProject")}
-						className="group h-8 items-center whitespace-nowrap px-3.5 text-white maxScreenWidth-1600:px-2"
+						className="group h-7 items-center whitespace-nowrap px-2 text-white sm:h-8 sm:px-2.5 lg:px-3.5 maxScreenWidth-1600:px-2"
 						disabled={isDeployAndBuildDisabled}
 						id={tourStepsHTMLIds.deployButton}
 						onClick={debouncedDeploy}
 						title={isValid ? t("topbar.buttons.deploy") : projectErrors}
 						variant="outline"
 					>
 						{actionInProcess[ProjectActions.deploy] ? (
-							<Spinner className="size-4" />
+							<Spinner className="size-3 sm:size-4" />
 						) : (
 							<IconSvg
 								className="fill-white transition group-hover:fill-green-200 group-active:fill-green-800"
@@ -335,7 +335,9 @@ export const ProjectTopbarButtons = () => {
 							/>
 						)}
 
-						<span className="maxScreenWidth-1600:hidden">{t("topbar.buttons.deploy")}</span>
+						<span className="hidden lg:inline maxScreenWidth-1600:hidden">
+							{t("topbar.buttons.deploy")}
+						</span>
 					</Button>
 				</PopoverTrigger>
 				<PopoverContent className="border border-gray-700 bg-gray-900 p-1 text-xs text-white">
@@ -349,7 +351,7 @@ export const ProjectTopbarButtons = () => {
 				<PopoverTrigger>
 					<Button
 						ariaLabel={t("topbar.buttons.projectActionsMenu")}
-						className="group h-8 whitespace-nowrap px-4 text-white maxScreenWidth-1600:px-2"
+						className="group h-7 whitespace-nowrap px-2 text-white sm:h-8 sm:px-2.5 lg:px-4 maxScreenWidth-1600:px-2"
 						title={t("topbar.buttons.projectActionsMenu")}
 						variant="outline"
 					>
@@ -359,7 +361,9 @@ export const ProjectTopbarButtons = () => {
 							src={MoreIcon}
 						/>
 
-						<span className="maxScreenWidth-1600:hidden">{t("more", { ns: "buttons" })}</span>
+						<span className="hidden lg:inline maxScreenWidth-1600:hidden">
+							{t("more", { ns: "buttons" })}
+						</span>
 					</Button>
 				</PopoverTrigger>
 				<PopoverContent className="flex flex-col gap-2 border border-gray-700 bg-gray-900 p-2">

src/components/organisms/topbar/project/navigation.tsx

@@ -84,7 +84,7 @@ export const ProjectTopbarNavigation = () => {
 	}
 
 	return (
-		<div className="ml-50 mr-auto flex items-stretch divide-x divide-gray-750 border-x border-gray-750">
+		<div className="ml-2 mr-auto flex items-stretch divide-x divide-gray-750 overflow-x-auto border-x border-gray-750 [-ms-overflow-style:none] [scrollbar-width:none] sm:ml-4 md:ml-8 lg:ml-50 [&::-webkit-scrollbar]:hidden">
 			<NavigationButton
 				ariaLabel="Explorer"
 				icon={AssetsIcon}

src/components/organisms/topbar/project/projectName.tsx

@@ -23,7 +23,8 @@ export const ProjectTopbarName = () => {
 	const { t } = useTranslation(["projects", "buttons"]);
 	const { t: tErrors } = useTranslation("errors");
 	const inputClass = cn(
-		"h-auto min-w-3 max-w-240 rounded-lg p-0 text-xl font-bold leading-tight outline outline-0 transition maxScreenWidth-1600:max-w-160",
+		"h-auto min-w-3 rounded-lg p-0 font-bold leading-tight outline outline-0 transition",
+		"max-w-[120px] text-base sm:max-w-160 sm:text-lg md:max-w-[200px] md:text-xl lg:max-w-240 maxScreenWidth-1600:max-w-160",
 		{
 			"outline-2 outline-error": !isNameValid,
 		}
@@ -93,7 +94,7 @@ export const ProjectTopbarName = () => {
 	};
 
 	return (
-		<div className="flex items-center gap-3 py-2 font-fira-code">
+		<div className="flex items-center gap-1.5 py-2 font-fira-code sm:gap-3">
 			{isEditing ? (
 				<Input
 					// eslint-disable-next-line jsx-a11y/no-autofocus
@@ -119,7 +120,7 @@ export const ProjectTopbarName = () => {
 				>
 					<EditIcon className="absolute -left-4 size-4 bg-gray-1250 fill-white p-0.5 opacity-0 transition group-hover:opacity-100" />
 					<span
-						className="max-w-240 truncate text-xl font-bold maxScreenWidth-1600:max-w-160"
+						className="max-w-[120px] truncate text-base font-bold sm:max-w-160 sm:text-lg md:max-w-[200px] md:text-xl lg:max-w-240 maxScreenWidth-1600:max-w-160"
 						title={project?.name}
 					>
 						{project?.name}
@@ -131,7 +132,7 @@ export const ProjectTopbarName = () => {
 				{!isNameValid ? t("nameRequired", { ns: "errors" }) : null}
 			</ErrorMessage>
 
-			<span className="flex items-center font-fira-code font-semibold text-gray-500">
+			<span className="hidden items-center font-fira-code font-semibold text-gray-500 sm:flex">
 				<div className="mr-2 pr-0.5">{t("topbar.id")}</div>
 				<IdCopyButton hideId id={projectId!} />
 			</span>

src/components/organisms/topbar/project/projectSettings.tsx

@@ -26,7 +26,7 @@ export const ProjectSettingsTopbar = () => {
 	}, [projectId]);
 
 	return (
-		<div className="flex justify-between rounded-b-xl bg-gray-1250 pl-7">
+		<div className="flex flex-wrap items-center justify-between gap-1 rounded-b-xl bg-gray-1250 pl-4 md:pl-7 lg:flex-nowrap lg:gap-0 max-md:pl-12">
 			<ProjectTopbarName />
 			<ProjectTopbarNavigation />
 			<ProjectTopbarButtons />

src/components/organisms/welcome.tsx

@@ -69,7 +69,7 @@ export const WelcomePage = () => {
 	};
 
 	return (
-		<div className="size-full overflow-hidden rounded-none md:mt-2 md:rounded-2xl">
+		<div className="size-full overflow-y-auto rounded-none md:mt-2 md:overflow-hidden md:rounded-2xl">
 			<LoadingOverlay isLoading={isLoading} />
 
 			<div className="flex min-h-screen flex-col overflow-y-auto bg-gradient-to-b from-gray-1250 to-gray-1100">

src/components/pages/project.tsx

@@ -63,7 +63,7 @@ export const Project = () => {
 				{!showFiles ? (
 					<Button
 						ariaLabel="Show Project Files"
-						className="absolute left-4 top-7 z-10 rounded-lg bg-gray-900 p-2 hover:bg-gray-800"
+						className="absolute left-2 top-14 z-20 rounded-lg bg-gray-900 p-2 hover:bg-gray-800 lg:left-4 lg:top-7"
 						data-testid="show-project-files-button"
 						id="show-project-files-button"
 						onClick={handleShowProjectFiles}

src/locales/en/tabs/translation.json

@@ -281,4 +281,4 @@
 		"variableRemovedSuccessfully": "{{variableName}} removed successfully",
 		"variableRemovedSuccessfullyExtended": "{{variableName}} removed successfully, variable ID: {{variableId}}"
 	}
-}
+}