implement collapsible side navigation, 401 page redirection after log…

mscr-ui/public/locales/en/common.json

@@ -37,6 +37,8 @@
   "class": "",
   "clear-language-filter": "",
   "click-to-dismiss": "Click to dismiss",
+  "click-to-expand-sidebar": "Click to expand sidebar",
+  "click-to-minimize-sidebar": "Click to minimize sidebar",
   "close": "Close",
   "code-lists": "",
   "codelist-title": "",

mscr-ui/public/locales/fi/common.json

@@ -37,6 +37,8 @@
   "class": "",
   "clear-language-filter": "",
   "click-to-dismiss": "",
+  "click-to-expand-sidebar": "",
+  "click-to-minimize-sidebar": "",
   "close": "",
   "code-lists": "",
   "codelist-title": "",

mscr-ui/public/locales/sv/common.json

@@ -37,6 +37,8 @@
   "class": "",
   "clear-language-filter": "",
   "click-to-dismiss": "",
+  "click-to-expand-sidebar": "",
+  "click-to-minimize-sidebar": "",
   "close": "",
   "code-lists": "",
   "codelist-title": "",

mscr-ui/src/common/components/layout/layout.styles.tsx

@@ -20,7 +20,7 @@ export const MarginContainer = styled.div<{
 export const SiteContainer = styled.div`
   width: 100%;
   margin: auto;
-  height: 100%;
+  height: 100vh;
 `;
 
 export const NavigationContainer = styled.div<{ $breakpoint: Breakpoint }>`

mscr-ui/src/common/components/layout/layout.tsx

@@ -78,27 +78,26 @@ export default function Layout({
               )}
             />
             {!sideNavigationHidden && user && !user.anonymous ? (
-              <Grid container spacing={2}>
-                <Grid item xs={2}>
-                  <SideNavigationPanel user={user} />
-                </Grid>
-                <Grid item xs={10}>
-                  <ContentContainer>
+              <>
+                <div className={'d-flex w-100'}>
+                  <SideNavigationPanel user={user}/>
+                  <ContentContainer className={'w-100'}>
                     {alerts && alerts}
                     <MarginContainer
                       $breakpoint={breakpoint}
                       className={isSearchActive ? 'hidden' : ''}
                     >
-                      {isSearchActive && <SearchScreen />}
+                      {isSearchActive && <SearchScreen/>}
                       {children}
                     </MarginContainer>
                   </ContentContainer>
-                </Grid>
-              </Grid>
+                </div>
+              </>
+
             ) : (
               <Grid container spacing={2}>
                 <Grid item xs={12}>
-                  <ContentContainer>
+                  <ContentContainer className={'w-100'}>
                     {alerts && alerts}
                     <MarginContainer
                       $breakpoint={breakpoint}

mscr-ui/src/common/components/side-navigation/index.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { RouterLink } from 'suomifi-ui-components';
 import { useBreakpoints } from 'yti-common-ui/media-query';
+import Tooltip from '@mui/material/Tooltip';
 import {
   NavigationHeading,
   SideNavigationWrapper,
@@ -11,6 +12,9 @@ import {
   GroupHeading,
   GroupOpenButton,
   MscrSideNavigationLevel1,
+  FoldButton,
+  FoldButtonWrapper,
+  GroupOpenBtn,
 } from './side-navigation.styles';
 import { useTranslation } from 'next-i18next';
 import { useContext, useState } from 'react';
@@ -32,10 +36,22 @@ export default function SideNavigationPanel({ user }: { user?: MscrUser }) {
   const personalSettingsPath = '/personal/settings';
   // Group settings path is form '/' + group.id + '/settings'
   const organizations = getOrganizations(user?.organizations, lang);
+  const [isSidebarMinimized, setSidebarMinimized] = useState(false);
+  const [isFirstPageLoad, setFirstPageLoad] = useState(true);
+
+  function sidebarFoldButtonClick() {
+    //console.log('is folded', isSidebarFolded);
+    setSidebarMinimized(!isSidebarMinimized);
+    setFirstPageLoad(false);
+  }
 
   return (
-    <SideNavigationWrapper $breakpoint={breakpoint} id="sidebar">
-      <MscrSideNavigation heading="" aria-label={t('workspace.navigation')}>
+    <SideNavigationWrapper $breakpoint={breakpoint} $isSidebarFolded={isSidebarMinimized} id="sidebar">
+      <div className={'d-flex justify-content-between'}>
+        <div className={''}>
+          <div className={!isSidebarMinimized && !isFirstPageLoad ? "sidebar-animate-fadein" :  undefined}>
+            <MscrSideNavigation heading="" aria-label={t('workspace.navigation')}
+                                className={isSidebarMinimized ? "sidebar-animate-fadeout" : undefined}>
         <MscrSideNavigationLevel1
           subLevel={1}
           expanded
@@ -157,6 +173,7 @@ export default function SideNavigationPanel({ user }: { user?: MscrUser }) {
                 selected={router.asPath.startsWith(
                   '/' + group.id + '/settings'
                 )}
+
                 content={''}
                 // content={
                 //   <Link href={'/' + group.id + '/settings'} passHref>
@@ -169,7 +186,27 @@ export default function SideNavigationPanel({ user }: { user?: MscrUser }) {
             </MscrSideNavigationLevel2>
           ))}
         </MscrSideNavigationLevel1>
-      </MscrSideNavigation>
+            </MscrSideNavigation>
+          </div>
+        </div>
+        <FoldButtonWrapper className={'col-1 d-flex justify-content-center flex-column'} onClick={() => {
+        }}>
+          <Tooltip
+            title={isSidebarMinimized ? t('click-to-expand-sidebar') : t('click-to-minimize-sidebar')}
+            placement="top-end"
+            className={undefined}>
+            <FoldButton
+              aria-label="fold"
+              onClick={(e) => {
+                sidebarFoldButtonClick();
+                e.stopPropagation();
+              }}>
+              <div></div>
+              <div></div>
+            </FoldButton>
+          </Tooltip>
+        </FoldButtonWrapper>
+      </div>
     </SideNavigationWrapper>
   );
 }

mscr-ui/src/common/components/side-navigation/side-navigation.styles.tsx

@@ -7,18 +7,24 @@ import {
   SideNavigationItem,
 } from 'suomifi-ui-components';
 
-export const SideNavigationWrapper = styled.aside<{ $breakpoint: Breakpoint }>`
+export const SideNavigationWrapper = styled.aside<{ $breakpoint: Breakpoint,  $isSidebarFolded: boolean }>`
   // Width and positioning for now, need adjusting when overall layout structure is decided
   flex-grow: 1;
   width: 100%;
   max-width: ${(props) => small(props.$breakpoint, '100%', '374px')};
+  width: ${(props) => (props.$isSidebarFolded ? '50px' : '100%')};
   left: 0;
   top: 76px;
   background-color: white;
   padding-left: ${(props) => props.theme.suomifi.spacing.m};
   padding-top: ${(props) => props.theme.suomifi.spacing.m};
   padding-bottom: ${(props) => props.theme.suomifi.spacing.m};
   margin-right: ${(props) => props.theme.suomifi.spacing.m};
+  height: 100vh;
+  transition: 0.6s;
+  transition-timing-function: ease-in-out;
+  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
+  border-right: 3px solid ${(props) => props.theme.suomifi.colors.highlightLight3};
 `;
 
 // Modify the style of an existing suomifi component
@@ -42,6 +48,8 @@ export const MscrSideNavigation = styled(SideNavigation)`
   .fi-side-navigation_divider {
     display: none;
   }
+  height: 100vh;
+  ul {padding: 1px !important;}
 `;
 
 export const MscrSideNavigationLevel1 = styled(SideNavigationItem)`
@@ -117,3 +125,34 @@ export const GroupOpenButton = styled.button`
     color: ${(props) => props.theme.suomifi.colors.highlightBase};
   }
 `;
+
+export const GroupOpenBtn = styled.div`
+  &&&&& {
+    // override suomifi default blue background
+    background-color: transparent;
+  }
+  // Hovered group name is blue
+  &:hover h3 {
+    color: ${(props) => props.theme.suomifi.colors.highlightBase};
+  }
+`;
+
+export const FoldButtonWrapper = styled.div`
+  width: 20px;
+  z-index: 200;
+  margin-left: -75px;
+`;
+
+export const FoldButton = styled.div`
+  height: 30px;
+  width: 20px;
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  div {
+    width: 3px;
+    height: 30px;
+    margin-left: 2px;
+    background: ${(props) => props.theme.suomifi.colors.highlightLight2};
+  }
+`;

mscr-ui/src/modules/crosswalk-editor/mappings-accordion/index.tsx

@@ -261,11 +261,13 @@ export default function MappingsAccordion(props: any) {
               <TableRow className="">
                 <td>
                   <div className="empty-mappings-table">
-                    <span className="info-icon">
+                    <div className="info-icon">
                       <InfoIcon></InfoIcon>
-                    </span>
+                    </div>
+                    <div>
                     No elements have been mapped yet. Mappings will appear in
                     this table.
+                    </div>
                   </div>
                 </td>
               </TableRow>

mscr-ui/src/pages/401/index.tsx

@@ -7,19 +7,32 @@ import PageHead from 'yti-common-ui/components/page-head';
 import Layout from '@app/common/components/layout';
 import { MscrUser } from '@app/common/interfaces/mscr-user.interface';
 import { createCommonGetServerSideProps } from '@app/common/utils/create-getserversideprops';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 
 interface unauthorizedPageProps extends CommonContextState {
   _netI18Next: SSRConfig;
   user: MscrUser;
 }
+
+
+
 export default function UnauthorizedPage(props: unauthorizedPageProps) {
+  useEffect(() => {
+    if (props && !props.user.anonymous) {
+      router.push('/');
+    }
+  }, [props]);
+
   const { t } = useTranslation('common');
+  const router = useRouter();
 
   return (
     <CommonContextProvider value={props}>
       <Layout
         user={props.user ?? undefined}
         fakeableUsers={props.fakeableUsers}
+        sideNavigationHidden={true}
       >
         <PageHead
           baseUrl="https://mscr-test.rahtiapp.fi"

mscr-ui/src/pages/mscr-style-customizations.scss

@@ -2,6 +2,33 @@ body {
   font-family: 'Source Sans Pro', 'Helvetica Neue', 'Arial', sans-serif !important;
 }
 
+@keyframes fadeInAnimation
+{
+  0%
+  {
+    opacity: 0;
+  }
+
+  100%
+  {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOutAnimation
+{
+  0%
+  {
+    opacity: 1;
+  }
+
+  100%
+  {
+    opacity: 0;
+  }
+}
+
+
 .fi-dropdown_popover {
   margin-top: 0px !important;
 }
@@ -351,3 +378,23 @@ body {
     background: #eaf2fa;
   }
 }
+
+.sidebar-animate-fadein {
+  animation: fadeInAnimation ease 1700ms;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+}
+
+.sidebar-animate-fadeout {
+  animation: fadeOutAnimation ease 400ms;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+}
+
+.w-0 {
+  width: 0px;
+}
+
+.w-100 {
+  width: 100%;
+}