Implement Structure Design Page (Lab Notebook)

src/components/Equation.vue

@@ -1,31 +1,34 @@
 <script setup lang="ts">
 import katex from 'katex'
 import { type Ref, ref, onMounted } from 'vue'
-const props = defineProps<{
-  formula: string
-}>()
-const containerRef = ref(null) as unknown as Ref<HTMLElement>
+const props = withDefaults(
+  defineProps<{
+    formula: string
+    displayMode?: boolean
+  }>(),
+  {
+    formula: '',
+    displayMode: false
+  }
+)
 
+const containerRef = ref(null) as unknown as Ref<HTMLElement>
 onMounted(() => {
-  katex.render(props.formula, containerRef.value, { throwOnError: false })
+  katex.render(props.formula, containerRef.value, {
+    throwOnError: false,
+    displayMode: props.displayMode
+  })
 })
 </script>
 <template>
-  <div
+  <span
     ref="containerRef"
     class="w-full overflow-x-scroll bg-transparent invisible-scroller text-center"
-  ></div>
+  >
+  </span>
 </template>
-<!-- 
-<template>
+
+<!-- <template>
     hello
     <vue-mathjax :formula="formula"></vue-mathjax>
-</template>
-
-<script lang="ts">
-import { VueMathjax } from 'vue-mathjax'
-export default {
-  components: {
-    'vue-mathjax': VueMathjax
-  }}
-</script> -->
+</template> -->

src/components/navbar/NavBar.vue

@@ -31,7 +31,7 @@ const tree: Tree[] = [
         children: [
           {
             name: 'Structure Design',
-            url: '#'
+            url: '/computational-simulation/structure-design'
           },
           {
             name: 'Docking of Dnase I',

src/main.ts

@@ -1,6 +1,6 @@
 import './assets/main.css'
 
-import { VueElement, createApp } from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 

src/router/index.ts

@@ -4,6 +4,7 @@ const IdeasView = () => import('@/views/IdeasView.vue')
 const TeamView = () => import('@/views/TeamView.vue')
 const ELSIView = () => import('@/views/ELSIView.vue')
 const SponsorsView = () => import('@/views/SponsorsView.vue')
+const StructureDesignView = () => import('@/views/computational-simulation/StructureDesignView.vue')
 const DockingDNASE = () => import('@/views/computational-simulation/DockingDNASE.vue')
 const GroupAView = () => import('@/views/lab-validation/GroupAView.vue')
 const GroupBView = () => import('@/views/lab-validation/GroupBView.vue')
@@ -43,6 +44,11 @@ const router = createRouter({
       name: 'sponsors',
       component: SponsorsView
     },
+    {
+      path: '/computational-simulation/structure-design',
+      name: 'structure-design',
+      component: StructureDesignView
+    },
     {
       path: '/computational-simulation/docking-of-dnase-i',
       name: 'docking-of-dnase-i',