@greatapps/common 1.1.255 → 1.1.256
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 +3 -2
- package/dist/components/layouts/AppMobileNavBar.mjs.map +1 -1
- package/dist/components/navigation/AppNavigation.mjs +2 -1
- package/dist/components/navigation/AppNavigation.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/layouts/AppMobileNavBar.tsx +14 -10
- package/src/components/navigation/AppNavigation.tsx +2 -3
|
@@ -10,7 +10,8 @@ function AppMobileNavBar({
|
|
|
10
10
|
onLogoClick,
|
|
11
11
|
onAppIconClick,
|
|
12
12
|
extraLeftSlot,
|
|
13
|
-
menuItems = []
|
|
13
|
+
menuItems = [],
|
|
14
|
+
showMenuToggle = true
|
|
14
15
|
}) {
|
|
15
16
|
const { isOpen, toggle } = useMobileNavbarSheet();
|
|
16
17
|
const isGpagesActive = activeApp === "gpages";
|
|
@@ -88,7 +89,7 @@ function AppMobileNavBar({
|
|
|
88
89
|
menuItems
|
|
89
90
|
}
|
|
90
91
|
),
|
|
91
|
-
/* @__PURE__ */ jsx(
|
|
92
|
+
showMenuToggle && /* @__PURE__ */ jsx(
|
|
92
93
|
"button",
|
|
93
94
|
{
|
|
94
95
|
className: "size-10 flex items-center justify-center border border-zinc-200 rounded-lg bg-white cursor-pointer",
|
|
@@ -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 { 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
|
|
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 showMenuToggle?: boolean;\n}\n\nexport function AppMobileNavBar({\n activeApp,\n onLogoClick,\n onAppIconClick,\n extraLeftSlot,\n menuItems = [],\n showMenuToggle = true,\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 {showMenuToggle && (\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 )}\n </div>\n </div>\n );\n}\n"],"mappings":";AAyCY,SAIE,KAJF;AAtCZ,OAAO,WAAW;AAClB,SAAS,WAAW,aAAa;AACjC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AAErC,SAAS,SAAS,gBAAgB,sBAAsB;AAejD,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,CAAC;AAAA,EACb,iBAAiB;AACnB,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,MACC,kBACC;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,OAEJ;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -15,7 +15,8 @@ function AppNavigationRoot({ children, mobileVariant = "sheet", mobileTabsOffset
|
|
|
15
15
|
return /* @__PURE__ */ jsxs(NavItemsContext.Provider, { value: { navItems, setNavItems, mobileVariant }, children: [
|
|
16
16
|
/* @__PURE__ */ jsx(DesktopShell, { children }),
|
|
17
17
|
/* @__PURE__ */ jsx(MdShell, { children }),
|
|
18
|
-
|
|
18
|
+
/* @__PURE__ */ jsx(MobileShell, { children }),
|
|
19
|
+
mobileVariant === "tabs" && /* @__PURE__ */ jsx(TabsMobileShell, { topOffset: mobileTabsOffset, children })
|
|
19
20
|
] });
|
|
20
21
|
}
|
|
21
22
|
const AppNavigation = Object.assign(AppNavigationRoot, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/navigation/AppNavigation.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ReactNode, useState } from 'react';\r\nimport { DesktopShell } from './shells/DesktopShell';\r\nimport { MdShell } from './shells/MdShell';\r\nimport { MobileShell } from './shells/MobileShell';\r\nimport { TabsMobileShell } from './shells/TabsMobileShell';\r\nimport { NavItems } from './subcomponents/NavItems';\r\nimport { ProjectSelector } from './subcomponents/ProjectSelector';\r\nimport { PlanCard } from './subcomponents/PlanCard';\r\nimport { CreditsCard } from './subcomponents/CreditsCard';\r\nimport { NavItemsContext } from './NavItemsContext';\r\nimport type { NavItemConfig } from './subcomponents/NavItems';\r\n\r\nexport type { NavItemConfig } from './subcomponents/NavItems';\r\nexport type { ProjectSelectorProps } from './subcomponents/ProjectSelector';\r\nexport type { PlanCardProps } from './subcomponents/PlanCard';\r\nexport type { CreditsCardProps } from './subcomponents/CreditsCard';\r\n\r\ninterface AppNavigationProps {\r\n children: ReactNode;\r\n mobileVariant?: 'sheet' | 'tabs';\r\n mobileTabsOffset?: string;\r\n onCancelledReactivate?: () => void;\r\n}\r\n\r\nfunction AppNavigationRoot({ children, mobileVariant = 'sheet', mobileTabsOffset, onCancelledReactivate }: AppNavigationProps) {\r\n const [navItems, setNavItems] = useState<NavItemConfig[]>([]);\r\n\r\n return (\r\n <NavItemsContext.Provider value={{ navItems, setNavItems, mobileVariant }}>\r\n <DesktopShell>{children}</DesktopShell>\r\n <MdShell>{children}</MdShell>\r\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/navigation/AppNavigation.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ReactNode, useState } from 'react';\r\nimport { DesktopShell } from './shells/DesktopShell';\r\nimport { MdShell } from './shells/MdShell';\r\nimport { MobileShell } from './shells/MobileShell';\r\nimport { TabsMobileShell } from './shells/TabsMobileShell';\r\nimport { NavItems } from './subcomponents/NavItems';\r\nimport { ProjectSelector } from './subcomponents/ProjectSelector';\r\nimport { PlanCard } from './subcomponents/PlanCard';\r\nimport { CreditsCard } from './subcomponents/CreditsCard';\r\nimport { NavItemsContext } from './NavItemsContext';\r\nimport type { NavItemConfig } from './subcomponents/NavItems';\r\n\r\nexport type { NavItemConfig } from './subcomponents/NavItems';\r\nexport type { ProjectSelectorProps } from './subcomponents/ProjectSelector';\r\nexport type { PlanCardProps } from './subcomponents/PlanCard';\r\nexport type { CreditsCardProps } from './subcomponents/CreditsCard';\r\n\r\ninterface AppNavigationProps {\r\n children: ReactNode;\r\n mobileVariant?: 'sheet' | 'tabs';\r\n mobileTabsOffset?: string;\r\n onCancelledReactivate?: () => void;\r\n}\r\n\r\nfunction AppNavigationRoot({ children, mobileVariant = 'sheet', mobileTabsOffset, onCancelledReactivate }: AppNavigationProps) {\r\n const [navItems, setNavItems] = useState<NavItemConfig[]>([]);\r\n\r\n return (\r\n <NavItemsContext.Provider value={{ navItems, setNavItems, mobileVariant }}>\r\n <DesktopShell>{children}</DesktopShell>\r\n <MdShell>{children}</MdShell>\r\n <MobileShell>{children}</MobileShell>\r\n {mobileVariant === 'tabs' && (\r\n <TabsMobileShell topOffset={mobileTabsOffset}>{children}</TabsMobileShell>\r\n )}\r\n </NavItemsContext.Provider>\r\n );\r\n}\r\n\r\nexport const AppNavigation = Object.assign(AppNavigationRoot, {\r\n NavItems,\r\n ProjectSelector,\r\n PlanCard,\r\n CreditsCard,\r\n});\r\n"],"mappings":";AA8BI,SACE,KADF;AA5BJ,SAAoB,gBAAgB;AACpC,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAehC,SAAS,kBAAkB,EAAE,UAAU,gBAAgB,SAAS,kBAAkB,sBAAsB,GAAuB;AAC7H,QAAM,CAAC,UAAU,WAAW,IAAI,SAA0B,CAAC,CAAC;AAE5D,SACE,qBAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,aAAa,cAAc,GACtE;AAAA,wBAAC,gBAAc,UAAS;AAAA,IACxB,oBAAC,WAAS,UAAS;AAAA,IACnB,oBAAC,eAAa,UAAS;AAAA,IACtB,kBAAkB,UACjB,oBAAC,mBAAgB,WAAW,kBAAmB,UAAS;AAAA,KAE5D;AAEJ;AAEO,MAAM,gBAAgB,OAAO,OAAO,mBAAmB;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;","names":[]}
|
package/package.json
CHANGED
|
@@ -18,6 +18,7 @@ export interface AppMobileNavBarProps {
|
|
|
18
18
|
/** Extra slot rendered after the app icon (e.g. project selector) */
|
|
19
19
|
extraLeftSlot?: ReactNode;
|
|
20
20
|
menuItems?: ProfileMenuItem[];
|
|
21
|
+
showMenuToggle?: boolean;
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
export function AppMobileNavBar({
|
|
@@ -26,6 +27,7 @@ export function AppMobileNavBar({
|
|
|
26
27
|
onAppIconClick,
|
|
27
28
|
extraLeftSlot,
|
|
28
29
|
menuItems = [],
|
|
30
|
+
showMenuToggle = true,
|
|
29
31
|
}: AppMobileNavBarProps) {
|
|
30
32
|
const { isOpen, toggle } = useMobileNavbarSheet();
|
|
31
33
|
|
|
@@ -98,16 +100,18 @@ export function AppMobileNavBar({
|
|
|
98
100
|
contentClassName=""
|
|
99
101
|
menuItems={menuItems}
|
|
100
102
|
/>
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
103
|
+
{showMenuToggle && (
|
|
104
|
+
<button
|
|
105
|
+
className="size-10 flex items-center justify-center border border-zinc-200 rounded-lg bg-white cursor-pointer"
|
|
106
|
+
onClick={toggle}
|
|
107
|
+
>
|
|
108
|
+
{isOpen ? (
|
|
109
|
+
<IconX size={18} className="text-zinc-950" />
|
|
110
|
+
) : (
|
|
111
|
+
<IconMenu2 size={18} className="text-zinc-950" />
|
|
112
|
+
)}
|
|
113
|
+
</button>
|
|
114
|
+
)}
|
|
111
115
|
</div>
|
|
112
116
|
</div>
|
|
113
117
|
);
|
|
@@ -31,9 +31,8 @@ function AppNavigationRoot({ children, mobileVariant = 'sheet', mobileTabsOffset
|
|
|
31
31
|
<NavItemsContext.Provider value={{ navItems, setNavItems, mobileVariant }}>
|
|
32
32
|
<DesktopShell>{children}</DesktopShell>
|
|
33
33
|
<MdShell>{children}</MdShell>
|
|
34
|
-
{
|
|
35
|
-
|
|
36
|
-
) : (
|
|
34
|
+
<MobileShell>{children}</MobileShell>
|
|
35
|
+
{mobileVariant === 'tabs' && (
|
|
37
36
|
<TabsMobileShell topOffset={mobileTabsOffset}>{children}</TabsMobileShell>
|
|
38
37
|
)}
|
|
39
38
|
</NavItemsContext.Provider>
|