update(docs): styling of sidebar and header

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

update(docs): target server generation

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

docs/assets/index.css

@@ -1,4 +1,3 @@
-#root,
 #__nuxt {
   text-transform: uppercase;
   font-family: 'JetBrains Mono', monospace;
@@ -11,8 +10,8 @@
 
 html,
 body,
-#root,
 #__nuxt {
+  position: relative;
   margin: 0;
   height: 100%;
   color: #111;
@@ -22,40 +21,13 @@ body,
   background-image: url('./polygon-scatter.svg');
 }
 
-#__nuxt {
-  position: relative;
-}
-
 .backround-img {
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   background-image: url('./polygon-scatter.svg');
 }
 
-#root {
-  display: flex;
-  flex-direction: column;
-}
-
-header {
-  font-weight: 700;
-}
-
-.logo {
-  text-decoration: none;
-  display: block;
-  line-height: 1;
-}
-
-header a:hover {
-  color: #c9c9c9;
-}
-
-header select {
-  margin-left: 1em;
-}
-
 .overview-example__add {
   display: none;
 }
@@ -93,18 +65,8 @@ header select {
   }
 }
 
-.edgebutton {
-  border-radius: 999px;
-  cursor: pointer;
-}
-.edgebutton:hover {
-  box-shadow: 0 0 0 2px pink , 0 0 0 4px #f05f75;
-}
-
 #vue-flow-docs {
-  display: flex;
-  margin:0;
-  background: #fff;
+  @apply flex m-0 bg-white h-full;
 }
 
 .button {

docs/components/Header.vue

@@ -1,16 +1,33 @@
 <template>
-  <header class="flex items-center py-4 px-8 text-white">
+  <header class="flex border-b-1 border-black border-solid items-center py-4 px-8 font-semibold text-white">
     <div class="flex flex-col">
       <a class="logo text-xl" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow </a>
       <span class="text-xs text-gray-800 mt-2"
         >An open source library by <a href="https://github.com/bcakmakoglu/bcakmakoglu">Braks</a> <br />
         Based on <a href="https://reactflow.dev">React Flow</a>
       </span>
     </div>
-    <div class="flex-1">Docs</div>
+    <div class="flex-1"><span class="button text-gray-400">Docs</span></div>
     <div class="flex-1">
-      <router-link to="/examples"> Examples </router-link>
+      <router-link class="link" to="/examples"> Examples</router-link>
     </div>
-    <div class="flex-1"><a href="https://github.com/bcakmakoglu/vue-flow">Github</a></div>
+    <div class="flex-1"><a class="link" href="https://github.com/bcakmakoglu/vue-flow">Github</a></div>
   </header>
 </template>
+<style scoped>
+a {
+  @apply hover:text-gray-300;
+}
+
+.logo {
+  text-decoration: none;
+  display: block;
+  line-height: 1;
+}
+.link {
+  @apply bg-gray-200 rounded-lg px-4 py-2 !hover:text-yellow-500 text-black;
+}
+.router-link-active {
+  @apply rounded-lg bg-white font-semibold text-yellow-500;
+}
+</style>

docs/components/Sidebar.vue

@@ -44,10 +44,13 @@ const examples = [
     path: '/interaction',
     label: 'Interaction',
   },
+  /*
+  todo: layouting example not working with dagre for some reason so it's disabled for now
   {
     path: '/layouting',
     label: 'Layouting',
   },
+   */
   {
     path: '/multi-flows',
     label: 'Multi Flows',
@@ -104,28 +107,24 @@ const examples = [
 </script>
 <template>
   <aside>
-    <div class="flex flex-col justify-center items-start">
-      <router-link
-        v-for="(example, i) of examples"
-        :key="`example-link-${i}`"
-        class="example-link"
-        :to="`/examples${example.path}`"
-      >
-        {{ example.label }}
+    <div class="flex flex-col text-left items-start">
+      <router-link v-for="(e, i) of examples" :key="`example-link-${i}`" class="example-link" :to="`/examples${e.path}`">
+        {{ e.label }}
       </router-link>
     </div>
     <slot></slot>
   </aside>
 </template>
-<style>
+<style scoped>
 .example-link {
-  @apply text-lg text-white hover:text-black py-2 underline;
+  @apply w-full text-lg text-white hover:text-yellow-500 px-3 py-2;
+}
+.router-link-active {
+  @apply rounded-lg bg-white font-semibold text-yellow-500;
 }
 aside {
-  border-right: 1px solid #eee;
-  padding: 15px 10px;
-  height: 100%; /* Full-height: remove this if you want "auto" height */
-  width: 280px; /* Set the width of the sidebar */
+  @apply w-[280px] h-full px-[10px] py-[15px];
+  background: rgba(0, 0, 0, 0.25);
   overflow-x: hidden; /* Disable horizontal scroll */
 }
 </style>

docs/nuxt.config.ts

@@ -18,6 +18,7 @@ export default defineNuxtConfig({
       preserveSymlinks: false,
     },
   },
+  target: 'server',
   ssr: true,
   buildModules: ['nuxt-windicss'],
 })

examples/EdgeWithButton/ButtonEdge.vue

@@ -73,3 +73,12 @@ const center = computed(() =>
     </body>
   </foreignObject>
 </template>
+<style>
+.edgebutton {
+  border-radius: 999px;
+  cursor: pointer;
+}
+.edgebutton:hover {
+  box-shadow: 0 0 0 2px pink, 0 0 0 4px #f05f75;
+}
+</style>

examples/index.css

@@ -90,11 +90,3 @@ header select {
     display: block;
   }
 }
-
-.edgebutton {
-  border-radius: 999px;
-  cursor: pointer;
-}
-.edgebutton:hover {
-  box-shadow: 0 0 0 2px pink , 0 0 0 4px #f05f75;
-}