minio/docs
1
0
Fork 0
mirror of https://github.com/minio/docs.git synced 2025-07-28 19:42:10 +03:00
Code Activity

Update top navigation

Browse Source
This commit is contained in:
Rushan M
2021-04-13 22:12:17 +05:30
committed by Ravind Kumar
parent 84388b4ab9
commit d5d39def55
13 changed files with 660 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

360
source/_static/css/main.css
View File

@ -357,180 +357,268 @@ table.docutils {
box-shadow: none; }
.nav {
margin-left: auto; }
z-index: 1;
-webkit-transition: opacity 300ms, -webkit-transform 300ms;
transition: opacity 300ms, -webkit-transform 300ms;
transition: opacity 300ms, transform 300ms;
transition: opacity 300ms, transform 300ms, -webkit-transform 300ms;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-left: auto;
font-size: 0.9375rem; }
@media (max-width: 991px) {
.nav {
position: fixed;
height: 100vh;
width: 18rem;
top: 0;
width: 300px;
position: fixed;
right: 0;
-webkit-transform: translate3d(18rem, 0, 0);
transform: translate3d(18rem, 0, 0);
opacity: 0;
-webkit-box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.1);
background-color: rgba(255, 255, 255, 0.9925);
pointer-events: none;
-webkit-transition: opacity 400ms, -webkit-transform 300ms;
transition: opacity 400ms, -webkit-transform 300ms;
transition: opacity 400ms, transform 300ms;
transition: opacity 400ms, transform 300ms, -webkit-transform 300ms;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
top: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 1rem 2rem 2rem;
height: 100%;
overflow-y: auto; } }
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0);
opacity: 0;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow-y: auto;
background-color: #ffffff;
padding-top: 2.5rem; } }
.nav > .toggle-icon {
position: absolute;
top: 0.7rem;
right: 0.7rem;
z-index: 1; }
right: 0.7rem; }
@media (min-width: 992px) {
.nav > .toggle-icon {
display: none; } }
.nav-toggled .nav {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
pointer-events: all; }
@media (max-width: 991px) {
.nav-toggled .nav {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
z-index: 100; } }
.nav__item {
position: relative;
font-size: 0.95rem;
line-height: 100%;
border-radius: 0.2rem;
cursor: pointer; }
.nav__item, .nav__item:hover {
position: relative; }
.nav__item:hover .nav__dropdown {
opacity: 1;
pointer-events: auto; }
.nav__item:hover .nav__link--dropdown > span:before {
opacity: 0; }
.nav__link {
line-height: 100%; }
.nav__link, .nav__link:hover {
color: #4b4b4b; }
@media (min-width: 992px) {
.nav__item {
padding: 0.4rem 1.2rem 0.55rem; }
.nav__item:hover .nav__dropdown {
opacity: 1;
pointer-events: all; } }
.nav__link {
padding: 0.625rem 1.25rem 0.8125rem;
margin-left: 0.25rem;
cursor: pointer; }
.nav__link > span {
position: relative; }
.nav__link > span:before {
height: 1px;
width: 100%;
background-color: #4b4b4b;
position: absolute;
bottom: -8px;
left: 0;
content: "";
-webkit-transform: translateY(5px);
transform: translateY(5px);
opacity: 0;
-webkit-transition: opacity 300ms, -webkit-transform 300ms;
transition: opacity 300ms, -webkit-transform 300ms;
transition: opacity 300ms, transform 300ms;
transition: opacity 300ms, transform 300ms, -webkit-transform 300ms; }
.nav__link:not(.nav__link--dropdown):hover > span:before {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1; } }
@media (max-width: 991px) {
.nav__item {
padding: 0.85rem 0; } }
.nav__item:last-child {
border: 1px solid #C72C48;
-webkit-transition: background-color 300ms, color 300ms;
transition: background-color 300ms, color 300ms;
text-align: center; }
.nav__item:last-child:hover {
background-color: #C72C48;
color: #ffffff; }
@media (max-width: 991px) {
.nav__item:last-child {
margin-top: 1rem; } }
.nav__link {
font-weight: 500;
color: #000000;
padding: 0.75rem 1.75rem; } }
a.nav__item:not(:last-child) > span {
position: relative;
cursor: pointer; }
a.nav__item:not(:last-child) > span:after {
left: 0;
bottom: -7px;
height: 1px;
width: 100%;
position: absolute;
content: "";
opacity: 0;
-webkit-transform: translateY(5px);
transform: translateY(5px);
-webkit-transition: opacity 250ms, -webkit-transform 250ms;
transition: opacity 250ms, -webkit-transform 250ms;
transition: opacity 250ms, transform 250ms;
transition: opacity 250ms, transform 250ms, -webkit-transform 250ms;
background-color: #4b4b4b; }
a.nav__item:not(:last-child).active > span::after, a.nav__item:not(:last-child):hover > span::after {
.nav__link--active > span:before {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1; }
transform: translateY(0); }
@media (min-width: 992px) {
span.nav__item:after {
left: 50%;
margin-left: -12px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 12px 10px;
border-color: transparent transparent #ffffff transparent;
position: absolute;
bottom: -3px;
opacity: 0;
-webkit-transition: opacity 200ms;
transition: opacity 200ms; }
span.nav__item:hover:after {
opacity: 1; } }
.nav__link--download {
border: 1px solid #C72C48;
-webkit-transition: background-color 300ms, color 300ms;
transition: background-color 300ms, color 300ms;
border-radius: 0.1875rem; }
.nav__link--download:hover {
background-color: #C72C48;
color: #ffffff; }
@media (max-width: 991px) {
.nav__link--download {
margin: 1.5rem;
text-align: center; } }
@media (min-width: 992px) {
.nav__dropdown {
background-color: #ffffff;
padding: 1.25rem;
border-radius: 0.4rem;
-webkit-box-shadow: 0 -1px 1.25rem rgba(0, 0, 0, 0.13);
box-shadow: 0 -1px 1.25rem rgba(0, 0, 0, 0.13);
margin-top: 0.3rem;
width: 24rem;
-webkit-transform: translateX(calc(-50% + 2.8rem));
transform: translateX(calc(-50% + 2.8rem));
margin-top: 0.3125rem;
width: 385px;
-webkit-transform: translateX(calc(-50% + 3rem));
transform: translateX(calc(-50% + 3rem));
position: absolute;
left: 0;
top: 86%;
top: 90%;
opacity: 0;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
pointer-events: none;
max-height: calc(100vh - 5rem);
overflow-y: auto; } }
pointer-events: none; }
.nav__dropdown:before {
left: 50%;
margin-left: -5px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 8px;
border-color: transparent transparent #ffffff transparent;
position: absolute;
top: -8px; }
.nav__dropdown .nav__dropdown__inner {
padding: 1.5rem;
max-height: calc(100vh - 5rem);
overflow-y: auto;
border-radius: 0.1875rem;
-webkit-box-shadow: 0 0.0625rem 1.25rem rgba(0, 0, 0, 0.13);
box-shadow: 0 0.0625rem 1.25rem rgba(0, 0, 0, 0.13);
background-color: #ffffff; } }
@media (max-width: 991px) {
.nav__dropdown {
margin: 1rem -2rem -0.8rem;
padding: 0.5rem 2rem;
background-color: #f9f9f9; } }
.nav__dropdown .nav__dropdown__inner {
background-color: #f8f8f8;
padding: 0.5rem 1rem;
margin-bottom: 1rem; } }
@media (min-width: 992px) {
.nav__dropdown--lg {
width: 800px; }
.nav__dropdown--lg .nav__dropdown__inner {
padding: 3.5rem; } }
@media (max-width: 1200px) and (min-width: 992px) {
.nav__dropdown--lg {
width: 500px; }
.nav__dropdown--lg .nav__dropdown__inner {
padding: 1.5rem; } }
.nav__sub {
display: block;
text-align: left;
font-size: 1rem;
padding: 0.6rem 0.75rem;
font-weight: 500;
color: #000000;
position: relative; }
@media (min-width: 992px) {
.nav__sub {
padding: 1rem;
border-radius: 0.4rem;
-webkit-transition: background-color 300ms;
transition: background-color 300ms; }
.nav__sub:hover {
background-color: #f8f8f8;
color: #000000; } }
border-radius: 0.25rem; }
@media (max-width: 991px) {
.nav__sub {
padding: 0.75rem 0; } }
font-size: 0.85rem;
font-weight: normal; } }
.nav__sub,
.nav__sub > small {
display: block;
display: block; }
.nav__sub > small {
color: #4b4b4b;
font-weight: normal;
font-size: 0.8rem;
color: #7f7f7f;
margin-top: 0.7rem;
line-height: 1.4; }
opacity: 0.75;
margin-top: 0.25rem; }
@media (max-width: 991px) {
.nav__sub > small {
display: none; } }
.nav__sub:hover {
background-color: #f8f8f8;
color: #000000; }
.nav__close {
position: absolute;
top: 1.25rem;
left: -2.7rem; }
.nav__arrow {
width: 9px;
height: 5px;
background: url(../img/icons/nav-arrow.svg) no-repeat center;
display: inline-block;
margin-left: 4px; }
@media (max-width: 991px) {
.nav__arrow {
display: none; } }
@media (min-width: 992px) {
.nav__feature {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start; } }
.nav__column {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1; }
@media (min-width: 992px) {
.nav__column--main {
padding-right: 1rem; }
.nav__column--main > .nav__sub {
margin-top: 1rem; } }
.nav__column__title {
text-transform: uppercase;
font-size: 0.6rem;
padding-left: 0.75rem;
margin-bottom: 0.2rem; }
@media (max-width: 991px) {
.nav__column__title {
margin-top: 1rem; } }
.nav__lead {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.nav__lead, .nav__lead:hover {
color: #000000; }
.nav__lead > img {
width: 30px;
-ms-flex-negative: 0;
flex-shrink: 0;
margin-right: 0.75rem; }
@media (max-width: 991px) {
.nav__lead > img {
display: none; } }
@media (min-width: 992px) {
.nav__jump {
padding-left: 2.6rem;
margin-top: -0.2rem; }
.nav__jump > a {
font-weight: normal;
display: block;
font-size: 0.8rem;
margin-top: 0.5rem; }
.nav__jump > a, .nav__jump > a:hover {
color: #000000; }
.nav__jump > a:hover {
text-decoration: underline; } }
@media (max-width: 991px) {
.nav__jump {
display: none; } }
.toggle-icon {
width: 2.5rem;
height: 2.5rem;
cursor: pointer;
border-radius: 0.2rem;
border-radius: 0.1875rem;
-webkit-transition: background-color 300ms;
transition: background-color 300ms;
-ms-flex-negative: 0;
@ -553,12 +641,12 @@ a.nav__item:not(:last-child).active > span::after, a.nav__item:not(:last-child):
.toggle-icon--docs {
background-image: url(../img/icons/docs.svg); }
.toggle-icon--close {
background-image: url(../img/icons/close-circle.svg); }
.toggle-icon--menu {
background-image: url(../img/icons/menu.svg); }
.toggle-icon--close {
background-image: url(../img/icons/close-circle.svg); }
.toggle-icon--toc {
background-image: url(../img/icons/toc.svg); }
@ -572,7 +660,7 @@ a.nav__item:not(:last-child).active > span::after, a.nav__item:not(:last-child):
transition: opacity 400ms, -webkit-transform 300ms;
transition: opacity 400ms, transform 300ms;
transition: opacity 400ms, transform 300ms, -webkit-transform 300ms;
padding: 2rem 2rem 2rem 0;
padding: 3rem 2rem 2rem 0;
overflow-y: auto; }
@media (max-width: 991px) {
.sidebar {
@ -637,7 +725,7 @@ a.nav__item:not(:last-child).active > span::after, a.nav__item:not(:last-child):
background-color: #ffffff; }
@media (min-width: 992px) {
.search__text {
border-radius: 0.2rem; } }
border-radius: 0.1875rem; } }
.search__text:focus {
border-color: #cacaca; }

2
source/_static/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

60
source/_static/data/nav.json
View File

@ -1,60 +0,0 @@
{
"Product": {
"Overview": {
"description": "Dive in to the features and architecture",
"link": "https://min.io/product/overview"
},
"Integrations": {
"description": "Browse our vast portfolio of integrations",
"link": "https://min.io/product/integrations"
},
"Reference Hardware": {
"description": "See recommended HW from our partners",
"link": "https://min.io/product/reference-hardware"
}
},
"Docs": {
"MinIO Baremetal" : {
"description": "MinIO Object Storage for Baremetal Infrastructure",
"link": "https://docs.min.io/minio/baremetal"
},
"MinIO Hybrid Cloud" : {
"description" : "MinIO Object Storage for Kubernetes-Managed Private and Public Cloud Infrastructure",
"link" : "https://docs.min.io/minio/k8s"
},
"MinIO for VMware Cloud Foundation" : {
"description" : "MinIO Object Storage for VMware Cloud Foundation 4.2",
"link" : "https://docs.min.io/minio/vsphere"
},
"MinIO Legacy Documentation" : {
"description" : "MinIO Object Storage Legacy Documentation",
"link" : "https://docs.min.io"
}
},
"Solutions": {
"VMware": {
"description": "Discover how MinIO integrates with VMware across the portfolio from the Persistent Data platform to TKGI and how we support their Kubernetes ambitions.",
"link": "https://min.io/solutions/vmware"
},
"Splunk": {
"description": "Find out how MinIO is delivering performance at scale for Splunk SmartStores",
"link": "https://min.io/solutions/optimize-splunk-smartstore-performance"
},
"Veeam": {
"description": "Learn how MinIO and Veeam have partnered to drive performance and scalability for a variety of backup use cases.",
"link": "https://min.io/solutions/veeam"
},
"Azure to AWS S3 Gateway": {
"description": "Learn how MinIO allows Azure Blob to speak Amazon’s S3 API",
"link": "https://min.io/solutions/azure-s3-api-integration"
},
"Teradata": {
"description": "Discover why MinIO is the Native Object Store (NOS) of choice for at-scale Teradata deployments",
"link": "https://min.io/solutions/native-object-store-for-teradata"
}
},
"Resources": "https://min.io/resources",
"Blog": "https://blog.min.io/",
"Pricing": "https://min.io/pricing",
"Download": "https://min.io/download"
}

1
source/_static/img/icons/baremetal.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32.731" height="27.434" viewBox="0 0 32.731 27.434"><defs><style>.a{fill:none;stroke:#c72c48;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><g transform="translate(-5363.617 -2191.559)"><path class="a" d="M5355.293,2136.563l-15.186-7.392-15.187,7.392,15.187,7.379Z" transform="translate(39.446 63.138)"/><path class="a" d="M5326.947,2138.04l-2.026.986,15.187,7.379,15.186-7.379-2.027-.987" transform="translate(40.305 66.655)"/><path class="a" d="M5326.947,2142.168l-2.026.986,15.187,7.379,15.186-7.379-2.027-.986" transform="translate(39.446 67.709)"/><path class="a" d="M5326.947,2142.168l-2.026.986,15.187,7.379,15.186-7.379-2.027-.986" transform="translate(39.446 67.709)"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 745 B

1
source/_static/img/icons/hybrid-cloud.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33.976" height="26.825" viewBox="0 0 33.976 26.825"><defs><style>.a{fill:none;stroke:#c72c48;stroke-linejoin:round;stroke-width:1.5px;}.b{fill:#c72c48;}</style></defs><g transform="translate(-5362.373 -2063.185)"><g transform="translate(5363.123 2065.599)"><path class="a" d="M5356.476,2063.957l-16.237-7.9-16.239,7.9,16.239,7.89Z" transform="translate(-5324 -2048.185)"/></g><g transform="translate(-1204.413 7061.914)"><g transform="translate(6572.288 -4993.844)"><g transform="translate(3.738 13.135)"><rect class="b" width="1.117" height="0.559"/></g><g transform="translate(3.738 1.664)"><path class="b" d="M6576.751-4981.941h-1.117v-1.093h1.117Zm0-1.64h-1.117v-1.093h1.117Zm0-1.639h-1.117v-1.093h1.117Zm0-1.639h-1.117v-1.092h1.117Zm0-1.638h-1.117v-1.093h1.117Zm0-1.64h-1.117v-1.092h1.117Zm0-1.639h-1.117v-1.093h1.117Z" transform="translate(-6575.634 4992.867)"/></g><g transform="translate(3.738 0.001)"><path class="b" d="M6576.751-4993.239h-1.117v-1.117h.559a.558.558,0,0,1,.559.559Z" transform="translate(-6575.634 4994.356)"/></g><g transform="translate(1.013 0.001)"><path class="b" d="M6575.466-4993.239h-.908v-1.117h.908Zm-1.363,0h-.908v-1.117h.908Z" transform="translate(-6573.195 4994.356)"/></g><rect class="b" width="0.559" height="1.117"/></g><g transform="translate(6582.777 -4998.729)"><path class="b" d="M6582.794-4982.53h-1.117v-1.117h1.117Zm0-1.676h-1.117v-1.117h1.117Zm0-1.676h-1.117V-4987h1.117Zm0-1.676h-1.117v-1.117h1.117Zm0-1.676h-1.117v-1.117h1.117Zm0-1.676h-1.117v-1.117h1.117Zm0-1.676h-1.117v-1.117h1.117Zm0-1.676h-1.117v-1.117h1.117Zm0-1.676h-1.117v-1.117h1.117Zm0-1.676h-1.117v-1.117h1.117Z" transform="translate(-6581.677 4998.729)"/></g><g transform="translate(6589.207 -4990.792)"><path class="b" d="M6588.549-4980.384h-1.117v-1.117h1.117Zm0-1.676h-1.117v-1.117h1.117Zm0-1.676h-1.117v-1.117h1.117Zm0-1.676h-1.117v-1.117h1.117Zm0-1.676h-1.117v-1.117h1.117Zm0-1.676h-1.117v-1.117h1.117Zm0-1.676h-1.117v-.628a.558.558,0,0,1,.559-.559h.488v.559h.07Zm4.935-.069h-1.095v-1.117h1.095Zm-1.653,0h-1.117v-1.117h1.117Zm-1.676,0h-1.117v-1.117h1.117Z" transform="translate(-6587.432 4991.625)"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

1
source/_static/img/icons/nav-arrow.svg Normal file
View File

@ -0,0 +1 @@
<svg width="9" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M8.071.135a.562.562 0 1 1 .733.855L4.866 4.365a.562.562 0 0 1-.732 0L.196.99A.562.562 0 1 1 .93.135L4.5 3.197 8.071.135z" fill="#505050" fill-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 234 B

1
source/_static/img/icons/ref-hardware.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="31.737" height="18.835" viewBox="0 0 31.737 18.835"><defs><style>.a,.b{fill:none;stroke-width:1.5px;}.a,.b,.c{stroke:#c72c48;}.a{stroke-dasharray:0.5 0.5;}.b{stroke-miterlimit:10;}.c{fill:#c72c48;stroke-width:0.6px;}</style></defs><g transform="translate(-6646.893 4989.998)"><path class="a" d="M6651.417-4975.223h24.809" transform="translate(-1.06 -0.158)"/><path class="b" d="M6677.872-4971.913h-30.229v-7.341a3.438,3.438,0,0,0,1.541-2.871,3.443,3.443,0,0,0-1.541-2.871v-3.253a1,1,0,0,1,1-1h28.264a.971.971,0,0,1,.973.969h0v3.328a3.444,3.444,0,0,0-1.478,2.824,3.447,3.447,0,0,0,1.478,2.826Z" transform="translate(0 0)"/><rect class="c" width="0.979" height="5.58" rx="0.489" transform="translate(6654.09 -4985.312)"/><rect class="c" width="0.979" height="5.58" rx="0.489" transform="translate(6659.125 -4985.312)"/><rect class="c" width="0.979" height="5.58" rx="0.489" transform="translate(6664.16 -4985.312)"/><rect class="c" width="0.979" height="5.58" rx="0.489" transform="translate(6669.195 -4985.312)"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

50
source/_static/js/main.js
View File

@ -12,54 +12,4 @@ window.addEventListener("DOMContentLoaded", (event) => {
target === 'sidebar' ? $('body').removeClass('nav-toggled') : $('body').removeClass('sidebar-toggled');
$('body').toggleClass(target + '-toggled');
});
// Render navigation menu
if($('#nav')[0]) {
var navData = '/_static/data/nav.json';
var nav = $('.nav');
$.getJSON( navData, function(data) {
var navToggle = $('<i class="toggle-icon toggle-icon--menu" />');
navToggle.attr('data-toggle', 'nav');
nav.after(navToggle);
var navClose = $('<i />');
navClose.addClass('toggle-icon toggle-icon--close');
navClose.attr('data-toggle', 'nav');
nav.append(navClose);
$.each(data, function(nav, navValue) {
var navElem = typeof navValue === 'object' ? '<span />' : '<a />';
var navLink = $(navElem);
navLink.addClass(nav === 'Docs' ? 'nav__item active' : 'nav__item');
navLink.html('<span>' + nav + '</span>');
if(navElem === '<a />') {
navLink.attr('href', navValue);
}
else {
var navDropdown = $('<div class="nav__dropdown" />');
$.each(navValue, function(sub, subValue) {
var navSub = $('<a />');
navSub.addClass('nav__sub');
navSub.text(sub);
navSub.attr({
'href': subValue.link,
'target': '_blank',
'rel': 'noreferrer'
});
navSub.append('<small>' + subValue.description + '</small>');
navDropdown.append(navSub);
navLink.append(navDropdown)
});
}
$('#nav').append(navLink);
});
});
}
});

4
source/_static/scss/includes/_aside.scss
View File

@ -5,7 +5,7 @@
top: 0;
background-color: $sidebar-bg;
transition: opacity 400ms, transform 300ms;
padding: $content-padding-sm $content-padding-sm $content-padding-sm 0;
padding: $content-padding-sm + 1 $content-padding-sm $content-padding-sm 0;
overflow-y: auto;
@include breakpoint-max(breakpoints(lg)) {
@ -80,7 +80,7 @@
background-color: $search-bg;
@include breakpoint-min(breakpoints(lg)) {
border-radius: $border-radius-sm;
border-radius: $border-radius;
}
&:focus {

454
source/_static/scss/includes/_header.scss
View File

@ -38,211 +38,335 @@
}
.nav {
margin-left: auto;
z-index: 1;
transition: opacity 300ms, transform 300ms;
display: flex;
margin-left: auto;
font-size: 0.9375rem;
@include breakpoint-max(breakpoints(lg)) {
position: fixed;
height: 100vh;
width: $sidebar-width;
top: 0;
right: 0;
transform: translate3d($sidebar-width, 0, 0);
opacity: 0;
box-shadow: 0 0 0.8rem rgba($black, 0.1);
background-color: rgba($white, 0.9925);
pointer-events: none;
transition: opacity 400ms, transform 300ms;
display: flex;
flex-direction: column;
padding: 1rem 2rem 2rem;
height: 100%;
overflow-y: auto;
}
@include breakpoint-max(breakpoints(lg)) {
height: 100vh;
width: $nav-mobile-width;
position: fixed;
right: 0;
top: 0;
flex-direction: column;
transform: translate3d($nav-mobile-width, 0, 0);
opacity: 0;
box-shadow: $nav-mobile-box-shadow;
overflow-y: auto;
background-color: $nav-mobile-bg;
padding-top: 2.5rem;
}
& > .toggle-icon {
@include breakpoint-min(breakpoints(lg)) {
display: none;
}
position: absolute;
top: 0.7rem;
right: 0.7rem;
z-index: 1;
}
}
.nav-toggled {
.nav {
transform: translate3d(0, 0, 0);
opacity: 1;
pointer-events: all;
.nav {
@include breakpoint-max(breakpoints(lg)) {
transform: translate3d(0, 0, 0);
opacity: 1;
z-index: $nav-active-z-index;
}
}
}
.nav__item {
position: relative;
font-size: 0.95rem;
line-height: 100%;
border-radius: $border-radius-sm;
cursor: pointer;
position: relative;
&,
&:hover {
color: $nav-color;
}
&:hover {
.nav__dropdown {
opacity: 1;
pointer-events: auto;
}
@include breakpoint-min(breakpoints(lg)) {
padding: 0.4rem 1.2rem 0.55rem;
&:hover {
.nav__dropdown {
opacity: 1;
pointer-events: all;
}
}
}
@include breakpoint-max(breakpoints(lg)) {
padding: 0.85rem 0;
}
&:last-child {
border: 1px solid $theme-red;
transition: background-color 300ms, color 300ms;
text-align: center;
&:hover {
background-color: $theme-red;
color: $white;
}
@include breakpoint-max(breakpoints(lg)) {
margin-top: 1rem;
}
}
.nav__link--dropdown {
& > span {
&:before {
opacity: 0;
}
}
}
}
}
a.nav__item {
&:not(:last-child) {
&>span {
position: relative;
cursor: pointer;
.nav__link {
line-height: 100%;
&:after {
left: 0;
bottom: -7px;
height: 1px;
width: 100%;
position: absolute;
content: "";
opacity: 0;
transform: translateY(5px);
transition: opacity 250ms, transform 250ms;
background-color: $nav-border-color;
}
}
&,
&:hover {
color: $nav-link-color;
}
&.active,
&:hover {
&>span {
&::after {
transform: translateY(0);
opacity: 1;
}
}
}
}
@include breakpoint-min(breakpoints(lg)) {
padding: 0.625rem 1.25rem 0.8125rem;
margin-left: 0.25rem;
cursor: pointer;
& > span {
position: relative;
&:before {
height: 1px;
width: 100%;
background-color: $nav-link-color;
position: absolute;
bottom: -8px;
left: 0;
content: "";
transform: translateY(5px);
opacity: 0;
transition: opacity 300ms, transform 300ms;
}
}
&:not(.nav__link--dropdown) {
&:hover {
& > span {
&:before {
transform: translateY(0);
opacity: 1;
}
}
}
}
}
@include breakpoint-max(breakpoints(lg)) {
font-weight: $font-weight-medium;
color: $black;
padding: 0.75rem 1.75rem;
}
}
span.nav__item {
@include breakpoint-min(breakpoints(lg)) {
&:after {
left: 50%;
margin-left: -12px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 12px 10px;
border-color: transparent transparent $white transparent;
position: absolute;
bottom: -3px;
opacity: 0;
transition: opacity 200ms;
}
.nav__link--active {
& > span {
&:before {
opacity: 1;
transform: translateY(0);
}
}
}
&:hover {
&:after {
opacity: 1;
}
}
}
.nav__link--download {
border: 1px solid $theme-red;
transition: background-color 300ms, color 300ms;
border-radius: $border-radius;
&:hover {
background-color: $theme-red;
color: $white;
}
@include breakpoint-max(breakpoints(lg)) {
margin: 1.5rem;
text-align: center;
}
}
.nav__dropdown {
@include breakpoint-min(breakpoints(lg)) {
background-color: $white;
padding: 1.25rem;
border-radius: $border-radius;
box-shadow: 0 -1px 1.25rem rgba($black, 0.13);
margin-top: 0.3rem;
width: 24rem;
transform: translateX(calc(-50% + 2.8rem));
position: absolute;
left: 0;
top: 86%;
opacity: 0;
transition: opacity 200ms;
pointer-events: none;
max-height: calc(100vh - 5rem);
overflow-y: auto;
}
@include breakpoint-min(breakpoints(lg)) {
margin-top: 0.3125rem;
width: 385px;
transform: translateX(calc(-50% + 3rem));
position: absolute;
left: 0;
top: 90%;
opacity: 0;
transition: opacity 200ms;
pointer-events: none;
@include breakpoint-max(breakpoints(lg)) {
margin: 1rem (-$content-padding-sm) -0.8rem;
padding: 0.5rem $content-padding-sm;
background-color: $nav-dropdown-mobile-bg;
}
&:before {
left: 50%;
margin-left: -5px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 8px;
border-color: transparent transparent $white transparent;
position: absolute;
top: -8px;
}
.nav__dropdown__inner {
padding: 1.5rem;
max-height: calc(100vh - 5rem);
overflow-y: auto;
border-radius: $border-radius;
box-shadow: 0 0.0625rem 1.25rem rgba($black, 0.13);
background-color: $white;
}
}
@include breakpoint-max(breakpoints(lg)) {
.nav__dropdown__inner {
background-color: $nav-sub-hover-bg;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
}
}
}
.nav__dropdown--lg {
@include breakpoint-min(breakpoints(lg)) {
width: 800px;
.nav__dropdown__inner {
padding: 3.5rem;
}
}
@media (max-width: map_get($breakpoints, xl)) and (min-width: map_get($breakpoints, lg)) {
width: 500px;
.nav__dropdown__inner {
padding: 1.5rem;
}
}
}
.nav__sub {
display: block;
text-align: left;
font-size: 1rem;
color: $black;
position: relative;
padding: 0.6rem 0.75rem;
font-weight: $font-weight-medium;
color: $black;
border-radius: 0.25rem;
@include breakpoint-min(breakpoints(lg)) {
padding: 1rem;
border-radius: $border-radius;
transition: background-color 300ms;
@include breakpoint-max(breakpoints(lg)) {
font-size: 0.85rem;
font-weight: normal;
}
&:hover {
background-color: $nav-sub-hover-bg;
color: $black;
}
}
&,
& > small {
display: block;
}
@include breakpoint-max(breakpoints(lg)) {
padding: 0.75rem 0;
}
& > small {
color: #4b4b4b;
font-weight: normal;
font-size: 0.8rem;
opacity: 0.75;
margin-top: 0.25rem;
&>small {
display: block;
font-size: 0.8rem;
color: lighten($text-muted-color, 5%);
margin-top: 0.7rem;
line-height: 1.4;
}
@include breakpoint-max(breakpoints(lg)) {
display: none;
}
}
&:hover {
background-color: $nav-sub-hover-bg;
color: $black;
}
}
.nav__close {
position: absolute;
top: 1.25rem;
left: -2.7rem;
.nav__arrow {
width: 9px;
height: 5px;
background: $nav-arrow-icon;
display: inline-block;
margin-left: 4px;
@include breakpoint-max(breakpoints(lg)) {
display: none;
}
}
.nav__feature {
@include breakpoint-min(breakpoints(lg)) {
display: flex;
align-items: flex-start;
}
}
.nav__column {
flex: 1;
}
.nav__column--main {
@include breakpoint-min(breakpoints(lg)) {
padding-right: 1rem;
& > .nav__sub {
margin-top: 1rem;
}
}
}
.nav__column__title {
text-transform: uppercase;
font-size: 0.6rem;
padding-left: 0.75rem;
margin-bottom: 0.2rem;
@include breakpoint-max(breakpoints(lg)) {
margin-top: 1rem;
}
}
.nav__lead {
&,
&:hover {
color: $black;
}
display: flex;
align-items: center;
& > img {
width: 30px;
flex-shrink: 0;
margin-right: 0.75rem;
@include breakpoint-max(breakpoints(lg)) {
display: none;
}
}
}
.nav__jump {
@include breakpoint-min(breakpoints(lg)) {
padding-left: 2.6rem;
margin-top: -0.2rem;
& > a {
&,
&:hover {
color: $black;
}
&:hover {
text-decoration: underline;
}
font-weight: normal;
display: block;
font-size: 0.8rem;
margin-top: 0.5rem;
}
}
@include breakpoint-max(breakpoints(lg)) {
display: none;
}
}
.toggle-icon {
width: 2.5rem;
height: 2.5rem;
cursor: pointer;
border-radius: $border-radius-sm;
border-radius: $border-radius;
transition: background-color 300ms;
flex-shrink: 0;
display: flex;
@ -258,9 +382,9 @@ span.nav__item {
}
$toggleIcons: (
docs: 'docs.svg',
close: 'close-circle.svg',
docs: 'docs.svg',
menu: 'menu.svg',
close: 'close-circle.svg',
toc: 'toc.svg'
);

12
source/_static/scss/includes/_variables.scss
View File

@ -63,8 +63,8 @@ $sidebar-bg: #F9F9F9;
// Border Radius
$border-radius: 0.4rem;
$border-radius-sm: 0.2rem;
$border-radius: 0.1875rem;
$border-radius-lg: 0.3125rem;
// Search
@ -97,7 +97,11 @@ $toggle-icon-hover-bg: rgba($theme-red, 0.075);
// Nav
$nav-color: $body-color;
$nav-link-color: $body-color;
$nav-border-color: #4b4b4b;
$nav-sub-hover-bg: #f8f8f8;
$nav-dropdown-mobile-bg: lighten($theme-hover-bg, 1.5%);
$nav-mobile-bg: $white;
$nav-mobile-width: 300px;
$nav-mobile-box-shadow: 0 0 10px rgba($black, 0.1);
$nav-active-z-index: 100;
$nav-arrow-icon: url(../img/icons/nav-arrow.svg) no-repeat center;

3
source/_templates/layout.html
View File

@ -74,7 +74,6 @@
{%- endmacro %}
{%- block header %}
<header class="header">
<i class="toggle-icon toggle-icon--docs" data-toggle="sidebar"></i>
<a
@ -87,7 +86,7 @@
/>
</a>
<nav id="nav" class="nav"></nav>
{%- include "top-navigation.html" %}
</header>
{%- endblock %}

131
source/_templates/top-navigation.html Normal file
View File

@ -0,0 +1,131 @@
<div class="nav">
<i class="toggle-icon toggle-icon--close" data-toggle="nav"></i>
<div class="nav__item">
<div class="nav__link nav__link--dropdown">
<span>Product</span>
<i class="nav__arrow"></i>
</div>
<div class="nav__dropdown nav__dropdown--lg">
<div class="nav__dropdown__inner">
<div class="nav__feature">
<div class="nav__column nav__column--main">
<div class="nav__sub">
<a href="https://min.io/hybrid-cloud-storage" class="nav__lead">
<img src="{{ pathto('_static/img/icons/hybrid-cloud.svg',1) }}" alt="Hybrid Cloud Object Storage">
Hybrid Cloud Object Storage
</a>
<div class="nav__jump">
<a href="https://min.io/hybrid-cloud-storage#overview">Overview</a>
<a href="https://min.io/hybrid-cloud-storage#architecture">Architecture</a>
</div>
</div>
<div class="nav__sub">
<a href="https://min.io/product/overview" class="nav__lead">
<img src="{{ pathto('_static/img/icons/baremetal.svg',1) }}" alt="Baremetal">
Baremetal
</a>
<div class="nav__jump">
<a href="https://min.io/product/overview#features">Overview</a>
<a href="https://min.io/product/overview#architecture">Architecture</a>
</div>
</div>
<a href="https://min.io/product/reference-hardware" class="nav__sub nav__lead">
<img src="{{ pathto('_static/img/icons/ref-hardware.svg',1) }}" alt="Reference Hardware">
Reference Hardware
</a>
</div>
<div class="nav__column">
<div class="nav__column__title">Features</div>
<a href="https://min.io/product/active-data-replication-for-object-storage" class="nav__sub">Active Active Replication</a>
<a href="https://min.io/product/identity-and-access-management" class="nav__sub">Identity & Access Management</a>
<a href="https://min.io/product/enterprise-object-storage-encryption" class="nav__sub">Encryption</a>
<a href="https://min.io/product/data-immutability-for-object-storage" class="nav__sub">Bucket & Object Immutability</a>
<a href="https://min.io/product/object-versioning-bucket-versioning" class="nav__sub">Bucket & Object Versioning</a>
<a href="https://min.io/product/automated-data-tiering-lifecycle-management" class="nav__sub">Data Life Cycle Management & Tiering</a>
<a href="https://min.io/product/automated-cloud-data-management-interface" class="nav__sub">Automated Data Management Interfaces</a>
<a href="https://min.io/product/object-storage-performance-monitoring" class="nav__sub">Monitoring</a>
<a href="https://min.io/product/scalable-object-storage" class="nav__sub">Scalability</a>
</div>
</div>
</div>
</div>
</div>
<div class="nav__item">
<div class="nav__link nav__link--dropdown nav__link--active">
<span>Docs</span>
<i class="nav__arrow"></i>
</div>
<div class="nav__dropdown">
<div class="nav__dropdown__inner">
<a href="https://docs.min.io/minio/baremetal" class="nav__sub">
<span class="">MinIO Baremetal</span>
<small class="">MinIO Object Storage for Baremetal Infrastructure</small>
</a>
<a href="https://docs.min.io/minio/k8s" class="nav__sub">
<span class="">MinIO Hybrid Cloud</span>
<small class="">MinIO Object Storage for Kubernetes-Managed Private and Public Cloud Infrastructure</small>
</a>
<a href="https://docs.min.io/minio/vsphere" class="nav__sub">
<span class="">MinIO for VMware Cloud Foundation</span>
<small class="">MinIO Object Storage for VMware Cloud Foundation 4.2</small>
</a>
<a href="https://docs.min.io" class="nav__sub">
<span class="">MinIO Legacy Documentation</span>
<small class="">Legacy Documentation for MinIO Object Storage</small>
</a>
</div>
</div>
</div>
<div class="nav__item">
<div class="nav__link nav__link--dropdown" data-href="solutions">
<span class="relative">Solutions</span>
<i class="nav__arrow"></i>
</div>
<div class="nav__dropdown">
<div class="nav__dropdown__inner">
<a href="https://min.io/solutions/vmware" class="nav__sub">
<span>VMware</span>
<small>Discover how MinIO integrates with VMware across the portfolio from the Persistent Data platform to TKGI and how we support their Kubernetes ambitions.</small>
</a>
<a href="https://min.io/solutions/optimize-splunk-smartstore-performance" class="nav__sub">
<span>Splunk</span>
<small>Find out how MinIO is delivering performance at scale for Splunk SmartStores</small>
</a>
<a href="https://min.io/solutions/veeam" class="nav__sub">
<span>Veeam</span>
<small>Learn how MinIO and Veeam have partnered to drive performance and scalability for a variety of backup use cases.</small>
</a>
<a href="https://min.io/solutions/azure-s3-api-integration" class="nav__sub">
<span>Azure to AWS S3 Gateway</span>
<small>Learn how MinIO allows Azure Blob to speak Amazon’s S3 API</small>
</a>
<a href="https://min.io/solutions/hdfs-migration" class="nav__sub">
<span>HDFS Migration</span>
<small>Modernize and simplify your big data storage infrastructure with high-performance, Kubernetes-native object storage from MinIO.</small>
</a>
<a href="https://min.io/solutions/native-object-store-for-teradata" class="nav__sub">
<span>Teradata</span>
<small>Discover why MinIO is the Native Object Store (NOS) of choice for at-scale Teradata deployments</small>
</a>
<a href="https://min.io/product/integrations" class="nav__sub">
<span>Integrations</span>
<small>Browse our vast portfolio of integrations</small>
</a>
</div>
</div>
</div>
<a href="https://min.io/resources" class="nav__link" data-href="resources">
<span>Resources</span>
</a>
<a href="https://blog.min.io/" class="nav__link">
<span>Blog</span>
</a>
<a href="https://min.io/pricing" class="nav__link">
<span>Pricing</span>
</a>
<a class="nav__link nav__link--download" href="https://min.io/download">Download</a>
</div>
<i class="toggle-icon toggle-icon--menu" data-toggle="nav"></i>