feat: Product Selector

visual-kpi-docs/docusaurus.config.js

@@ -175,6 +175,22 @@ const config = {
             position: 'right',
             className: 'navbar_link_buttons support_btn'
           },
+          {
+            type: 'dropdown',
+            className: 'product_dropdown',
+            label: 'Products',
+            position: 'left',
+            items: [
+              {
+                label: 'VisualKPI',
+                href: '/'
+              },
+              {
+                label: 'Transpara',
+                href: 'https://www.transpara.com/',
+              },
+            ]
+          }
           // {
           //   to: 'https://www.transpara.com/',
           //   label: 'Learn more',

visual-kpi-docs/src/css/navbar.css

@@ -14,7 +14,7 @@
 }
 
 .navbar__brand {
-  margin-right: 50px;
+  margin-right: 10px;
 }
 
 .navbar__items .navbar__link,
@@ -54,6 +54,12 @@
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
 }
 
+.navbar__item.navbar__link.navbar__link--active:not(.home_btn),
+.highlight_home {
+  border-radius: 8px;
+  background-color: #eff2e6 !important;
+}
+
 .support_btn:before {
   display: flex;
   content: "";
@@ -153,12 +159,31 @@
 
 .navbar__link {
   transition: all 0.2s ease !important;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 3px 10px;
 }
 
 .navbar__link:hover {
   border-radius: 6px;
   background: #eff2e6;
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.076);
+  border-radius: 8px;
+  text-decoration: none;
+}
+
+.dropdown > .navbar__link:after {
+  top: 9px;
+  color: #000;
+  height: 16px;
+  width: 16px;
+  margin-left: 6px;
+  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTMuNjYsMTAxLjY2bC04MCw4MGE4LDgsMCwwLDEtMTEuMzIsMGwtODAtODBBOCw4LDAsMCwxLDUzLjY2LDkwLjM0TDEyOCwxNjQuNjlsNzQuMzQtNzQuMzVhOCw4LDAsMCwxLDExLjMyLDExLjMyWiI+PC9wYXRoPjwvc3ZnPg==");
+}
+
+a.dropdown__link svg,
+a.menu__link svg {
+  display: none;
 }
 
 .aa-DetachedSearchButton {
@@ -253,3 +278,17 @@
     display: none !important;
   }
 }
+
+/* .dropdown__menu {
+  background-color: var(--navbar-background-color);
+  border: var(--border-thin) var(--main-border-color);
+} */
+
+.dropdown__link--active,
+.dropdown__link--active:hover {
+  background-color: #fff !important;
+}
+
+.dropdown__link:hover {
+  background: #eff2e6 !important;
+}

visual-kpi-docs/src/pages/index.jsx

@@ -1,32 +1,34 @@
-import React from 'react';
+import React, { useEffect } from "react";
 // import clsx from 'clsx';
 // import Link from '@docusaurus/Link';
 // import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
+import Layout from "@theme/Layout";
 // import Translate, { translate } from '@docusaurus/Translate';
 
 // import styles from './index.module.css';
