@greatapps/common 1.1.253 → 1.1.254
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/layouts/AppMobileNavBar.mjs +11 -4
- package/dist/components/layouts/AppMobileNavBar.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs +17 -11
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/layouts/AppMobileNavBar.tsx +13 -6
- package/src/components/navigation/subcomponents/ProjectSelector.tsx +5 -3
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import Image from "next/image";
|
|
4
|
+
import { IconMenu2, IconX } from "@tabler/icons-react";
|
|
4
5
|
import { ProfilePopover } from "./ProfilePopover";
|
|
5
|
-
import {
|
|
6
|
+
import { useMobileNavbarSheet } from "../../store/useMobileNavbarSheet";
|
|
6
7
|
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
|
|
7
8
|
function AppMobileNavBar({
|
|
8
9
|
activeApp,
|
|
9
10
|
onLogoClick,
|
|
10
11
|
onAppIconClick,
|
|
11
12
|
extraLeftSlot,
|
|
12
|
-
rightActionSlot,
|
|
13
13
|
menuItems = []
|
|
14
14
|
}) {
|
|
15
|
-
const {
|
|
15
|
+
const { isOpen, toggle } = useMobileNavbarSheet();
|
|
16
16
|
const isGpagesActive = activeApp === "gpages";
|
|
17
17
|
const isGappsActive = activeApp === "gapps";
|
|
18
18
|
return /* @__PURE__ */ jsxs("div", { className: "fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200", children: [
|
|
@@ -88,7 +88,14 @@ function AppMobileNavBar({
|
|
|
88
88
|
menuItems
|
|
89
89
|
}
|
|
90
90
|
),
|
|
91
|
-
|
|
91
|
+
/* @__PURE__ */ jsx(
|
|
92
|
+
"button",
|
|
93
|
+
{
|
|
94
|
+
className: "size-10 flex items-center justify-center border border-zinc-200 rounded-lg bg-white cursor-pointer",
|
|
95
|
+
onClick: toggle,
|
|
96
|
+
children: isOpen ? /* @__PURE__ */ jsx(IconX, { size: 18, className: "text-zinc-950" }) : /* @__PURE__ */ jsx(IconMenu2, { size: 18, className: "text-zinc-950" })
|
|
97
|
+
}
|
|
98
|
+
)
|
|
92
99
|
] })
|
|
93
100
|
] });
|
|
94
101
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/layouts/AppMobileNavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport Image from \"next/image\";\nimport { ProfilePopover } from \"./ProfilePopover\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/layouts/AppMobileNavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport Image from \"next/image\";\nimport { IconMenu2, IconX } from \"@tabler/icons-react\";\nimport { ProfilePopover } from \"./ProfilePopover\";\nimport { useMobileNavbarSheet } from \"../../store/useMobileNavbarSheet\";\nimport type { ProfileMenuItem } from \"./ProfilePopover\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\n\nexport interface AppMobileNavBarProps {\n /** Which app is currently active — controls which icon gets the indicator */\n activeApp?: \"gapps\" | \"gpages\";\n /** Called when the GreatApps logo is clicked */\n onLogoClick?: () => void;\n /** Called when the app icon (e.g. GreatPages) is clicked */\n onAppIconClick?: () => void;\n /** Extra slot rendered after the app icon (e.g. project selector) */\n extraLeftSlot?: ReactNode;\n menuItems?: ProfileMenuItem[];\n}\n\nexport function AppMobileNavBar({\n activeApp,\n onLogoClick,\n onAppIconClick,\n extraLeftSlot,\n menuItems = [],\n}: AppMobileNavBarProps) {\n const { isOpen, toggle } = useMobileNavbarSheet();\n\n const isGpagesActive = activeApp === \"gpages\";\n const isGappsActive = activeApp === \"gapps\";\n\n return (\n <div className=\"fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200\">\n <div className=\"flex items-center gap-1.5\">\n <Tooltip>\n <TooltipTrigger asChild>\n <div\n className={`relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? \"cursor-pointer hover:bg-gray-100\" : \"\"}`}\n onClick={onLogoClick}\n >\n <Image\n src=\"/icons/great-icon.svg\"\n alt=\"Great\"\n width={28}\n height={28}\n />\n {isGappsActive && (\n <div className=\"absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl\" />\n )}\n </div>\n </TooltipTrigger>\n <TooltipContent side=\"bottom\">Great</TooltipContent>\n </Tooltip>\n <div className=\"relative\">\n <Tooltip>\n <TooltipTrigger asChild>\n {isGpagesActive ? (\n <div\n className=\"size-10 rounded-lg cursor-pointer flex items-center justify-center bg-cyan-100 border-2 border-white ring-2 ring-cyan-300\"\n onClick={onAppIconClick}\n >\n <Image\n src=\"/icons/icon-navbar.svg\"\n alt=\"GreatPages\"\n width={24}\n height={24}\n />\n </div>\n ) : (\n <div\n className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 bg-gray-100 ${onAppIconClick ? \"cursor-pointer hover:opacity-80\" : \"\"}`}\n onClick={onAppIconClick}\n >\n <Image\n src=\"/icons/icon-navbar.svg\"\n alt=\"GreatPages\"\n width={24}\n height={24}\n />\n </div>\n )}\n </TooltipTrigger>\n <TooltipContent side=\"bottom\">GreatPages</TooltipContent>\n </Tooltip>\n {isGpagesActive && (\n <div className=\"absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-cyan-300 rounded-t-xl\" />\n )}\n </div>\n {extraLeftSlot}\n </div>\n <div className=\"flex items-center gap-1.5\">\n <ProfilePopover\n side=\"bottom\"\n align=\"end\"\n contentClassName=\"\"\n menuItems={menuItems}\n />\n <button\n className=\"size-10 flex items-center justify-center border border-zinc-200 rounded-lg bg-white cursor-pointer\"\n onClick={toggle}\n >\n {isOpen ? (\n <IconX size={18} className=\"text-zinc-950\" />\n ) : (\n <IconMenu2 size={18} className=\"text-zinc-950\" />\n )}\n </button>\n </div>\n </div>\n );\n}\n"],"mappings":";AAuCY,SAIE,KAJF;AApCZ,OAAO,WAAW;AAClB,SAAS,WAAW,aAAa;AACjC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AAErC,SAAS,SAAS,gBAAgB,sBAAsB;AAcjD,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,CAAC;AACf,GAAyB;AACvB,QAAM,EAAE,QAAQ,OAAO,IAAI,qBAAqB;AAEhD,QAAM,iBAAiB,cAAc;AACrC,QAAM,gBAAgB,cAAc;AAEpC,SACE,qBAAC,SAAI,WAAU,qHACb;AAAA,yBAAC,SAAI,WAAU,6BACb;AAAA,2BAAC,WACC;AAAA,4BAAC,kBAAe,SAAO,MACrB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,kFAAkF,cAAc,qCAAqC,EAAE;AAAA,YAClJ,SAAS;AAAA,YAET;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAI;AAAA,kBACJ,KAAI;AAAA,kBACJ,OAAO;AAAA,kBACP,QAAQ;AAAA;AAAA,cACV;AAAA,cACC,iBACC,oBAAC,SAAI,WAAU,0FAAyF;AAAA;AAAA;AAAA,QAE5G,GACF;AAAA,QACA,oBAAC,kBAAe,MAAK,UAAS,mBAAK;AAAA,SACrC;AAAA,MACA,qBAAC,SAAI,WAAU,YACb;AAAA,6BAAC,WACC;AAAA,8BAAC,kBAAe,SAAO,MACpB,2BACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS;AAAA,cAET;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAI;AAAA,kBACJ,KAAI;AAAA,kBACJ,OAAO;AAAA,kBACP,QAAQ;AAAA;AAAA,cACV;AAAA;AAAA,UACF,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,kGAAkG,iBAAiB,oCAAoC,EAAE;AAAA,cACpK,SAAS;AAAA,cAET;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAI;AAAA,kBACJ,KAAI;AAAA,kBACJ,OAAO;AAAA,kBACP,QAAQ;AAAA;AAAA,cACV;AAAA;AAAA,UACF,GAEJ;AAAA,UACA,oBAAC,kBAAe,MAAK,UAAS,wBAAU;AAAA,WAC1C;AAAA,QACC,kBACC,oBAAC,SAAI,WAAU,0FAAyF;AAAA,SAE5G;AAAA,MACC;AAAA,OACH;AAAA,IACA,qBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,kBAAiB;AAAA,UACjB;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS;AAAA,UAER,mBACC,oBAAC,SAAM,MAAM,IAAI,WAAU,iBAAgB,IAE3C,oBAAC,aAAU,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,MAEnD;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -65,17 +65,23 @@ function ProjectSelector({
|
|
|
65
65
|
}
|
|
66
66
|
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5", children: [
|
|
67
67
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
68
|
-
/* @__PURE__ */ jsxs(
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
68
|
+
/* @__PURE__ */ jsxs(
|
|
69
|
+
"div",
|
|
70
|
+
{
|
|
71
|
+
className: "flex items-center gap-1 cursor-pointer",
|
|
72
|
+
onClick: () => setActiveSection(activeSection === "projects" ? null : "projects"),
|
|
73
|
+
children: [
|
|
74
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-600", children: selectedProject?.title }),
|
|
75
|
+
/* @__PURE__ */ jsx(
|
|
76
|
+
IconChevronDown,
|
|
77
|
+
{
|
|
78
|
+
size: 20,
|
|
79
|
+
className: `transition-transform duration-200 ${activeSection === "projects" ? "rotate-180 text-gray-950" : "text-gray-400"}`
|
|
80
|
+
}
|
|
81
|
+
)
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
),
|
|
79
85
|
/* @__PURE__ */ jsx(UsersSelectorPopover, { projectId: selectedProject?.id })
|
|
80
86
|
] }),
|
|
81
87
|
activeSection === "projects" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400", children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/navigation/subcomponents/ProjectSelector.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useRef, useEffect, RefObject } from 'react';\nimport { ADDON_IDS } from '../../../modules/subscriptions/constants/addons.constants';\nimport { useHasPlanAddon } from '../../../modules/plans/hooks/use-has-plan-addon.hook';\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\nimport { useAppNavigationContext } from '../AppNavigationContext';\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\nimport { UsersSelectorPopover } from '../../layouts/UsersSelectorPopover';\nimport { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';\nimport { IconChevronDown, IconPlus, IconSettings } from '@tabler/icons-react';\nimport type { NavigationProject } from '../types';\n\nexport interface ProjectSelectorProps {\n projects: NavigationProject[];\n selectedProject: NavigationProject | null;\n isLoading?: boolean;\n onSelectProject: (project: NavigationProject) => void;\n onAddProject: () => void;\n onManageProjects: () => void;\n}\n\nfunction ProjectItemSkeleton() {\n return (\n <div className=\"flex items-center gap-2 p-2\">\n <div className=\"skeleton size-8 rounded-lg shrink-0\" />\n <div className=\"skeleton h-3.5 w-32 rounded\" />\n </div>\n );\n}\n\nexport function ProjectSelector({\n projects,\n selectedProject,\n isLoading,\n onSelectProject,\n onAddProject,\n onManageProjects,\n}: ProjectSelectorProps) {\n const { breakpoint } = useAppNavigationContext();\n const { hasAddon: canAddProject } = useHasPlanAddon(ADDON_IDS.PROJECTS);\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n const [activeSection, setActiveSection] = useState<'projects' | null>(null);\n const titleRef = useRef<HTMLDivElement>(null);\n const { openProjectList, clearProjectList } = useMobileNavbarSheet();\n\n useEffect(() => {\n if (openProjectList && breakpoint === 'mobile') {\n setActiveSection('projects');\n clearProjectList();\n }\n }, [openProjectList, breakpoint, clearProjectList]);\n\n // Desktop and md: title + popover + users selector (same visual as current gpages sidebars)\n if (breakpoint === 'desktop' || breakpoint === 'md') {\n return (\n <div className=\"flex items-center justify-between\">\n <ProjectSelectorPopover\n open={isPopoverOpen}\n setOpen={setIsPopoverOpen}\n titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}\n projects={projects}\n selectedProject={selectedProject}\n onSelectProject={onSelectProject}\n onAddProject={onAddProject}\n onManageProjects={onManageProjects}\n >\n <div className=\"flex items-center gap-2 truncate select-none cursor-pointer\" ref={titleRef}>\n {isLoading ? (\n <div className=\"skeleton h-4 w-32 rounded\" />\n ) : (\n <span className=\"paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block\">\n {selectedProject?.title}\n </span>\n )}\n <IconChevronDown\n size={20}\n className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\n />\n </div>\n </ProjectSelectorPopover>\n <div className=\"flex items-center gap-2\">\n <UsersSelectorPopover projectId={selectedProject?.id} />\n </div>\n </div>\n );\n }\n\n // Mobile: inline collapsible accordion\n return (\n <div className=\"flex flex-col gap-2.5\">\n <div className=\"flex items-center justify-between\">\n <div
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/navigation/subcomponents/ProjectSelector.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useRef, useEffect, RefObject } from 'react';\nimport { ADDON_IDS } from '../../../modules/subscriptions/constants/addons.constants';\nimport { useHasPlanAddon } from '../../../modules/plans/hooks/use-has-plan-addon.hook';\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\nimport { useAppNavigationContext } from '../AppNavigationContext';\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\nimport { UsersSelectorPopover } from '../../layouts/UsersSelectorPopover';\nimport { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';\nimport { IconChevronDown, IconPlus, IconSettings } from '@tabler/icons-react';\nimport type { NavigationProject } from '../types';\n\nexport interface ProjectSelectorProps {\n projects: NavigationProject[];\n selectedProject: NavigationProject | null;\n isLoading?: boolean;\n onSelectProject: (project: NavigationProject) => void;\n onAddProject: () => void;\n onManageProjects: () => void;\n}\n\nfunction ProjectItemSkeleton() {\n return (\n <div className=\"flex items-center gap-2 p-2\">\n <div className=\"skeleton size-8 rounded-lg shrink-0\" />\n <div className=\"skeleton h-3.5 w-32 rounded\" />\n </div>\n );\n}\n\nexport function ProjectSelector({\n projects,\n selectedProject,\n isLoading,\n onSelectProject,\n onAddProject,\n onManageProjects,\n}: ProjectSelectorProps) {\n const { breakpoint } = useAppNavigationContext();\n const { hasAddon: canAddProject } = useHasPlanAddon(ADDON_IDS.PROJECTS);\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n const [activeSection, setActiveSection] = useState<'projects' | null>(null);\n const titleRef = useRef<HTMLDivElement>(null);\n const { openProjectList, clearProjectList } = useMobileNavbarSheet();\n\n useEffect(() => {\n if (openProjectList && breakpoint === 'mobile') {\n setActiveSection('projects');\n clearProjectList();\n }\n }, [openProjectList, breakpoint, clearProjectList]);\n\n // Desktop and md: title + popover + users selector (same visual as current gpages sidebars)\n if (breakpoint === 'desktop' || breakpoint === 'md') {\n return (\n <div className=\"flex items-center justify-between\">\n <ProjectSelectorPopover\n open={isPopoverOpen}\n setOpen={setIsPopoverOpen}\n titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}\n projects={projects}\n selectedProject={selectedProject}\n onSelectProject={onSelectProject}\n onAddProject={onAddProject}\n onManageProjects={onManageProjects}\n >\n <div className=\"flex items-center gap-2 truncate select-none cursor-pointer\" ref={titleRef}>\n {isLoading ? (\n <div className=\"skeleton h-4 w-32 rounded\" />\n ) : (\n <span className=\"paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block\">\n {selectedProject?.title}\n </span>\n )}\n <IconChevronDown\n size={20}\n className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\n />\n </div>\n </ProjectSelectorPopover>\n <div className=\"flex items-center gap-2\">\n <UsersSelectorPopover projectId={selectedProject?.id} />\n </div>\n </div>\n );\n }\n\n // Mobile: inline collapsible accordion\n return (\n <div className=\"flex flex-col gap-2.5\">\n <div className=\"flex items-center justify-between\">\n <div\n className=\"flex items-center gap-1 cursor-pointer\"\n onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}\n >\n <span className=\"paragraph-medium-semibold text-gray-600\">{selectedProject?.title}</span>\n <IconChevronDown\n size={20}\n className={`transition-transform duration-200 ${\n activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'\n }`}\n />\n </div>\n <UsersSelectorPopover projectId={selectedProject?.id} />\n </div>\n {activeSection === 'projects' && (\n <div className=\"flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400\">\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-small-semibold\">Projetos</span>\n <div className=\"flex items-center gap-1.5\">\n {canAddProject && (\n <Button variant=\"secondary\" className=\"h-8! paragraph-small-semibold text-gray-950\" onClick={onAddProject}>\n <IconPlus size={16} />\n Adicionar\n </Button>\n )}\n <Button variant=\"secondary\" className=\"p-0 size-8\" onClick={onManageProjects}>\n <IconSettings size={18} />\n </Button>\n </div>\n </div>\n <Command className=\"gap-2\">\n <CommandInput placeholder=\"Busque aqui\" />\n <CommandList className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\">\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n {isLoading ? (\n <>\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n </>\n ) : (\n projects.map((project) => (\n <CommandItem\n key={project.id}\n value={`${project.title}-${project.id}`}\n keywords={[project.title]}\n className={selectedProject?.id === project.id ? 'bg-gray-50' : ''}\n onSelect={() => { onSelectProject(project); setActiveSection(null); }}\n >\n <UserAvatar\n photo={project.photo}\n name={project.title}\n size={32}\n />\n {project.title}\n </CommandItem>\n ))\n )}\n </CommandList>\n </Command>\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
import { ReactNode } from "react";
|
|
4
4
|
import Image from "next/image";
|
|
5
|
+
import { IconMenu2, IconX } from "@tabler/icons-react";
|
|
5
6
|
import { ProfilePopover } from "./ProfilePopover";
|
|
6
|
-
import {
|
|
7
|
+
import { useMobileNavbarSheet } from "../../store/useMobileNavbarSheet";
|
|
7
8
|
import type { ProfileMenuItem } from "./ProfilePopover";
|
|
8
9
|
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
|
|
9
10
|
|
|
@@ -16,8 +17,6 @@ export interface AppMobileNavBarProps {
|
|
|
16
17
|
onAppIconClick?: () => void;
|
|
17
18
|
/** Extra slot rendered after the app icon (e.g. project selector) */
|
|
18
19
|
extraLeftSlot?: ReactNode;
|
|
19
|
-
/** Required: the right-side action element (toggle button, sheet button, etc.) */
|
|
20
|
-
rightActionSlot: ReactNode;
|
|
21
20
|
menuItems?: ProfileMenuItem[];
|
|
22
21
|
}
|
|
23
22
|
|
|
@@ -26,10 +25,9 @@ export function AppMobileNavBar({
|
|
|
26
25
|
onLogoClick,
|
|
27
26
|
onAppIconClick,
|
|
28
27
|
extraLeftSlot,
|
|
29
|
-
rightActionSlot,
|
|
30
28
|
menuItems = [],
|
|
31
29
|
}: AppMobileNavBarProps) {
|
|
32
|
-
const {
|
|
30
|
+
const { isOpen, toggle } = useMobileNavbarSheet();
|
|
33
31
|
|
|
34
32
|
const isGpagesActive = activeApp === "gpages";
|
|
35
33
|
const isGappsActive = activeApp === "gapps";
|
|
@@ -100,7 +98,16 @@ export function AppMobileNavBar({
|
|
|
100
98
|
contentClassName=""
|
|
101
99
|
menuItems={menuItems}
|
|
102
100
|
/>
|
|
103
|
-
|
|
101
|
+
<button
|
|
102
|
+
className="size-10 flex items-center justify-center border border-zinc-200 rounded-lg bg-white cursor-pointer"
|
|
103
|
+
onClick={toggle}
|
|
104
|
+
>
|
|
105
|
+
{isOpen ? (
|
|
106
|
+
<IconX size={18} className="text-zinc-950" />
|
|
107
|
+
) : (
|
|
108
|
+
<IconMenu2 size={18} className="text-zinc-950" />
|
|
109
|
+
)}
|
|
110
|
+
</button>
|
|
104
111
|
</div>
|
|
105
112
|
</div>
|
|
106
113
|
);
|
|
@@ -90,12 +90,14 @@ export function ProjectSelector({
|
|
|
90
90
|
return (
|
|
91
91
|
<div className="flex flex-col gap-2.5">
|
|
92
92
|
<div className="flex items-center justify-between">
|
|
93
|
-
<div
|
|
93
|
+
<div
|
|
94
|
+
className="flex items-center gap-1 cursor-pointer"
|
|
95
|
+
onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}
|
|
96
|
+
>
|
|
94
97
|
<span className="paragraph-medium-semibold text-gray-600">{selectedProject?.title}</span>
|
|
95
98
|
<IconChevronDown
|
|
96
99
|
size={20}
|
|
97
|
-
|
|
98
|
-
className={`transition-transform duration-200 cursor-pointer ${
|
|
100
|
+
className={`transition-transform duration-200 ${
|
|
99
101
|
activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'
|
|
100
102
|
}`}
|
|
101
103
|
/>
|