1
0
mirror of https://github.com/minio/docs.git synced 2025-07-31 18:04:52 +03:00

Update top navigation to match the parent site (#1154)

This commit is contained in:
Rushan
2024-03-13 19:15:57 +04:00
committed by GitHub
parent 67e81ce2f8
commit 7b355d14de
5 changed files with 313 additions and 292 deletions

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32.731" height="27.434" fill="none" stroke="#c72c48" stroke-linejoin="round" stroke-width="1.5" xmlns:v="https://vecta.io/nano"><path d="M31.122 8.142L15.936.75.749 8.142l15.187 7.379zM3.635 13.136l-2.026.986 15.187 7.379 15.186-7.379-2.027-.987M2.776 18.318l-2.026.986 15.187 7.379 15.186-7.379-2.027-.986"/><path d="M2.776 18.318l-2.026.986 15.187 7.379 15.186-7.379-2.027-.986"/></svg>

Before

Width:  |  Height:  |  Size: 435 B

View File

@ -14,15 +14,21 @@
}
.nav__link {
display: block;
position: relative;
&,
&:hover {
color: var(--nav-text-color);
}
}
.nav__link--download {
border: 1px solid var(--nav-download-border-color);
transition: background-color 300ms, color 300ms;
border-radius: $border-radius;
padding: 0.35rem 1.5rem !important;
margin-left: auto;
font-weight: $font-weight-medium;
&:hover {
background-color: var(--nav-download-hover-bg);
@ -30,100 +36,83 @@
}
.nav__sub {
padding: 0.6rem 0.75rem;
font-weight: $font-weight-medium;
padding: 0.5rem 0.75rem;
color: var(--text-color);
border-radius: $border-radius;
&,
& > span,
& > small {
display: block;
}
& > small {
color: var(--nav-text-muted-color);
font-weight: normal;
font-size: 0.8rem;
font-size: 0.75rem;
opacity: 0.75;
margin-top: 0.25rem;
}
& + .nav__title {
margin-top: 1.5rem;
}
}
a.nav__sub {
&:hover {
background-color: var(--nav-sub-hover-bg);
color: var(--text-color);
}
&.active {
background-color: var(--theme-light-bg);
color: var(--text-color);
}
}
.nav__column__title {
text-transform: uppercase;
font-size: 0.6rem;
padding-left: 0.75rem;
margin-bottom: 0.5rem;
line-height: 100%;
color: var(--text-muted-color);
}
.nav__lead {
&,
&:hover {
color: var(--text-color);
}
display: flex;
align-items: center;
.nav__sub--alt {
& > img {
width: 30px;
width: 1.5rem;
flex-shrink: 0;
margin-right: 0.75rem;
}
}
.nav__separator {
border-left: 1px solid var(--theme-light-bg);
margin: 0 1rem;
.nav__title {
margin: 0.5rem 0.75rem;
line-height: 100%;
color: var(--headings-color);
font-weight: 700;
border-bottom: 1px solid var(--header-link-border-color);
padding-bottom: 0.75rem;
}
.nav__column--enterprise {
grid-column: span 2 / span 2;
}
.nav__features {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding-left: 1.5rem;
.nav__sub {
color: var(--text-muted-color);
}
}
:root {
&:not(.read-mode) {
.nav {
margin: 0.5rem 0 0 -1rem;
margin: 0.5rem 0 0;
display: flex;
.nav__link {
padding-right: 1rem;
padding-left: 1rem;
}
gap: 2rem;
}
.nav__item {
&:hover {
.nav__link {
&:after {
opacity: 1;
}
}
.nav__dropdown,
& ~ .nav__dropdown--product {
opacity: 1;
pointer-events: auto;
}
.nav__link--dropdown {
& > span {
&:before {
opacity: 0;
}
}
}
}
.nav__link {
padding-right: 1.25rem;
margin-right: 0.5rem;
background: var(--nav-item-arrow) no-repeat top 20px right 0.25rem;
&:after {
opacity: 0;
pointer-events: none;
@ -137,25 +126,41 @@
border-width: 0 6px 4px;
border-color: transparent transparent var(--nav-dropdown-bg);
position: absolute;
bottom: 0;
bottom: -1px;
transition: opacity 200ms;
z-index: 2;
}
}
}
&:hover {
.nav__dropdown {
opacity: 1;
pointer-events: auto;
}
.nav__link {
&:after {
opacity: 1;
}
}
.nav__link--dropdown {
& > span {
&:before {
opacity: 0;
}
}
}
}
}
.nav__link {
padding: 0.5rem 0 0.6rem;
padding-top: 0.5rem;
padding-bottom: 0.6rem;
cursor: pointer;
color: var(--nav-text-color);
&:hover {
color: $white;
}
& > span {
position: relative;
&:before {
height: 4px;
width: 100%;
@ -169,15 +174,6 @@
transition: opacity 300ms, transform 300ms;
}
}
&.nav__link--active {
& > span {
&:before {
opacity: 1;
transform: translateY(0);
}
}
}
&:not(.nav__link--dropdown) {
&:hover {
@ -189,10 +185,19 @@
}
}
}
&.active {
& > span {
&:before {
opacity: 1;
transform: translateY(0);
transition: none;
}
}
}
}
.nav__dropdown {
width: 365px;
position: absolute;
left: 0;
top: 100%;
@ -204,6 +209,10 @@
box-shadow: 0 0.0625rem 1.25rem rgba($black, 0.13);
background-color: var(--nav-dropdown-bg);
z-index: 1;
&:not(.nav__dropdown--cols) {
width: 385px;
}
.nav__dropdown__inner {
padding: 1.5rem;
@ -213,70 +222,54 @@
}
}
.nav__dropdown--solutions,
.nav__dropdown--product {
.nav__dropdown--cols {
&:hover {
opacity: 1;
pointer-events: auto;
}
width: 100%;
transform: translateX(0);
left: 0;
.nav__dropdown__inner {
padding: 2.5rem;
display: grid;
gap: 1.25rem;
}
}
.nav__dropdown--product .nav__dropdown__inner {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.nav__dropdown--solutions .nav__dropdown__inner {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.nav__column {
padding: 0 1rem;
&:not(:last-child) {
flex: 1;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
&:last-child {
& > .nav__sub {
margin-top: 1rem;
&.nav__dropdown--cols-3 {
.nav__dropdown__inner {
grid-template-columns: repeat(3, 1fr);
}
}
}
.nav__jump {
padding-left: 2.6rem;
margin-top: -0.2rem;
& > a {
&,
&:hover {
color: var(--text-muted-color);
}
&:hover {
text-decoration: underline;
}
font-weight: normal;
display: block;
font-size: 0.8rem;
margin-top: 0.5rem;
.nav__sub {
& > span {
font-weight: $font-weight-medium;
}
}
.nav__link--download {
padding: 0.25rem 1rem 0.35rem;
.nav__sub--alt {
display: flex;
align-items: center;
& + .nav__sub--alt {
margin-top: 1rem;
}
}
.nav__column--plain {
margin-top: 2.5rem;
}
.nav__features {
gap: 2rem;
}
.nav__title {
font-size: $font-size-lg;
}
}
@ -294,7 +287,6 @@
box-shadow: 0 0 10px rgba($black, 0.25);
overflow-y: auto;
background-color: var(--nav-bg);
padding: 0.75rem;
}
&.nav-active {
@ -307,19 +299,27 @@
.nav__link {
font-weight: $font-weight-medium;
border-radius: $border-radius;
color: var(--headings-color);
& > span {
display: block;
padding: 0.5rem 0.75rem;
margin: 0 0.85rem;
border-radius: $border-radius;
}
}
a.nav__link {
& > span {
&:hover {
background-color: var(--nav-sub-hover-bg);
}
}
}
.nav__link--download {
margin: 1.5rem 0.75rem 1rem;
margin: 1.5rem;
text-align: center;
padding: 0.5rem 1rem;
display: block;
&:hover {
@ -329,12 +329,13 @@
.nav__dropdown {
.nav__dropdown__inner {
padding: 0.5rem 0.8rem;
margin-bottom: 1rem;
}
}
.nav__sub {
font-size: $font-size-sm;
font-size: 0.85rem;
font-weight: normal;
& > small {
@ -342,29 +343,34 @@
}
}
a.nav__link:not(.nav__link--download),
.nav__sub {
&:hover {
background-color: var(--theme-light-bg);
}
}
.nav__column__title {
margin-top: 1rem;
}
.nav__lead {
.nav__sub--alt {
& > img {
display: none;
}
}
.nav__jump {
display: none;
.nav__features {
.nav__sub {
padding-block: 0.4rem;
}
}
.nav__separator {
display: none;
.nav__title {
margin-top: 1rem;
}
.nav__column--plain {
position: relative;
margin-top: 0.5rem;
padding-top: 0.5rem;
&:before {
content: "";
height: 1px;
position: absolute;
inset: 0 0.75rem;
border-top: 1px solid var(--header-link-border-color);
}
}
}

View File

@ -26,7 +26,7 @@ $theme-properties: (
--header-actions-icon-hover-bg: $light-500 $dark-200,
--header-actions-icon-alt-hover-bg: rgba($white, 0.1) $dark-200,
--header-headings-color: $white $headings-dark-color,
--header-link-border-color: $light-300 $dark-200,
--header-link-border-color: $light-200 $dark-200,
--header-link-bg: $white $dark-0,
--header-link-icon: url("../img/icons/anchor.svg") url("../img/icons/anchor-dark.svg"),
--header-text-color: $white $text-dark-color,
@ -81,8 +81,8 @@ $theme-properties: (
// Mainmenu
--nav-bg: $white $dark-100,
--nav-text-color: $white $text-dark-color,
--nav-text-muted-color: #1C1C1C darken($text-dark-color, 10%),
--nav-item-border-color: $white $dark-500,
--nav-sub-hover-bg: $light-100 $dark-200,
--nav-item-arrow: url(../img/icons/nav-arrow.svg) url(../img/icons/nav-arrow-dark.svg),
--nav-toggle-hover-border-color: $white $dark-500,
--nav-top-border-color: rgba(255, 255, 255, 0.2) $dark-200,

View File

@ -4,11 +4,11 @@ $black: #000000;
$theme-red: #c72e49;
// Gray shades light
$light-100: #F5F5F5;
$light-200: #EFF0F1;
$light-300: #E8EAEC;
$light-400: #E1E3E6;
$light-500: #D9DDE2;
$light-100: #f3f4f6;
$light-200: #e5e7eb;
$light-300: #d1d5db;
$light-400: #9ca3af;
$light-500: #6b7280;
// Gray shades dark
$dark-0: #19202A;
@ -43,9 +43,10 @@ $text-dark-color: #A2ADC0;
$headings-dark-color: #E3EEEF;
// Font size
$font-size-xs: 0.75rem;
$font-size-xs: 0.6875rem;
$font-size-sm: 0.8125rem;
$font-size-md: 0.9375rem;
$font-size-lg: 1.125rem;
// Layout
$container-width: 1400px;

View File

@ -12,149 +12,164 @@
<div class="nav__item">
<div class="nav__link nav__link--dropdown">
<span>Product</span>
<span>Product</span>
</div>
<div class="nav__dropdown nav__dropdown--cols">
<div class="nav__dropdown__inner">
<div class="nav__column nav__column--enterprise">
<div class="nav__title">MinIO Enterprise Object Store</div>
<a href="https://min.io/product/enterpriseoverview" class="nav__sub">Overview</a>
<div class="nav__sub">Features</div>
<div class="nav__features">
<div>
<a href="https://min.io/product/active-data-replication-for-object-storage" class="nav__sub">Replication</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">Object
Immutability</a>
<a href="https://min.io/product/identity-and-access-management" class="nav__sub">Identity + Access Mgt</a>
<a href="https://min.io/product/automated-data-tiering-lifecycle-management" class="nav__sub">Information Lifecycle</a>
<a href="https://min.io/product/object-versioning-bucket-versioning" class="nav__sub">Versioning</a>
<a href="https://min.io/product/enterprise/key-management-server" class="nav__sub">Key Management Server</a>
</div>
<div>
<a href="https://min.io/product/enterprise/object-storage-global-console" class="nav__sub">Console</a>
<a href="https://min.io/product/enterprise/object-store-catalog" class="nav__sub">Catalog</a>
<a href="https://min.io/product/enterprise/object-storage-data-firewall" class="nav__sub">Firewall</a>
<a href="https://min.io/product/enterprise/object-store-cache" class="nav__sub">Cache</a>
<a href="https://min.io/product/enterprise/object-storage-observability" class="nav__sub">Observability</a>
<a href="https://min.io/product/s3-compatibility" class="nav__sub">S3 Compatibility</a>
</div>
</div>
</div>
<div class="nav__column">
<div class="nav__title">MinIO for Public Cloud</div>
<a href="https://min.io/product/multicloud-elastic-kubernetes-service" class="nav__sub">AWS</a>
<a href="https://min.io/product/multicloud-google-kubernetes-service" class="nav__sub">GCS</a>
<a href="https://min.io/product/multicloud-azure-kubernetes-service" class="nav__sub">Azure</a>
<div class="nav__title">MinIO for Private Cloud</div>
<a href="https://min.io/product/private-cloud-red-hat-openshift" class="nav__sub">OpenShift</a>
<a href="https://min.io/product/multicloud-suse-rancher" class="nav__sub">SUSE Rancher</a>
<a href="https://min.io/product/private-cloud-vmware-tanzu" class="nav__sub">Tanzu</a>
<div class="nav__dropdown nav__dropdown--product">
<div class="nav__dropdown__inner">
<div class="nav__column">
<div class="nav__column__title">Multi-Cloud</div>
<div class="nav__title">MinIO for Baremetal</div>
<a href="https://min.io/product/overview" class="nav__sub">Linux and Windows</a>
</div>
<a href="https://min.io/product/private-cloud-vmware-tanzu" class="nav__sub">MinIO for VMware
Tanzu</a>
<a href="https://min.io/product/private-cloud-red-hat-openshift" class="nav__sub">MinIO for
OpenShift</a>
<a href="https://min.io/product/multicloud-suse-rancher" class="nav__sub">MinIO for SUSE
Rancher</a>
<a href="https://min.io/product/multicloud-elastic-kubernetes-service" class="nav__sub">MinIO
for Amazon Elastic Kubernetes Service</a>
<a href="https://min.io/product/multicloud-azure-kubernetes-service" class="nav__sub">MinIO for
Azure Kubernetes Service</a>
<a href="https://min.io/product/multicloud-google-kubernetes-service" class="nav__sub">MinIO for
Google Kubernetes Engine</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>
<a href="https://min.io/product/s3-compatibility" class="nav__sub">AWS S3 Compatibility</a>
</div>
<div class="nav__column">
<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/erasure-code-calculator" class="nav__sub nav__lead">
<img class="h-6" src="{{ pathto('_static/img/icons/erasure-code-calculator.svg',1) }}"
alt="Erasure Code Calculator" />
Erasure Code Calculator
</a>
<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>
</div>
</div>
<div class="nav__column nav__column--plain">
<a href="https://min.io/product/erasure-code-calculator" class="nav__sub nav__sub--alt"
data-nav="erasure-code-calculator">
<img width="30" height="24" class="h-6" src="{{ pathto('_static/img/icons/erasure-code-calculator.svg',1) }}"
alt="Determine your raw and usable capacity" />
Erasure Code Calculator
</a>
<a href="https://min.io/product/reference-hardware" class="nav__sub nav__sub--alt" data-nav="reference-hardware">
<img width="30" height="18" src="{{ pathto('_static/img/icons/ref-hardware.svg',1) }}"
alt="MinIO's Recommended Hardware Configuration" />
Reference Hardware
</a>
<i class="nav__seperator"></i>
</div>
</div>
</div>
</div>
<div class="nav__item">
<div class="nav__link nav__link--dropdown">
<span>Solutions</span>
</div>
<div class="nav__link nav__link--dropdown">
<span>Solutions</span>
</div>
<div class="nav__dropdown nav__dropdown--cols">
<div class="nav__dropdown__inner">
<a href="/solutions/object-storage-for-ai" class="nav__sub" data-nav="ai-ml">
<span>AI Storage</span>
<small>Object storage is powering the AI revolution. Learn how MinIO
is leading the AI storage market through performance at
scale.</small>
</a>
<a href="/solutions/modern-data-lakes-lakehouses" class="nav__sub" data-nav="datalakes">
<span>Modern Datalakes</span>
<small>Modern, multi-engine datalakes depend on object stores that
deliver performance at scale. Learn more about this core MinIO
use case.</small>
</a>
<a href="/hybrid-multi-cloud-storage" class="nav__sub" data-nav="hybrid-cloud">
<span>Hybrid Cloud</span>
<small>Effective multi-cloud storage strategies rely on utilizing
architecture and tools that can function seamlessly across
diverse environments.</small>
</a>
<a href="/solutions/optimize-splunk-smartstore-performance" class="nav__sub" data-nav="splunk">
<span>Splunk</span>
<small>Find out how MinIO is delivering performance at scale for
Splunk SmartStores.</small>
</a>
<a href="/solutions/snowflake" class="nav__sub" data-nav="snowflake">
<span>Snowflake</span>
<small>Query and analyze multiple data sources, including streaming
data, residing on MinIO with the Snowflake Data Cloud. No need
to move the data, just query using SnowSQL.</small>
</a>
<a href="/solutions/sqlserver" class="nav__sub" data-nav="sql-server">
<span>SQL Server</span>
<small>Discover how to pair SQL Server 2022 with MinIO to run queries
on your data on any cloud - without having to move it.</small>
</a>
<a href="/solutions/hdfs-migration" class="nav__sub" data-nav="hdfs-migration">
<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="/solutions/vmware" class="nav__sub" data-nav="vmware">
<span>VMware</span>
<small>Discover how MinIO integrates with VMware across the portfolio
from the Persistent Data platform to TKG and how we support
their Kubernetes ambitions.</small>
</a>
<a href="/solutions/veeam" class="nav__sub" data-nav="veeam">
<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="/solutions/commvault" class="nav__sub" data-nav="commvault">
<span>Commvault</span>
<small>Learn how Commvault and MinIO are partnered to deliver
performance at scale for mission critical backup and restore
workloads.</small>
</a>
<a href="https://min.io/product/integrations" class="nav__sub" data-nav="integrations">
<span>Integrations</span>
<small>Browse our vast portfolio of integrations.</small>
</a>
</div>
</div>
</div>
<div class="nav__dropdown nav__dropdown--solutions">
<div class="nav__dropdown__inner">
<a href="https://min.io/solutions/object-storage-for-ai" class="nav__sub" data-nav="ai-ml">
<span>AI Storage</span>
<small>Object storage is powering the AI revolution. Learn how
MinIO is leading the AI storage market through
performance at scale.</small>
</a>
<a href="https://min.io/solutions/modern-data-lakes-lakehouses" class="nav__sub" data-nav="datalakes">
<span>Modern Datalakes</span>
<small>Modern, multi-engine datalakes depend on object stores that
deliver performance at scale. Learn more about this core MinIO
use case.</small>
</a>
<a href="https://min.io/hybrid-multi-cloud-storage" class="nav__sub" data-nav="hybrid-cloud">
<span>Hybrid Cloud</span>
<small>Effective multi-cloud storage strategies rely on utilizing
architecture and tools that can function seamlessly across
diverse environments.</small>
</a>
<a href="https://min.io/solutions/optimize-splunk-smartstore-performance" class="nav__sub" data-nav="splunk">
<span>Splunk</span>
<small>Find out how MinIO is delivering performance at scale for
Splunk SmartStores.</small>
</a>
<a href="https://min.io/solutions/snowflake" class="nav__sub" data-nav="snowflake">
<span>Snowflake</span>
<small>Query and analyze multiple data sources, including streaming
data, residing on MinIO with the Snowflake Data Cloud. No need
to move the data, just query using SnowSQL.</small>
</a>
<a href="https://min.io/solutions/sqlserver" class="nav__sub" data-nav="sql-server">
<span>SQL Server</span>
<small>Discover how to pair SQL Server 2022 with MinIO to run queries
on your data on any cloud - without having to move it.</small>
</a>
<a href="https://min.io/solutions/hdfs-migration" class="nav__sub" data-nav="hdfs-migration">
<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/vmware" class="nav__sub" data-nav="vmware">
<span>VMware</span>
<small>Discover how MinIO integrates with VMware across the portfolio
from the Persistent Data platform to TKG and how we support
their Kubernetes ambitions.</small>
</a>
<a href="https://min.io/solutions/veeam" class="nav__sub" data-nav="veeam">
<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/commvault" class="nav__sub" data-nav="commvault">
<span>Commvault</span>
<small>Learn how Commvault and MinIO are partnered to deliver
performance at scale for mission critical backup and restore
workloads.</small>
</a>
<a href="https://min.io/product/integrations" class="nav__sub" data-nav="integrations">
<span>Integrations</span>
<small>Browse our vast portfolio of integrations.</small>
</a>
</div>
</div>
</div>
<div class="nav__item">
<div class="nav__link nav__link--dropdown">
<span>Community</span>
</div>
<div class="nav__dropdown nav__dropdown--cols nav__dropdown--cols-3">
<div class="nav__dropdown__inner">
<a target="_blank" rel="noreferrer noopener" href="https://github.com/minio/" class="nav__sub">
<span>GitHub</span>
<small>Join our GitHub open source community: explore, experiment, ask questions, and contribute.</small>
</a>
<a target="_blank" rel="noreferrer noopener" href="https://slack.min.io" class="nav__sub">
<span>Slack Channel</span>
<small>The MinIO Community Slack provides an open forum for discussing topics related to MinIO. All support is provided on a best-effort basis.</small>
</a>
</div>
</div>
</div>
<a href="https://min.io/docs/minio/kubernetes/upstream" class="nav__link nav__link--active">
<a href="https://min.io/docs/minio/kubernetes/upstream" class="nav__link active">
<span>Docs</span>
</a>