fix: fixed alignment of primary sidebar on mobile devices

zextras · Sep 26, 2023 · 9b622cb · 9b622cb
1 parent a43804b
commit 9b622cb
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/src/shell/shell-header.tsx b/src/shell/shell-header.tsx
@@ -122,22 +122,23 @@ const ShellHeader: FC<{
 			maxHeight="60px"
 			mainAlignment="space-between"
 			padding={{
-				horizontal: screenMode === 'desktop' ? 'large' : 'extrasmall',
+				left: screenMode === 'desktop' ? 'large' : 'small',
+				right: screenMode === 'desktop' ? 'large' : 'extrasmall',
 				vertical: 'small'
 			}}
 		>
+			<Responsive mode="mobile">
+				<Padding right="small">
+					<IconButton icon={mobileNavIsOpen ? 'Close' : 'Menu'} onClick={onMobileMenuClick} />
+				</Padding>
+			</Responsive>
 			<Container
 				orientation="horizontal"
 				width="75%"
 				maxWidth="75%"
 				mainAlignment="space-between"
 				crossAlignment="center"
 			>
-				<Responsive mode="mobile">
-					<Padding right="small">
-						<IconButton icon={mobileNavIsOpen ? 'Close' : 'Menu'} onClick={onMobileMenuClick} />
-					</Padding>
-				</Responsive>
 				<Container
 					orientation="horizontal"
 					mainAlignment="flex-start"

diff --git a/src/shell/shell-mobile-nav.jsx b/src/shell/shell-mobile-nav.jsx
@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { reduce, find } from 'lodash';
+import { reduce, find, get, sortBy } from 'lodash';
 import { Accordion, Collapse, Container, Padding } from '@zextras/carbonio-design-system';
 import { useHistory } from 'react-router-dom';
 import { useAppStore } from '../store/app';
@@ -20,17 +20,24 @@ const SidebarComponent = ({ item }) =>
 
 export default function ShellMobileNav({ mobileNavIsOpen, menuTree }) {
 	const history = useHistory();
-	const views = useAppStore((s) =>
-		reduce(
-			s.routes,
+	const views = useAppStore((s) => {
+		const sortedRoutes = sortBy(
+			sortBy(s.routes, (item) => get(item, 'position', 0)),
+			(item) => get(item, 'primarybarSection.position', 0)
+		);
+		return reduce(
+			sortedRoutes,
 			(acc, val) => {
 				const primary = find(s.views.primaryBar, (item) => item.id === val.id);
 				const secondary = find(s.views.secondaryBar, (item) => item.id === val.id);
 				if (primary && primary.visible) {
 					acc.push({
 						id: `${val.app}-wrap`,
 						label: primary.label,
-						icon: typeof primary.component === 'string' ? primary.component : 'Cube',
+						icon:
+							typeof primary.component === 'string' || typeof primary.component === 'function'
+								? primary.component
+								: 'Cube',
 						onClick: () => history.push(`/${val.route}`),
 						items: secondary
 							? [
@@ -48,8 +55,8 @@ export default function ShellMobileNav({ mobileNavIsOpen, menuTree }) {
 				return acc;
 			},
 			[]
-		)
-	);
+		);
+	});
 
 	return (
 		<Container