Update navbar (#211)

* rename svg to fix icon not showing issue

* fix search icon (#202)

* remove cosmos tag on azure-search-openai-demo-csharp(#204)

* Move Django to frameworks (#203)

* add font fallback and move reactjs to tools (#205)

* custom navbar

* add underline when page is selected

* remove templates page

* remove hover color on title

* switch order

* Keep templates bar

* not having templates page for now

website/docusaurus.config.js

@@ -74,16 +74,21 @@ const config = {
           height: 32,
         },
         items: [
+          // {
+          //   href: "/",
+          //   label: "Templates",
+          //   position: "left",
+          // },
           {
-            href: "/",
-            label: "Templates",
+            to: "/about",
+            label: "Getting Started",
             position: "left",
           },
-
           {
-            to: "/about",
-            label: "Getting Started",
+            label: "Contribute",
             position: "left",
+            type: "doc",
+            docId: "intro",
           },
           {
             to: "https://learn.microsoft.com/azure/developer/azure-developer-cli/",
@@ -95,13 +100,8 @@ const config = {
             label: "Resources",
             position: "left",
           },
-          {
-            label: "Contribute",
-            position: "left",
-            type: "doc",
-            docId: "intro",
-          },
 
+          // right
           {
             href: "https://github.com/Azure/repo/awesome-azd",
             position: "right",
@@ -121,6 +121,19 @@ const config = {
               color: "white",
             },
           },
+
+          // CONFIG:
+          // Make sure you have class defined in src/css/custom.css
+          {
+            to: "https://azure.github.io/awesome-azd/docs/intro",
+            label: "Submit your template!",
+            position: "right",
+            className: "button",
+            style: {
+              backgroundColor: "#7160E8",
+              color: "white",
+            },
+          },
         ],
       },
 
@@ -205,6 +218,9 @@ const config = {
         theme: {
           customCss: require.resolve("./src/css/custom.css"),
         },
+        theme: {
+          customCss: require.resolve("./src/css/custom.css"),
+        },
       }),
     ],
   ],

website/src/css/custom.css

@@ -27,18 +27,12 @@
   text-decoration-thickness: 4px;
 }
 
-/* .navbar .navbar__inner .navbar__items .navbar_item .navbar__link .templatePage{
-  text-decoration-line: underline;
-  text-underline-offset: 20px;
-  text-decoration-thickness: 4px;
-} */
-
-.templatePage:hover::before{
-  text-decoration-line: underline;
-  text-underline-offset: 20px;
-  text-decoration-thickness: 4px;
-  color:var(--ifm-color-primary);
+.navbar .navbar__inner .navbar__items .navbar__brand:hover{
+  color:black;
+}
 
+[data-theme='dark'] .navbar .navbar__inner .navbar__items .navbar__brand:hover{
+  color:white;
 }
 
 .header-github-link:hover {