use SVG for boxing

src/components/BoxCorner.vue

@@ -0,0 +1,35 @@
+<template>
+    <svg
+        class="boxing box-corner"
+        fill="none"
+        :viewBox="`0 0 ${width} ${height}`"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+            :d="`M 0 ${height / 2} h ${width / 2} v ${-height / 2}`"
+            stroke="currentColor"
+            :stroke-width="strokeWidth" />
+    </svg>
+</template>
+
+<script lang="ts" setup>
+    defineProps({
+        height: {
+            default: 28,
+            type: Number,
+        },
+        strokeWidth: {
+            default: 2,
+            type: Number,
+        },
+        width: {
+            default: 24,
+            type: Number,
+        },
+    })
+</script>
+
+<style scoped>
+    svg {
+        vertical-align: middle;
+    }
+</style>

src/components/BoxJoin.vue

@@ -0,0 +1,45 @@
+<template>
+    <svg
+        class="boxing box-join"
+        fill="none"
+        :viewBox="`0 0 ${width} ${height}`"
+        xmlns="http://www.w3.org/2000/svg">
+        <line
+            x1="0"
+            :x2="width / 2"
+            :y1="height / 2"
+            :y2="height / 2"
+            stroke="currentColor"
+            :stroke-width="strokeWidth" />
+        <line
+            :x1="width / 2"
+            :x2="width / 2"
+            y1="0"
+            :y2="height"
+            stroke="currentColor"
+            :stroke-width="strokeWidth" />
+    </svg>
+</template>
+
+<script lang="ts" setup>
+    defineProps({
+        height: {
+            default: 28,
+            type: Number,
+        },
+        strokeWidth: {
+            default: 2,
+            type: Number,
+        },
+        width: {
+            default: 24,
+            type: Number,
+        },
+    })
+</script>
+
+<style scoped>
+    svg {
+        vertical-align: middle;
+    }
+</style>

src/views/minor/NavBar.vue

@@ -33,11 +33,15 @@
                             <div class="leftdented">
                                 <a class="nav-link" :href="vizLink()">
                                     {{ specimen.visualizerName() }}
-                                    Visualizer </a>┤
+                                    Visualizer
+                                </a>
+                                <BoxJoin />
                             </div>
                             <div class="leftdented tweakup">
                                 <a class="nav-link" :href="seqLink()">
-                                    {{ seqWord() }} Sequence </a>┘
+                                    {{ seqWord() }} Sequence
+                                </a>
+                                <BoxCorner />
                             </div>
                             <div class="nav-link">
                                 <a href="/doc/">Full Documentation</a>
@@ -58,6 +62,8 @@
 
     import LogoWithMicroscope from '@/assets/img/logo.svg'
     import type {Specimen} from '@/shared/Specimen'
+    import BoxJoin from '@/components/BoxJoin.vue'
+    import BoxCorner from '@/components/BoxCorner.vue'
 
     const props = defineProps({
         specimen: {
@@ -190,18 +196,29 @@
                     border: 1px solid var(--ns-color-black);
 
                     .leftdented {
-                        padding-right: 0.5em;
+                        display: flex;
+                        align-items: center;
                     }
 
-                    .tweakup {
-                        position: relative;
-                        bottom: 6px;
+                    .boxing {
+                        --width: 24px;
+
+                        margin-left: 0.5ex;
+                        margin-right: calc(0.5em - var(--width) / 2 + 2px);
+                        width: var(--width);
+
+                        /* looks better visually */
+                        margin-bottom: -1.5px;
                     }
 
                     .nav-link {
                         color: var(--ns-color-black);
                         padding-top: 0ex;
                         padding-bottom: 0ex;
+                        margin: 0;
+
+                        /* for aligning with the boxing */
+                        line-height: 1;
                     }
 
                     a {