Added pytorch-ignite docs nav bar button (#310)

Author: vfdev-5

src/components/NavBar.vue

@@ -11,7 +11,9 @@
         <span class="pname">Code Generator</span>
       </RouterLink>
     </h1>
-    <div class="left-side-badges">
+    <div class="right-side-badges">
+      <NavIgniteDocs />
+      <NavIgniteWebsite />
       <NavHelp />
       <NavGitHub />
       <NavTwitter />
@@ -24,7 +26,6 @@
       >
         v{{ version }}@{{ currentCommit.slice(0, 7) }}
       </a>
-      <NavIgniteWebsite />
     </div>
   </nav>
 </template>
@@ -36,6 +37,7 @@ import NavDownload from './NavDownload.vue'
 import NavColab from './NavColab.vue'
 import NavGitHub from './NavGitHub.vue'
 import NavIgniteWebsite from './NavIgniteWebsite.vue'
+import NavIgniteDocs from './NavIgniteDocs.vue'
 import NavTwitter from './NavTwitter.vue'
 import NavHelp from './NavHelp.vue'
 
@@ -47,7 +49,8 @@ export default {
     NavGitHub,
     NavIgniteWebsite,
     NavTwitter,
-    NavHelp
+    NavHelp,
+    NavIgniteDocs
   },
   setup() {
     const currentCommit = __COMMIT__ // from vite.config.js
@@ -76,10 +79,10 @@ h1 img {
   justify-content: space-between;
   border-bottom: 1px solid var(--c-white-dark);
 }
-.left-side-badges {
+.right-side-badges {
   display: flex;
-  align-items: center;
-  font-size: 0.9em;
+  align-items: right;
+  font-size: 0.95em;
 }
 /* media queries */
 @media (max-width: 915px) {

src/components/NavIgniteDocs.vue

@@ -0,0 +1,20 @@
+<template>
+  <a
+    class="external-links"
+    href="https://pytorch.org/ignite/engine.html"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    <svg width="1.4em" height="1.4em" viewBox="0 0 240 240" class="icons">
+      <path
+        d="M125,236.82c-30.69,0-56.73-20.71-71.42-56.83-12.9-31.73-1.6-67.37,7-78.55l7.13-9.25,1,11.64c1,11.43,9.06,25.07,16.9,28.63a7.84,7.84,0,0,0,3.55.8C79.41,110.19,81.23,85.85,86,71.41c9-26.9,31.26-45.92,44.05-52.15L136.81,16l-.17,7.46c-.47,21.53.89,39.23,9.1,55.65,5.32,10.64,12.45,21.08,18.73,30.29,1.73,2.53,3.41,5,5,7.37,12,17.94,12.14,36.6,8.32,48.07a60.53,60.53,0,0,1-9.75,17.9c-5.25,6.63-11.47,11.39-18,13.75l-3.1-8.57c10.58-3.83,18.93-16.15,22.2-26,3.14-9.43,2.89-24.93-7.25-40.14-1.57-2.35-3.23-4.78-4.94-7.28-6.45-9.45-13.76-20.16-19.36-31.36-7.94-15.89-10.08-32.44-10.14-51.74-11.21,7.78-26.16,23.08-32.75,42.85-1,3-9.51,30.6,4.68,59.37l1.69,3.44L98,139.36a15.53,15.53,0,0,1-16.12,1.41C73.49,137,66.45,127.08,62.62,117c-5.38,13.93-9.52,37.67-.61,59.58,13.22,32.5,36.17,51.14,63,51.14,27.47,0,51.78-18.88,65-50.49,6.16-14.69,7.17-37.43,2.42-54.07-3.54-12.38-8.82-22.49-17.9-36.75-2.28,4.85-5.43,9.82-8.63,12l-5.06-7.58c2.63-1.75,7.19-11,8.08-15.41l2.16-10.92,6.12,9.3c12.43,18.92,19.56,31.37,24,46.91,5.35,18.72,4.2,43.43-2.78,60.09-6.87,16.4-17,30.25-29.2,40C156.1,231.27,140.8,236.82,125,236.82Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+    <span class="icon-text">PyTorch-Ignite Docs</span>
+  </a>
+</template>
+
+<style scoped>
+@import url('./css/nav-right.css');
+</style>

src/components/NavIgniteWebsite.vue

@@ -8,7 +8,7 @@
     <svg width="1.4em" height="1.4em" viewBox="0 0 240 240" class="icons">
       <path
         d="M125,236.82c-30.69,0-56.73-20.71-71.42-56.83-12.9-31.73-1.6-67.37,7-78.55l7.13-9.25,1,11.64c1,11.43,9.06,25.07,16.9,28.63a7.84,7.84,0,0,0,3.55.8C79.41,110.19,81.23,85.85,86,71.41c9-26.9,31.26-45.92,44.05-52.15L136.81,16l-.17,7.46c-.47,21.53.89,39.23,9.1,55.65,5.32,10.64,12.45,21.08,18.73,30.29,1.73,2.53,3.41,5,5,7.37,12,17.94,12.14,36.6,8.32,48.07a60.53,60.53,0,0,1-9.75,17.9c-5.25,6.63-11.47,11.39-18,13.75l-3.1-8.57c10.58-3.83,18.93-16.15,22.2-26,3.14-9.43,2.89-24.93-7.25-40.14-1.57-2.35-3.23-4.78-4.94-7.28-6.45-9.45-13.76-20.16-19.36-31.36-7.94-15.89-10.08-32.44-10.14-51.74-11.21,7.78-26.16,23.08-32.75,42.85-1,3-9.51,30.6,4.68,59.37l1.69,3.44L98,139.36a15.53,15.53,0,0,1-16.12,1.41C73.49,137,66.45,127.08,62.62,117c-5.38,13.93-9.52,37.67-.61,59.58,13.22,32.5,36.17,51.14,63,51.14,27.47,0,51.78-18.88,65-50.49,6.16-14.69,7.17-37.43,2.42-54.07-3.54-12.38-8.82-22.49-17.9-36.75-2.28,4.85-5.43,9.82-8.63,12l-5.06-7.58c2.63-1.75,7.19-11,8.08-15.41l2.16-10.92,6.12,9.3c12.43,18.92,19.56,31.37,24,46.91,5.35,18.72,4.2,43.43-2.78,60.09-6.87,16.4-17,30.25-29.2,40C156.1,231.27,140.8,236.82,125,236.82Z"
-        fill="currentColor"
+        fill="darkred"
       ></path>
     </svg>
     <span class="icon-text">pytorch-ignite.ai</span>