add underline when page is selected

Azure · Oct 10, 2023 · b838abc · b838abc
1 parent 239bd8f
commit b838abc
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 60 deletions.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -74,9 +74,17 @@ const config = {
           height: 32,
         },
         items: [
-          { href: "/", label: "Templates", position: "left" },
+          {
+            href: "/",
+            label: "Templates",
+            position: "left",
+          },
 
-          { to: "/about", label: "Getting Started", position: "left" },
+          {
+            to: "/about",
+            label: "Getting Started",
+            position: "left",
+          },
           {
             to: "https://learn.microsoft.com/azure/developer/azure-developer-cli/",
             label: "Docs",
@@ -94,6 +102,13 @@ const config = {
             docId: "intro",
           },
 
+          {
+            href: "https://github.com/Azure/repo/awesome-azd",
+            position: "right",
+            className: "header-github-link",
+            "aria-label": "GitHub repository",
+          },
+
           // CONFIG:
           // Make sure you have class defined in src/css/custom.css
           {
@@ -187,9 +202,9 @@ const config = {
 
         // CONFIG: theme = currently using `classic`
         //    See: https://docusaurus.io/docs/api/themes/@docusaurus/theme-classic
-        // theme: {
-        //   customCss: require.resolve('./src/css/custom.css'),
-        // },
+        theme: {
+          customCss: require.resolve("./src/css/custom.css"),
+        },
       }),
     ],
   ],

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -6,7 +6,7 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #245e94;
+  --ifm-color-primary: #7160E8;
   --ifm-color-primary-dark: #205585;
   --ifm-color-primary-darker: #1f507e;
   --ifm-color-primary-darkest: #194268;
@@ -17,26 +17,61 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
+.navbar{
+  font-size: 16px;
+}
+
+.navbar .navbar__inner .navbar__items .navbar__link--active{
+  text-decoration-line: underline;
+  text-underline-offset: 20px;
+  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);
+
+}
+
+.header-github-link:hover {
+  opacity: 0.6;
+}
+
+.header-github-link:before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+}
+
+html[data-theme='dark'] .header-github-link:before {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+}
+
 /* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
-  --ifm-color-primary: #33d4f4;
+/* [data-theme='dark'] {
+  --ifm-color-primary: #7160E8;
   --ifm-color-primary-dark: #17cef2;
   --ifm-color-primary-darker: #0dc9ee;
   --ifm-color-primary-darkest: #0ba5c4;
   --ifm-color-primary-light: #4fdaf6;
   --ifm-color-primary-lighter: #5dddf6;
   --ifm-color-primary-lightest: #87e6f9;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-}
+} */
 
 /* For readability - FIXME: is there a better way to handle it? */
-[data-theme='dark'] .navbar__brand {
-  color: black;
-}
-[data-theme='dark'] .navbar__link {
-  color: black;
-}
-
 .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.1);
   display: block;

diff --git a/website/src/pages/about/index.module.css b/website/src/pages/about/index.module.css
@@ -8,6 +8,8 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  background-color: #245e94;
+  color:#245e94;
 }
 
 @media screen and (max-width: 996px) {

diff --git a/website/src/theme/Navbar/Content/index.js b/website/src/theme/Navbar/Content/index.js
@@ -15,8 +15,6 @@ import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle";
 import NavbarLogo from "@theme/Navbar/Logo";
 import NavbarSearch from "@theme/Navbar/Search";
 import styles from "./styles.module.css";
-import clsx from "clsx";
-import useBaseUrl from "@docusaurus/useBaseUrl";
 function useNavbarItems() {
   // TODO temporary casting until ThemeConfig type is improved
   return useThemeConfig().navbar.items;
@@ -55,19 +53,13 @@ export default function NavbarContent() {
   const items = useNavbarItems();
   const [leftItems, rightItems] = splitNavbarItems(items);
   const searchBarItem = items.find((item) => item.type === "search");
-  const { colorMode, setColorMode } = useColorMode();
   return (
     <NavbarContentLayout
       left={
         // TODO stop hardcoding items?
         <>
           {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
           <NavbarLogo />
-          {colorMode != "dark" ? (
-            <div style={{ borderLeft: "1px solid black", height: "25px" }} />
-          ) : (
-            <div style={{ borderLeft: "1px solid white", height: "25px" }} />
-          )}
           <NavbarItems items={leftItems} />
         </>
       }
@@ -76,22 +68,6 @@ export default function NavbarContent() {
         // Ask the user to add the respective navbar items => more flexible
         <>
           <NavbarColorModeToggle className={styles.colorModeToggle} />
-          <div style={{ padding: "0 12px" }}>
-            <button
-              className={clsx("clean-btn", styles.colorModeToggle)}
-              onClick={() => {
-                window.open("https://github.com/Azure/awesome-azd", "_blank");
-              }}
-              value={colorMode}
-              onChange={setColorMode}
-            >
-              {colorMode != "dark" ? (
-                <img src={useBaseUrl("/img/githubLight.svg")} alt="Github" />
-              ) : (
-                <img src={useBaseUrl("/img/github.svg")} alt="Github" />
-              )}
-            </button>
-          </div>
           <NavbarItems items={rightItems} />
           {!searchBarItem && (
             <NavbarSearch>

diff --git a/website/static/img/github.svg b/website/static/img/github.svg
diff --git a/website/static/img/githubLight.svg b/website/static/img/githubLight.svg