Skip to content

Commit

Permalink
"Free Trial" and "Support" nav buttons (#4435)
Browse files Browse the repository at this point in the history 
* Top navigation bar improvements

* Update docs/contributing/index.md

* Replaced "Contact Support" button with support (life ring) icon

* "Support" button CSS

* docusaurus.config.js fix

* dropdown labels

* align Support dropdown with team discussion

* Update docs/contributing/index.md

Co-authored-by: Jagadisha V <[email protected]>

* Update docs/contributing/index.md

Co-authored-by: Jagadisha V <[email protected]>

* Update index.md

stet

* Support dropdown

* light mode border

---------

Co-authored-by: Jagadisha V <[email protected]>
  • Loading branch information
@kimsauce @JV0812
kimsauce and JV0812 authored Oct 11, 2024
1 parent 67c7305 commit c9cb46c
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 81 deletions.
37 changes: 23 additions & 14 deletions docusaurus.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
],
},
Expand Down
169 changes: 102 additions & 67 deletions src/css/sumo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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")
Expand All @@ -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;
Expand Down Expand Up @@ -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: "";
Expand All @@ -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;
}
Expand Down

0 comments on commit c9cb46c

Please sign in to comment.