diff --git a/cypress/e2e/item/home/home.cy.ts b/cypress/e2e/item/home/home.cy.ts
index 93283a3f0..79c15c428 100644
--- a/cypress/e2e/item/home/home.cy.ts
+++ b/cypress/e2e/item/home/home.cy.ts
@@ -1,6 +1,6 @@
import { ITEM_PAGE_SIZE } from '@/config/constants';
-import i18n, { BUILDER_NAMESPACE } from '../../../../src/config/i18n';
+import i18n from '../../../../src/config/i18n';
import { HOME_PATH, ITEMS_PATH } from '../../../../src/config/paths';
import {
ACCESSIBLE_ITEMS_NEXT_PAGE_BUTTON_SELECTOR,
@@ -9,21 +9,16 @@ import {
ITEMS_GRID_PAGINATION_ID,
ITEMS_TABLE_ROW,
ITEM_SEARCH_INPUT_ID,
- NAVIGATION_ROOT_ID,
buildItemCard,
buildItemsTableRowIdAttribute,
buildItemsTableRowSelector,
} from '../../../../src/config/selectors';
import { ItemLayoutMode } from '../../../../src/enums';
-import { BUILDER } from '../../../../src/langs/constants';
import { SAMPLE_ITEMS, generateOwnItems } from '../../../fixtures/items';
import { CURRENT_USER } from '../../../fixtures/members';
import { NAVIGATION_LOAD_PAUSE } from '../../../support/constants';
import { ItemForTest } from '../../../support/types';
-const translateBuilder = (key: string) =>
- i18n.t(key, { ns: BUILDER_NAMESPACE });
-
const sampleItems = generateOwnItems(30);
// register a custom one time interceptor to listen specifically
@@ -169,11 +164,6 @@ describe('Home', () => {
}
});
- // root title
- cy.get(`#${NAVIGATION_ROOT_ID}`).contains(
- translateBuilder(BUILDER.NAVIGATION_MY_ITEMS_TITLE),
- );
-
// visit child
const { id: childChildId } = SAMPLE_ITEMS.items[3];
cy.goToItemInGrid(childChildId);
@@ -181,11 +171,6 @@ describe('Home', () => {
// expect no children
cy.get(`#${ITEMS_GRID_NO_ITEM_ID}`).should('exist');
- // root title
- cy.get(`#${NAVIGATION_ROOT_ID}`).contains(
- translateBuilder(BUILDER.NAVIGATION_MY_ITEMS_TITLE),
- );
-
// return parent with navigation and should display children
cy.wait(NAVIGATION_LOAD_PAUSE);
cy.goToItemWithNavigation(childId);
@@ -200,10 +185,6 @@ describe('Home', () => {
cy.get(`#${buildItemCard(item.id)}`).should('exist');
}
});
- // root title
- cy.get(`#${NAVIGATION_ROOT_ID}`).contains(
- translateBuilder(BUILDER.NAVIGATION_MY_ITEMS_TITLE),
- );
});
});
});
diff --git a/cypress/e2e/item/shared/sharedItems.cy.ts b/cypress/e2e/item/shared/sharedItems.cy.ts
deleted file mode 100644
index 19f631055..000000000
--- a/cypress/e2e/item/shared/sharedItems.cy.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import i18n, { BUILDER_NAMESPACE } from '@/config/i18n';
-import {
- ITEM_MENU_MOVE_BUTTON_CLASS,
- NAVIGATION_ROOT_ID,
- buildItemCard,
- buildItemMenu,
- buildItemMenuButtonId,
-} from '@/config/selectors';
-import { BUILDER } from '@/langs/constants';
-
-import { SHARED_ITEMS_PATH } from '../../../../src/config/paths';
-import ItemLayoutMode from '../../../../src/enums/itemLayoutMode';
-import { SAMPLE_ITEMS } from '../../../fixtures/items';
-import { MEMBERS } from '../../../fixtures/members';
-
-const translateBuilder = (key: string) =>
- i18n.t(key, { ns: BUILDER_NAMESPACE });
-
-describe('Shared Items', () => {
- beforeEach(() => {
- cy.setUpApi({ ...SAMPLE_ITEMS, currentMember: MEMBERS.BOB });
- cy.visit(SHARED_ITEMS_PATH);
- cy.wait(5000);
- });
- describe('Grid', () => {
- it('visit Shared Items', () => {
- cy.switchMode(ItemLayoutMode.Grid);
-
- cy.wait('@getSharedItems').then(({ response: { body } }) => {
- // check item is created and displayed
- for (const item of body) {
- cy.get(`#${buildItemCard(item.id)}`).should('exist');
- }
- });
-
- // visit child
- const { id: childId } = SAMPLE_ITEMS.items[1];
- cy.goToItemInGrid(childId);
-
- // should get children
- cy.wait('@getChildren').then(({ response: { body } }) => {
- // check item is created and displayed
- for (const item of body) {
- cy.get(`#${buildItemCard(item.id)}`).should('exist');
- }
- });
-
- // breadcrumb navigation
- cy.get(`#${NAVIGATION_ROOT_ID}`).contains(
- translateBuilder(BUILDER.NAVIGATION_SHARED_ITEMS_TITLE),
- );
- });
- it('move should be prevented', () => {
- cy.switchMode(ItemLayoutMode.Grid);
- const itemId = SAMPLE_ITEMS.items[1].id;
- const menuSelector = `#${buildItemMenuButtonId(itemId)}`;
- cy.get(menuSelector).click();
- cy.get(
- `#${buildItemMenu(itemId)} .${ITEM_MENU_MOVE_BUTTON_CLASS}`,
- ).should('not.exist');
- });
- });
-
- it('move should be prevented in list', () => {
- cy.switchMode(ItemLayoutMode.List);
- const itemId = SAMPLE_ITEMS.items[1].id;
- const menuSelector = `#${buildItemMenuButtonId(itemId)}`;
- cy.get(menuSelector).click();
- cy.get(`#${buildItemMenu(itemId)} .${ITEM_MENU_MOVE_BUTTON_CLASS}`).should(
- 'not.exist',
- );
- });
-});
diff --git a/cypress/e2e/item/view/viewFolder.cy.ts b/cypress/e2e/item/view/viewFolder.cy.ts
index 9d5e94914..6e50a9102 100644
--- a/cypress/e2e/item/view/viewFolder.cy.ts
+++ b/cypress/e2e/item/view/viewFolder.cy.ts
@@ -1,8 +1,8 @@
import i18n from '../../../../src/config/i18n';
-import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
+import { buildItemPath } from '../../../../src/config/paths';
import {
ITEM_SEARCH_INPUT_ID,
- NAVIGATION_ROOT_ID,
+ NAVIGATION_HOME_ID,
buildItemCard,
buildItemsTableRowIdAttribute,
} from '../../../../src/config/selectors';
@@ -47,7 +47,7 @@ describe('View Folder', () => {
expectFolderViewScreenLayout({ item: SAMPLE_ITEMS.items[0] });
// visit home
- cy.get(`#${NAVIGATION_ROOT_ID} [href="${HOME_PATH}"]`).click();
+ cy.get(`#${NAVIGATION_HOME_ID}`).click();
// should get accessible items
cy.wait('@getAccessibleItems').then(({ response: { body } }) => {
@@ -105,7 +105,7 @@ describe('View Folder', () => {
expectFolderViewScreenLayout({ item: SAMPLE_ITEMS.items[0] });
// visit home
- cy.get(`#${NAVIGATION_ROOT_ID} [href="${HOME_PATH}"]`).click();
+ cy.get(`#${NAVIGATION_HOME_ID}`).click();
cy.wait('@getAccessibleItems').then(({ response: { body } }) => {
// check item is created and displayed
diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
index 5ad873d2a..e0d01069c 100644
--- a/src/components/layout/Navigation.tsx
+++ b/src/components/layout/Navigation.tsx
@@ -1,30 +1,23 @@
-import { useLocation, useParams } from 'react-router-dom';
+import { Link, useLocation, useParams } from 'react-router-dom';
-import { HomeMenu, ItemMenu, Navigation } from '@graasp/ui';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import { IconButton } from '@mui/material';
+
+import { Navigation } from '@graasp/ui';
+
+import { Home } from 'lucide-react';
import { useBuilderTranslation } from '../../config/i18n';
-import {
- BOOKMARKED_ITEMS_PATH,
- HOME_PATH,
- SHARED_ITEMS_PATH,
- buildItemPath,
-} from '../../config/paths';
+import { HOME_PATH, buildItemPath } from '../../config/paths';
import { hooks } from '../../config/queryClient';
import {
+ NAVIGATION_HOME_ID,
NAVIGATION_ROOT_ID,
buildNavigationLink,
} from '../../config/selectors';
-import { BUILDER } from '../../langs/constants';
import { buildExtraItems } from './utils';
-const {
- useItem,
- useParents,
- useCurrentMember,
- useChildren,
- useOwnItems,
- useSharedItems,
-} = hooks;
+const { useItem, useParents, useCurrentMember, useChildren } = hooks;
const Navigator = (): JSX.Element | null => {
const { t: translateBuilder } = useBuilderTranslation();
@@ -42,69 +35,31 @@ const Navigator = (): JSX.Element | null => {
enabled: !!itemPath,
});
- const isParentOwned =
- currentMember &&
- (item?.creator?.id ?? parents?.[0]?.creator?.id) === currentMember?.id;
-
if (isItemLoading || areParentsLoading) {
return null;
}
const buildToItemPath = (id: string) => buildItemPath(id);
- const menu = [
- // todo: remove distinction -> not a good idea to show the whole root in arrow
- {
- name: translateBuilder(BUILDER.NAVIGATION_MY_ITEMS_TITLE),
- id: 'home',
- to: HOME_PATH,
- },
- {
- name: translateBuilder(BUILDER.NAVIGATION_SHARED_ITEMS_TITLE),
- id: 'shared',
- to: SHARED_ITEMS_PATH,
- },
- {
- name: translateBuilder(BUILDER.NAVIGATION_BOOKMARKED_ITEMS_TITLE),
- id: 'bookmark',
- to: BOOKMARKED_ITEMS_PATH,
- },
- ];
-
const renderRoot = () => {
// no access to root if signed out
if (!currentMember) {
return null;
}
- const selected =
- isParentOwned || pathname === HOME_PATH ? menu[0] : menu[1];
-
return (
<>
-
-
+
+
+
+
+
+
>
);
};
- if (
- item === undefined &&
- pathname !== SHARED_ITEMS_PATH &&
- pathname !== HOME_PATH
- ) {
+ if (item === undefined && pathname !== HOME_PATH) {
return null;
}
diff --git a/src/config/selectors.ts b/src/config/selectors.ts
index d6a3b5dd7..235ded49f 100644
--- a/src/config/selectors.ts
+++ b/src/config/selectors.ts
@@ -254,6 +254,7 @@ export const buildInvitationTableRowSelector = (id: string): string =>
export const ITEM_RESEND_INVITATION_BUTTON_CLASS = 'itemResendInvitationButton';
export const CREATE_MEMBERSHIP_FORM_ID = 'createMembershipFormId';
export const NAVIGATION_ROOT_ID = 'navigationRoot';
+export const NAVIGATION_HOME_ID = 'navigationHome';
export const HEADER_MEMBER_MENU_BUTTON_ID = 'headerMemberMenuButton';
export const HEADER_MEMBER_MENU_SEE_PROFILE_BUTTON_ID =
'headerMemberMenuSeeProfileButton';