diff --git a/docusaurus.config.js b/docusaurus.config.js index e84b8bafdf..56d377f4d3 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -439,29 +439,38 @@ module.exports = { alt: 'Sign up for a Sumo Logic free trial', }, { - to: 'https://support.sumologic.com/support/s', position: 'right', - className: 'header-support', - alt: 'Contact Sumo Logic support', - }, - { - position: 'right', - className: 'header-github-link', + className: 'support-menu-trigger', + to: '#', type: 'dropdown', - 'aria-label': 'GitHub repository', - to: 'https://github.com/SumoLogic/sumologic-documentation', - items:[ + items: [ + { + label: 'Contact Support', + to: 'https://support.sumologic.com/support/s', + icon: 'support', + }, + { + label: 'Request Demo', + to: 'https://www.sumologic.com/demos', + icon: 'co_present', + }, { - label: 'Send Feedback', + label: 'Submit Feedback', to: 'https://github.com/SumoLogic/sumologic-documentation/issues/new/choose', - icon: 'rate_review', + icon: 'thumbs_up_down', }, { label: 'Contribute to Docs', - href: '/docs/contributing', + to: 'docs/contributing', icon: 'edit_note', }, - ] + ], + }, + { + className: 'header-github-link', + to: 'https://github.com/SumoLogic/sumologic-documentation', + position: 'right', + alt: 'Link to Sumo Logic Docs GitHub repository', }, ], }, diff --git a/src/css/sumo.scss b/src/css/sumo.scss index 0667f25856..2de1c14f83 100644 --- a/src/css/sumo.scss +++ b/src/css/sumo.scss @@ -227,14 +227,15 @@ html[data-theme='light'] { min-width: 100px; } +//GitHub icon .header-github-link:hover { opacity: 0.6; } .header-github-link::before { content: ''; - width: 24px; - height: 24px; + width: 22px; + height: 22px; margin-top: 7px; display: inline-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") @@ -251,77 +252,136 @@ html[data-theme='light'] { no-repeat; } -//Free Trial nav button - -.header-trial:hover { - opacity: 0.85; -} -.header-trial::before { - content: 'START FREE TRIAL'; - border: 1px solid #2aa1e6; - color: #FFF; +/* General styling for the Support dropdown button */ +.support-menu-trigger { + display: flex; + align-items: center; + cursor: pointer; + color: white !important; /* Text color should be white */ + border: 1px solid rgba(255, 255, 255, 0.2); /* Border matching the style */ border-radius: 3px; padding: 5px 15px; font-size: 13px; font-weight: 600; - display: inline-flex; - background: #2aa1e6; - margin-right: -20px; + background-color: #2c3e50; /* Dark background color similar to "Demo" */ + margin-left: 8px; /* Space between text and the arrow */ } -.header-trial::after { - display: none !important; - content: none !important; +/* Add hover effect similar to the "Demo" button */ +.support-menu-trigger:hover { + background-color: #34495e; /* Slightly lighter on hover */ + border-color: rgba(255, 255, 255, 0.5); /* Change border color on hover */ } -[data-theme='dark'] .header-trial::before { - background: transparent; - border: 1px solid #2aa1e6; - color: #FFF; - border-radius: 3px; - padding: 5px 15px; +/* Add the button text using ::before if not present */ +.support-menu-trigger::before { + content: 'Support'; /* Replace with your desired text */ font-size: 13px; - font-weight: 600; - display: inline-flex; - background: #2aa1e6; - margin-right: -20px; + color: white; /* Set the text color to white */ + margin-right: 8px; /* Space between text and the arrow */ } -//Contact Support nav button -.header-support:hover { - opacity: 0.65; +/* Styling the arrow (SVG) */ +.support-menu-trigger svg { + width: 9px; + height: 6px; + fill: none; + stroke: white; /* Make the arrow white by default */ } -.header-support::before { - content: 'CONTACT SUPPORT'; - background: transparent; - border: 1px solid #000; - color: var(--ifm-navbar-link-color); +/* Media query for light mode */ +@media (prefers-color-scheme: light) { + .support-menu-trigger { + stroke: white; + border-color: black; /* Darker border for light mode */ + } +} + +/* Media query for dark mode */ +@media (prefers-color-scheme: dark) { + .support-menu-trigger svg { + stroke: white; /* Ensure the arrow is white for dark mode */ + } +} + +/* Style the dropdown wrapper */ +.support-menu-wrapper { + display: none; + flex-direction: column; + position: absolute; + background-color: #34495e; /* Background color for dropdown */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border-radius: 4px; + margin-top: 8px; +} + +/* Show the dropdown when open */ +.support-menu[open] .support-menu-wrapper { + display: flex; +} + +/* Dropdown option styling */ +.support-option { + padding: 5px 10px; + color: white; + cursor: pointer; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.support-option:hover { + background-color: #2c3e50; +} + +/* SVG icon in each option */ +.support-option .support-icon svg { + width: 16px; + height: 18px; + fill: none; + stroke: white; + margin-right: 8px; +} + + + +//Free Trial nav button +.header-trial:hover { + opacity: 0.85; +} + +.header-trial::before { + content: 'Start free trial'; + border: 1px solid #0466FF; + color: #FFF; border-radius: 3px; padding: 5px 15px; font-size: 13px; font-weight: 600; display: inline-flex; + background: linear-gradient(35deg,#0466FF 0%,#0800FF 100%); + margin-left: -10px; + margin-right: -10px; } -.header-support::after { +.header-trial::after { display: none !important; content: none !important; } -[data-theme='dark'] .header-support::before { +[data-theme='dark'] .header-trial::before { background: transparent; - border: 1px solid #E5F4FA; - color: var(--ifm-navbar-link-color); + border: 0px solid #0466FF; + color: #FFF; border-radius: 3px; - padding: 4px 15px; + padding: 5px 15px; font-size: 13px; font-weight: 600; display: inline-flex; + margin-left: -10px; + margin-right: -10px; + background: linear-gradient(35deg, #0466FF 0%, #0800FF 30%, #000099 100%); } - .markdown { h1 { font-size: 2rem !important; @@ -504,31 +564,6 @@ html[data-theme='light'] .table-of-contents__left-border { height: 70%; } -.navbar-item-github:hover { - opacity: 0.6; -} -.navbar-item-github:before { - margin-left: -1rem; - margin-top: 1px; - content: ''; - width: 20px; - height: 20px; - display: flex; - position: absolute; - align-items: center; - justify-content: center; - background-image: 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"); - background-repeat: no-repeat; - background-position: center; -} - -html[data-theme='dark'] .navbar-item-github: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; - background-repeat: no-repeat; - background-position: center; -} - .navbar-grid-menu:after { transition: opacity 0.2s; content: ""; @@ -545,7 +580,7 @@ html[data-theme='dark'] .navbar-item-github:before { opacity: 0.5; } -.navbar-grid-menu:after, .navbar-github-link:after { +.navbar-grid-menu:after { border-style: none !important; margin-left: -5px !important; }