-import '../css/HomePage.css';
-import '../css/sidebar.css';
-import '../css/navbar.css';
-import '../css/svg.css';
-import '../css/callout.css';
-import '../css/iconCards.css';
-import '../css/linkCards.css';
-import HomepageHeader from '../components/Homepage/Header';
-import Card from '../components/Homepage/Card';
+import "../css/HomePage.css";
+import "../css/sidebar.css";
+import "../css/navbar.css";
+import "../css/svg.css";
+import "../css/callout.css";
+import "../css/iconCards.css";
+import "../css/linkCards.css";
+import HomepageHeader from "../components/Homepage/Header";
+import Card from "../components/Homepage/Card";
 
 const mainCard = {
   title: "How to use the documentation",
-  content: "Find out all available user paths Visual KPI documentation provides. Here you get a complete overvier of what you find on the documentation and how to take the most of it.",
+  content:
+    "Find out all available user paths Visual KPI documentation provides. Here you get a complete overvier of what you find on the documentation and how to take the most of it.",
   button: "Learn more",
   route: "/docs/how-to-use-the-documentation",
-}
+};
 
 const essentials = [
   {
     title: "Setup and automation",
-    content: "Configure your system for Visual KPI software instalattion and importing your existing KPIs.",
+    content:
+      "Configure your system for Visual KPI software instalattion and importing your existing KPIs.",
     button: "Learn more",
     route: "/docs/",
   },
@@ -38,14 +40,16 @@ const essentials = [
   // },
   {
     title: "Design",
-    content: "Create KPIs, charts, tables and define the hierarchy of your data.",
+    content:
+      "Create KPIs, charts, tables and define the hierarchy of your data.",
     button: "Learn more",
     route: "/docs/",
     imageClass: "image1",
   },
   {
     title: "Use Visual KPI",
-    content: "Explore all features and functionalities available on Visual KPI.",
+    content:
+      "Explore all features and functionalities available on Visual KPI.",
     title: "Tutorial",
     content: "Here you find a tutorial.",
     button: "Learn more",
@@ -58,8 +62,8 @@ const essentials = [
     button: "Learn more",
     route: "/docs/",
     imageClass: "image3",
-  }
-]
+  },
+];
 
 const allOptions = [
   {
@@ -76,23 +80,26 @@ const allOptions = [
   },
   {
     title: "Interfaces",
-    content: "Use existing interfaces or create new ones to connect new data sources into your system.",
+    content:
+      "Use existing interfaces or create new ones to connect new data sources into your system.",
     button: "Learn more",
     route: "/docs/",
   },
   {
     title: "Design",
-    content: "Create KPIs, charts, tables and define the hierarchy of your data.",
+    content:
+      "Create KPIs, charts, tables and define the hierarchy of your data.",
     button: "Learn more",
     route: "/docs/",
   },
   {
     title: "Use Visual KPI",
-    content: "Explore all features and functionalities available on Visual KPI.",
+    content:
+      "Explore all features and functionalities available on Visual KPI.",
     button: "Learn more",
     route: "/docs/",
-  }
-]
+  },
+];
 
 const first3Cards = [
   {
@@ -111,29 +118,30 @@ const first3Cards = [
   },
   {
     title: "Interfaces",
-    content: "Use existing interfaces or create new ones to connect new data sources into your system.",
+    content:
+      "Use existing interfaces or create new ones to connect new data sources into your system.",
     button: "Learn more",
     route: "/docs/",
     imageClass: "image3",
   },
-]
+];
 
 const otherUSers = [
   {
     title: "Design",
-    content: "Create KPIs, charts, tables and define the hierarchy of your data.",
+    content:
+      "Create KPIs, charts, tables and define the hierarchy of your data.",
     button: "Learn more",
     route: "/docs/",
   },
   {
     title: "Use Visual KPI",
-    content: "Explore all features and functionalities available on Visual KPI.",
+    content:
+      "Explore all features and functionalities available on Visual KPI.",
     button: "Learn more",
     route: "/docs/",
-  }
-]
-
-
+  },
+];
 
 const second2Cards = [
   {
@@ -150,7 +158,7 @@ const second2Cards = [
     route: "/docs/",
     imageClass: "image5",
   },
-]
+];
 
 const cardsContent = [
   /*{
@@ -162,19 +170,22 @@ const cardsContent = [
   },*/
   {
     title: "Use Visual KPI",
-    content: "Explore all features and functionalities available on Visual KPI.",
+    content:
+      "Explore all features and functionalities available on Visual KPI.",
     route: "/docs/end-user/overview",
     imageClass: "image1",
   },
   {
     title: "Design",
-    content: "Create KPIs, charts, tables and define the hierarchy of your data.",
+    content:
+      "Create KPIs, charts, tables and define the hierarchy of your data.",
     route: "/docs/visual-kpi-design/overview",
     imageClass: "image3",
   },
   {
     title: "Interfaces",
-    content: "Use existing interfaces or create new ones to connect new data sources into your system.",
+    content:
+      "Use existing interfaces or create new ones to connect new data sources into your system.",
     button: "Learn more",
     route: "/docs/setup-and-administration/interfaces",
     imageClass: "image2",
@@ -197,22 +208,31 @@ const cardsContent = [
     route: "/docs/faqs/",
     imageClass: "image6",
   },
-]
+];
 
 export default function Home() {
   // const {siteConfig} = useDocusaurusContext();
+
+  useEffect(() => {
+    const homeBtn = document.querySelector(".home_btn");
+
+    if (location.pathname === "/") {
+      homeBtn?.classList.add("highlight_home");
+    } else if (location.pathname !== "/") {
+      homeBtn?.classList.remove("highlight_home");
+    }
+  }, [location.pathname]);
   return (
     <Layout
-      title={'Docs'}
-      description="Description will go into a meta tag in <head />">
+      title={"Docs"}
+      description="Description will go into a meta tag in <head />"
+    >
       <HomepageHeader />
       <main>
         <div className="cards_container first_cards_section">
-          {
-            [...cardsContent].map((card) => (
-              <Card key={card.title} card={ card } className="card"/>
-            ))
-          }
+          {[...cardsContent].map((card) => (
+            <Card key={card.title} card={card} className="card" />
+          ))}
         </div>
       </main>
     </Layout>

visual-kpi-docs/src/theme/DocBreadcrumbs/Items/Home/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import {translate} from '@docusaurus/Translate';
+import styles from './styles.module.css';
+import { House } from "@phosphor-icons/react";
+
+export default function HomeBreadcrumbItem() {
+  const homeHref = useBaseUrl('/');
+  return (
+    <li className="breadcrumbs__item">
+      <Link
+        aria-label={translate({
+          id: 'theme.docs.breadcrumbs.home',
+          message: 'Home page',
+          description: 'The ARIA label for the home page in the breadcrumbs',
+        })}
+        className="breadcrumbs__link"
+        href={homeHref}>
+        <House className={styles.breadcrumbHomeIcon} weight="bold" />
+      </Link>
+    </li>
+  );
+}

visual-kpi-docs/src/theme/DocBreadcrumbs/Items/Home/styles.module.css

@@ -0,0 +1,7 @@
+.breadcrumbHomeIcon {
+  position: relative;
+  top: 1px;
+  vertical-align: top;
+  height: 1.1rem;
+  width: 1.1rem;
+}

visual-kpi-docs/src/theme/Navbar/Content/index.js

@@ -48,6 +48,8 @@ export default function NavbarContent() {
   const items = useNavbarItems();
   const [leftItems, rightItems] = splitNavbarItems(items);
   const searchBarItem = items.find((item) => item.type === 'search');
+  const left = leftItems.filter((item) => item.className === 'product_dropdown');
+
   return (
     <div>
     <NavbarContentLayout
@@ -56,7 +58,7 @@ export default function NavbarContent() {
         <>
           {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
           <NavbarLogo />
-          {/* <NavbarItems items={leftItems} /> */}
+          <NavbarItems items={left} />
         </>
       }
       right={

visual-kpi-docs/src/theme/Navbar/Content/navbarSecondLine.js

@@ -39,13 +39,14 @@ function NavbarContentLayout({left}) {
 export default function NavbarSecondLine() {
   const items = useNavbarItems();
   const [leftItems] = splitNavbarItems(items);
+
+  const left = leftItems.filter((item) => item.className !== 'product_dropdown')
   return (
     <div className="navbar_second_line">
     <NavbarContentLayout
       left={
-        // TODO stop hardcoding items?
         <>
-          <NavbarItems items={leftItems} />
+          <NavbarItems items={left} />
         </>
       }
     />