feat(app): Moved settings from profile dropdown to nav menu

signalco-io · Dec 16, 2023 · 937dc2a · 937dc2a
1 parent 6312d41
commit 937dc2a
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 53 deletions.
diff --git a/web/apps/app/components/layouts/AppLayout.tsx b/web/apps/app/components/layouts/AppLayout.tsx
@@ -7,7 +7,7 @@ import { IconButton } from '@signalco/ui-primitives/IconButton';
 import { cx } from '@signalco/ui-primitives/cx';
 import { Minimize } from '@signalco/ui-icons';
 import { useSearchParam } from '@signalco/hooks/useSearchParam';
-import { PageTitle } from '../navigation/PageTitle';
+import { PageTitle } from '../navigation/titles/PageTitle';
 import NavProfile from '../navigation/NavProfile';
 import { AuthWrapper } from './AuthWrapper';
 import { AppClientWrapper } from './AppClientWrapper';

diff --git a/web/apps/app/components/navigation/MobileMenu.tsx b/web/apps/app/components/navigation/MobileMenu.tsx
@@ -18,25 +18,21 @@ export function MobileMenu({ open, items, active, onClose }: { open: boolean; it
             open && 'animate-in slide-in-from-top-3'
         )}>
             <Stack>
-                {items.map((ni, index) => {
-                    const ItemIcon = ni.icon;
-
-                    return (
-                        <Tooltip title={t(ni.label)} key={index + 1}>
-                            <Link href={ni.path}>
-                                <Button
-                                    fullWidth
-                                    aria-label={t(ni.label)}
-                                    variant={ni === active ? 'soft' : 'plain'}
-                                    size="lg"
-                                    onClick={onClose}
-                                    startDecorator={(<ItemIcon />)}>
-                                    {ni.label}
-                                </Button>
-                            </Link>
-                        </Tooltip>
-                    );
-                })}
+                {items.map((ni, index) => (
+                    <Tooltip title={t(ni.label)} key={index + 1}>
+                        <Link href={ni.path}>
+                            <Button
+                                fullWidth
+                                aria-label={t(ni.label)}
+                                variant={ni === active ? 'soft' : 'plain'}
+                                size="lg"
+                                onClick={onClose}
+                                startDecorator={(<ni.icon />)}>
+                                {ni.label}
+                            </Button>
+                        </Link>
+                    </Tooltip>
+                ))}
             </Stack>
         </div>
     );

diff --git a/web/apps/app/components/navigation/NavProfile.tsx b/web/apps/app/components/navigation/NavProfile.tsx
@@ -8,7 +8,7 @@ import { UserProfileAvatar } from '../users/UserProfileAvatar';
 import { KnownPages } from '../../src/knownPages';
 import useLocale from '../../src/hooks/useLocale';
 import { useActiveNavItem } from './useActiveNavItem';
-import { PageTitle } from './PageTitle';
+import { PageTitle } from './titles/PageTitle';
 import NavLink from './NavLink';
 import { MobileMenu } from './MobileMenu';
 import { FloatingNavContainer } from './FloatingNavContainer';
