From 289fae29847fa3ecb4e1d3fdf0ce56db2d4ce6fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20Gon=C3=A7alves?= Date: Wed, 23 Oct 2024 10:41:32 -0300 Subject: [PATCH 1/4] feat: adds highlight to selected navbar item --- visual-kpi-docs/src/css/navbar.css | 6 ++ visual-kpi-docs/src/pages/index.jsx | 106 +++++++++++++++++----------- 2 files changed, 69 insertions(+), 43 deletions(-) diff --git a/visual-kpi-docs/src/css/navbar.css b/visual-kpi-docs/src/css/navbar.css index bd6e7a5e..3d2ed394 100644 --- a/visual-kpi-docs/src/css/navbar.css +++ b/visual-kpi-docs/src/css/navbar.css @@ -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: ""; diff --git a/visual-kpi-docs/src/pages/index.jsx b/visual-kpi-docs/src/pages/index.jsx index 79444be0..5d8bb0d1 100644 --- a/visual-kpi-docs/src/pages/index.jsx +++ b/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 ( + title={"Docs"} + description="Description will go into a meta tag in " + >
- { - [...cardsContent].map((card) => ( - - )) - } + {[...cardsContent].map((card) => ( + + ))}
From 6018cbf4b117f3884a1eebc6f8d1a3c0b42cddd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20Gon=C3=A7alves?= Date: Wed, 23 Oct 2024 12:07:06 -0300 Subject: [PATCH 2/4] feat: adds dropdown on navbar top line --- visual-kpi-docs/docusaurus.config.js | 16 +++++++++ visual-kpi-docs/src/css/navbar.css | 33 +++++++++++++++++++ .../theme/DocBreadcrumbs/Items/Home/index.js | 24 ++++++++++++++ .../Items/Home/styles.module.css | 7 ++++ .../src/theme/Navbar/Content/index.js | 4 ++- .../theme/Navbar/Content/navbarSecondLine.js | 5 +-- 6 files changed, 86 insertions(+), 3 deletions(-) create mode 100644 visual-kpi-docs/src/theme/DocBreadcrumbs/Items/Home/index.js create mode 100644 visual-kpi-docs/src/theme/DocBreadcrumbs/Items/Home/styles.module.css diff --git a/visual-kpi-docs/docusaurus.config.js b/visual-kpi-docs/docusaurus.config.js index f290fe98..059aa40d 100644 --- a/visual-kpi-docs/docusaurus.config.js +++ b/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', diff --git a/visual-kpi-docs/src/css/navbar.css b/visual-kpi-docs/src/css/navbar.css index 3d2ed394..a9440a57 100644 --- a/visual-kpi-docs/src/css/navbar.css +++ b/visual-kpi-docs/src/css/navbar.css @@ -159,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 { @@ -259,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; +} diff --git a/visual-kpi-docs/src/theme/DocBreadcrumbs/Items/Home/index.js b/visual-kpi-docs/src/theme/DocBreadcrumbs/Items/Home/index.js new file mode 100644 index 00000000..04c968e5 --- /dev/null +++ b/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 ( +
  • + + + +
    • + ); +} diff --git a/visual-kpi-docs/src/theme/DocBreadcrumbs/Items/Home/styles.module.css b/visual-kpi-docs/src/theme/DocBreadcrumbs/Items/Home/styles.module.css new file mode 100644 index 00000000..533d7648 --- /dev/null +++ b/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; +} diff --git a/visual-kpi-docs/src/theme/Navbar/Content/index.js b/visual-kpi-docs/src/theme/Navbar/Content/index.js index a30712bb..b21b5beb 100644 --- a/visual-kpi-docs/src/theme/Navbar/Content/index.js +++ b/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.find((item) => item.className === 'product_dropdown'); + return (
    {!mobileSidebar.disabled && } - {/* */} + } right={ diff --git a/visual-kpi-docs/src/theme/Navbar/Content/navbarSecondLine.js b/visual-kpi-docs/src/theme/Navbar/Content/navbarSecondLine.js index f20bf210..31eaa2aa 100644 --- a/visual-kpi-docs/src/theme/Navbar/Content/navbarSecondLine.js +++ b/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 (
    - + } /> From ddea093d33c0b25ef32801d1b7761aa90c8239e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20Gon=C3=A7alves?= Date: Wed, 23 Oct 2024 15:37:10 -0300 Subject: [PATCH 3/4] Update index.js --- visual-kpi-docs/src/theme/Navbar/Content/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/visual-kpi-docs/src/theme/Navbar/Content/index.js b/visual-kpi-docs/src/theme/Navbar/Content/index.js index b21b5beb..1713fec8 100644 --- a/visual-kpi-docs/src/theme/Navbar/Content/index.js +++ b/visual-kpi-docs/src/theme/Navbar/Content/index.js @@ -48,7 +48,7 @@ export default function NavbarContent() { const items = useNavbarItems(); const [leftItems, rightItems] = splitNavbarItems(items); const searchBarItem = items.find((item) => item.type === 'search'); - const left = leftItems.find((item) => item.className === 'product_dropdown'); + const left = leftItems.filter((item) => item.className === 'product_dropdown'); return (
    @@ -58,7 +58,7 @@ export default function NavbarContent() { <> {!mobileSidebar.disabled && } - + } right={ From d2aae55ccd787eba03856b13b4fee7214806c86b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gabriel=20Gon=C3=A7alves?= Date: Wed, 23 Oct 2024 15:42:20 -0300 Subject: [PATCH 4/4] Update navbar.css --- visual-kpi-docs/src/css/navbar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/visual-kpi-docs/src/css/navbar.css b/visual-kpi-docs/src/css/navbar.css index a9440a57..6c35335b 100644 --- a/visual-kpi-docs/src/css/navbar.css +++ b/visual-kpi-docs/src/css/navbar.css @@ -14,7 +14,7 @@ } .navbar__brand { - margin-right: 50px; + margin-right: 10px; } .navbar__items .navbar__link,