New navigation menu, virtualization, about page, logo and other UI improvements

.github/workflows/ci-pipeline.yml

@@ -37,9 +37,12 @@ jobs:
     - name: 📦 Install dependencies
       run: npm ci
       working-directory: Website
-    - name: 🔨 Build
-      run: npm run build
+    - name: 🗃️ Move stub data
+      run: npm run prepipeline
       working-directory: Website
     - name: 📝 Lint
       run: npm run lint
       working-directory: Website
+    - name: 🔨 Build
+      run: npm run build
+      working-directory: Website

Website/.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
+  "extends": ["next/core-web-vitals", "next/typescript"],
+  "rules": {
+    "@typescript-eslint/no-empty-object-type": "off"
+  }
 }

Website/app/about/page.tsx

@@ -0,0 +1,12 @@
+import { AboutView } from '@/components/aboutview/AboutView';
+import { TouchProvider } from '@/components/ui/hybridtooltop';
+import { Loading } from '@/components/ui/loading';
+import React, { Suspense } from 'react'
+
+export default function About() {
+  return <Suspense fallback={<Loading />}>
+      <TouchProvider>
+        <AboutView />
+      </TouchProvider>
+    </Suspense>
+}

Website/app/api/version/route.ts

@@ -0,0 +1,6 @@
+import { NextResponse } from 'next/server'
+import { version } from '../../../package.json'
+
+export async function GET() {
+    return NextResponse.json({ version })
+}

Website/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
-import { SidebarProvider } from "@/components/ui/sidebar";
+import { SidebarProvider } from "@/contexts/SidebarContext";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",

Website/app/page.tsx

@@ -1,9 +1,12 @@
-import { DatamodelView } from "@/components/DatamodelView";
+import { DatamodelView } from "@/components/datamodelview/DatamodelView";
+import { TouchProvider } from "@/components/ui/hybridtooltop";
 import { Loading } from "@/components/ui/loading";
 import { Suspense } from "react";
 
 export default function Home() {
   return <Suspense fallback={<Loading />}>
-      <DatamodelView />
+      <TouchProvider>
+        <DatamodelView />
+      </TouchProvider>
     </Suspense>
 }

Website/components/AppSidebar.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useSidebar, useSidebarDispatch } from '@/contexts/SidebarContext'
+import { SidebarClose, SidebarOpen } from 'lucide-react'
+import { useIsMobile } from '@/hooks/use-mobile'
+import SidebarNavRail from './SidebarNavRail'
+import clsx from 'clsx'
+
+interface IAppSidebarProps {}
+
+export const AppSidebar = ({}: IAppSidebarProps) => {
+  const { element, isOpen } = useSidebar()
+  const dispatch = useSidebarDispatch()
+  const isMobile = useIsMobile()
+
+  const toggleSidebar = () => {
+    dispatch({ type: 'SET_OPEN', payload: !isOpen })
+  }
+
+  return (
+    <>
+      {/* Toggle Button (mobile only) */}
+      {isMobile && (
+        <button onClick={toggleSidebar}
+          className={clsx(
+            'fixed top-4 z-50 transition-all bg-white border border-gray-300 shadow rounded-full p-2',
+            isOpen ? 'left-52' : 'left-4'
+          )}
+          aria-label={isOpen ? 'Close Sidebar' : 'Open Sidebar'}
+        >
+          {isOpen ? <SidebarClose size={20} /> : <SidebarOpen size={20} />}
+        </button>
+      )}
+
+      {/* Sidebar */}
+      <div
+        className={clsx('h-screen w-64 bg-sidebar border-r border-sidebar-border z-40 transition-transform duration-300',
+          isMobile
+            ? [
+                'fixed top-0 left-0',
+                isOpen ? 'translate-x-0' : '-translate-x-full',
+                'flex flex-col'
+              ]
+            : 'flex flex-col sticky top-0'
+        )}
+      >
+        {/* Header */}
+        <div className="w-full h-16 border-b border-sidebar-border p-2 flex justify-center items-center bg-white">
+          {isMobile ? (
+            <img src="/DMVLOGO.svg" alt="Logo" className="h-full" draggable={false} />
+          ) : (
+            <img src="/DMVLOGOHORZ.svg" alt="Logo" className="h-full" draggable={false} />
+          )}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto relative flex">
+          <SidebarNavRail />
+          {element}
+        </div>
+      </div>
+    </>
+  )
+}