@@ -17,39 +17,46 @@ export type NavItem = {
     label: string,
     path: string,
     icon: React.FunctionComponent,
-    hidden?: boolean | undefined;
+    end?: boolean | undefined;
 }
 
 export const navItems: NavItem[] = [
-    { label: 'Channels', path: KnownPages.Channels, icon: Channel, hidden: true },
-    { label: 'Settings', path: KnownPages.Settings, icon: Settings, hidden: true },
     { label: 'Spaces', path: KnownPages.Spaces, icon: Dashboard },
-    { label: 'Entities', path: KnownPages.Entities, icon: Device }
+    { label: 'Entities', path: KnownPages.Entities, icon: Device },
+    { label: 'Channels', path: KnownPages.Channels, icon: Channel, end: true },
+    { label: 'Settings', path: KnownPages.Settings, icon: Settings, end: true },
 ];
 
 export default function NavProfile() {
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
     const activeNavItem = useActiveNavItem();
-    const visibleNavItems = navItems.filter(ni => ni === activeNavItem || !ni.hidden);
     const { t } = useLocale('App', 'Nav');
 
     return (
         <FloatingNavContainer>
-            <div className="flex h-full min-h-[60px] flex-row items-center justify-between gap-3 sm:flex-col sm:justify-start sm:pl-0 sm:pt-2">
+            <div className="flex h-full min-h-[60px] flex-row items-center justify-between gap-3 sm:flex-col sm:justify-start sm:py-2 sm:pl-0">
                 <Suspense>
                     <UserProfileAvatar />
                 </Suspense>
-                <div className="hidden w-full sm:block">
-                    <Stack>
-                        {visibleNavItems
-                            .map((ni, index) => (
-                                <NavLink
-                                    key={index + 1}
-                                    path={ni.path}
-                                    Icon={ni.icon}
-                                    active={ni === activeNavItem}
-                                    label={t(ni.label)} />
-                            ))}
+                <div className="hidden h-full w-full sm:block">
+                    <Stack className="h-full">
+                        {navItems.filter(ni => !ni.end).map((ni, index) => (
+                            <NavLink
+                                key={index + 1}
+                                path={ni.path}
+                                Icon={ni.icon}
+                                active={ni === activeNavItem}
+                                label={t(ni.label)} />
+                        ))}
+                        <div className="grow" />
+                        {navItems.filter(ni => ni.end).map((ni, index) => (
+                            <NavLink
+                                key={index + 1}
+                                path={ni.path}
+                                Icon={ni.icon}
+                                active={ni === activeNavItem}
+                                label={t(ni.label)} />
+                        ))}
                     </Stack>
                 </div>
                 <div className="absolute left-1/2 -translate-x-1/2 sm:hidden">
@@ -60,6 +67,7 @@ export default function NavProfile() {
                 <div className="sm:hidden">
                     <IconButton
                         variant="plain"
+                        size="lg"
                         onClick={() => setMobileMenuOpen((curr) => !curr)}
                         aria-label="Toggle menu">
                         {mobileMenuOpen ? <Close /> : <MenuIcon />}
@@ -68,7 +76,7 @@ export default function NavProfile() {
             </div>
             <MobileMenu
                 open={mobileMenuOpen}
-                items={visibleNavItems}
+                items={navItems}
                 active={activeNavItem}
                 onClose={() => setMobileMenuOpen(false)} />
         </FloatingNavContainer>

diff --git a/...p/components/navigation/EntitiesTitle.tsx → ...nents/navigation/titles/EntitiesTitle.tsx b/...p/components/navigation/EntitiesTitle.tsx → ...nents/navigation/titles/EntitiesTitle.tsx
@@ -1,6 +1,6 @@
 import { SelectItems } from '@signalco/ui-primitives/SelectItems';
 import { useSearchParam } from '@signalco/hooks/useSearchParam';
-import { EntityIconByType } from '../shared/entity/EntityIcon';
+import { EntityIconByType } from '../../shared/entity/EntityIcon';
 
 const entityTypes = [
     { value: '1', label: 'Devices' },

diff --git a/...app/components/navigation/EntityTitle.tsx → ...ponents/navigation/titles/EntityTitle.tsx b/...app/components/navigation/EntityTitle.tsx → ...ponents/navigation/titles/EntityTitle.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import EntityIconLabel from '../shared/entity/EntityIconLabel';
+import EntityIconLabel from '../../shared/entity/EntityIconLabel';
 
 export function EntityTitle({ entityId }: { entityId: string; }) {
     return (

diff --git a/...s/app/components/navigation/PageTitle.tsx → ...omponents/navigation/titles/PageTitle.tsx b/...s/app/components/navigation/PageTitle.tsx → ...omponents/navigation/titles/PageTitle.tsx
@@ -5,8 +5,8 @@ import { usePathname } from 'next/navigation';
 import { Typography } from '@signalco/ui-primitives/Typography';
 import { Row } from '@signalco/ui-primitives/Row';
 import { Avatar } from '@signalco/ui-primitives/Avatar';
-import { KnownPages } from '../../src/knownPages';
-import { useActiveNavItem } from './useActiveNavItem';
+import { useActiveNavItem } from '../useActiveNavItem';
+import { KnownPages } from '../../../src/knownPages';
 import { SpaceTitle } from './SpaceTitle';
 import { EntityTitle } from './EntityTitle';
 import { EntitiesTitle } from './EntitiesTitle';
@@ -48,10 +48,10 @@ export function PageTitle({ fullPage = false }: { fullPage?: boolean }) {
                         <NavItemIcon />
                     </Avatar>
                 ) : (
-                        <NavItemIcon />
+                    <NavItemIcon />
                 )
             )}
-            <Typography level={fullPage ? 'h4' : 'h6'}>{activeNavItem?.label}</Typography>
+            <Typography level={fullPage ? 'h4' : 'body1'}>{activeNavItem?.label}</Typography>
         </Row>
     );
 }
diff --git a/.../app/components/navigation/SpaceTitle.tsx → ...mponents/navigation/titles/SpaceTitle.tsx b/.../app/components/navigation/SpaceTitle.tsx → ...mponents/navigation/titles/SpaceTitle.tsx
@@ -3,10 +3,10 @@
 import React from 'react';
 import { Row } from '@signalco/ui-primitives/Row';
 import { useSearchParam } from '@signalco/hooks/useSearchParam';
-import DashboardSelector from '../dashboards/DashboardSelector';
+import DashboardSelector from '../../dashboards/DashboardSelector';
 
 export function SpaceTitle() {
-    const [,setIsEditing] = useSearchParam('editing');
+    const [, setIsEditing] = useSearchParam('editing');
     const [, setIsDashboardSettingsOpen] = useSearchParam('settings');
     const handleEditWidgets = () => setIsEditing('true');
     const handleSettings = () => setIsDashboardSettingsOpen('true');

diff --git a/web/apps/app/components/users/UserProfileAvatar.tsx b/web/apps/app/components/users/UserProfileAvatar.tsx
@@ -1,5 +1,5 @@
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@signalco/ui-primitives/Menu';
-import { LogOut, Settings } from '@signalco/ui-icons';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@signalco/ui-primitives/Menu';
+import { LogOut } from '@signalco/ui-icons';
 import { KnownPages } from '../../src/knownPages';
 import useLocale from '../../src/hooks/useLocale';
 import UserProfileAvatarButton from './UserProfileAvatarButton';
@@ -13,10 +13,6 @@ export function UserProfileAvatar() {
                 <UserProfileAvatarButton />
             </DropdownMenuTrigger>
             <DropdownMenuContent>
-                <DropdownMenuItem href={KnownPages.Settings} startDecorator={<Settings />}>
-                    {t('Settings')}
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
                 <DropdownMenuItem href={KnownPages.Logout} startDecorator={<LogOut />}>
                     {t('Logout')}
                 </DropdownMenuItem>