feature/SSISDK-22

packages/web-wallet/package.json

@@ -69,9 +69,9 @@
     "@sphereon/ssi-sdk.siopv2-oid4vp-op-auth": "0.33.0",
     "@sphereon/ssi-sdk.w3c-vc-api-issuer-rest-client": "0.33.0",
     "@sphereon/ssi-types": "0.33.0",
-    "@sphereon/ui-components.core": "0.4.1-next.7",
-    "@sphereon/ui-components.credential-branding": "0.4.1-next.7",
-    "@sphereon/ui-components.ssi-react": "0.4.1-next.7",
+    "@sphereon/ui-components.core": "0.4.1-unstable.14",
+    "@sphereon/ui-components.credential-branding": "0.4.1-unstable.14",
+    "@sphereon/ui-components.ssi-react": "0.4.1-unstable.14",
     "@supabase/postgrest-js": "1.19.2",
     "@supabase/storage-js": "^2.7.1",
     "@tanstack/react-query": "^4.36.1",
@@ -85,6 +85,7 @@
     "@xstate/react": "3.2.2",
     "axios": "^1.7.9",
     "babel-plugin-module-resolver": "^5.0.2",
+    "clsx": "^2.1.1",
     "codemirror": "6.0.1",
     "cookie": "^0.5.0",
     "dayjs": "^1.11.13",

packages/web-wallet/pages/App.module.css

@@ -16,3 +16,8 @@
   flex-direction: column;
   flex-grow: 1;
 }
+
+.sideNavigationContainer {
+  display: flex;
+  border-right: 1px solid #C4C5CA;
+}

packages/web-wallet/pages/_app.tsx

@@ -129,7 +129,9 @@ const _app = (props: React.PropsWithChildren<unknown>) => {
         <div className={styles.container}>
           <TopNavigationBar title={t('top_navigation_header_title')} />
           <div className={styles.main}>
-            <SideNavigationBar />
+            <div className={styles.sideNavigationContainer}>
+              <SideNavigationBar />
+            </div>
             <main className={styles.fragment}>
               <AppRouter />
             </main>

packages/web-wallet/src/components/bars/SideNavigationBar/SideNavigationGroup/index.module.css

@@ -0,0 +1,14 @@
+.container {
+    display: flex;
+    user-select: none;
+    flex-direction: column;
+}
+
+.title {
+    font-size: 0.75rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    color: #8D9099;
+    align-self: flex-start;
+}

packages/web-wallet/src/components/bars/SideNavigationBar/SideNavigationGroup/index.tsx

@@ -0,0 +1,29 @@
+import React, {CSSProperties, FC, ReactElement, ReactNode} from 'react'
+import {menuItemFrom} from '../../SideNavigationBar'
+import {MenuItem} from '../types'
+import styles from './index.module.css'
+
+type Props = {
+    label?: string
+    items: Array<MenuItem>
+    style?: CSSProperties
+}
+
+const SideNavigationGroup: FC<Props> = (props: Props): ReactElement => {
+    const { label, items, style } = props
+
+    const groupFrom = (items: Array<MenuItem>): ReactNode => {
+        return items.map(item => menuItemFrom(item))
+    }
+
+    return (
+        <div className={styles.container} style={style}>
+            <span className={styles.title}>
+                {label}
+            </span>
+            {groupFrom(items)}
+        </div>
+    )
+}
+
+export default SideNavigationGroup

packages/web-wallet/src/components/bars/SideNavigationBar/SideNavigationItem/index.module.css

@@ -0,0 +1,43 @@
+.container {
+    padding: 4px 6px;
+    display: flex;
+    flex-direction: row;
+    cursor: pointer;
+    align-items: center;
+    user-select: none;
+    border-radius: 4px;
+}
+
+.container:hover {
+    background-color: #E3E3E3;
+}
+
+.containerDisabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none; /* Prevent hover and clicks */
+}
+
+.containerActive {
+    background-color: #E7DEFB;
+}
+
+.containerActive:hover {
+    background-color: #E7DEFB; /* same as active, prevents hover override */
+}
+
+.iconContainer {
+    width: 42px;
+    height: 42px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.label {
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    color: #303030;
+}

packages/web-wallet/src/components/bars/SideNavigationBar/SideNavigationItem/index.tsx

@@ -0,0 +1,59 @@
+import React, {CSSProperties, FC, ReactElement} from 'react'
+import {NavLink} from 'react-router-dom'
+import clsx from 'clsx';
+import {ContactIcon} from '@sphereon/ui-components.ssi-react'
+
+import {MenuIcon} from '@typings'
+import styles from './index.module.css'
+
+type Props = {
+    label: string
+    icon?: MenuIcon
+    isDisabled?: boolean
+    href: string
+    style?: CSSProperties
+}
+
+const SideNavigationItem: FC<Props> = (props: Props): ReactElement => {
+    const { label, icon, href, isDisabled = false, style } = props
+
+    const getIconElement = (icon: MenuIcon): ReactElement => {
+        switch (icon) {
+            case 'contact':
+                return <ContactIcon size={16}/>
+            case 'notification':
+                return <BellIcon size={16}/>
+            case 'activity':
+                return <ActivityIcon size={10}/>
+            case 'credential':
+                return <CredentialIcon size={13}/>
+            default:
+                return <div/>
+        }
+    }
+
+    return (
+      <NavLink
+        style={{...style}}
+        to={href}
+        className={({ isActive }) => clsx(
+          styles.container,
+          {
+            [styles.containerActive]: isActive && !isDisabled,
+            [styles.containerDisabled]: isDisabled,
+          }
+        )}
+      >
+        {icon &&
+          <div className={styles.iconContainer}>
+            {getIconElement(icon)}
+          </div>
+        }
+        <span className={styles.label}>
+          {label}
+        </span>
+      </NavLink>
+    )
+}
+
+export default SideNavigationItem