Skip to content

Fix navbar UX #211

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tamalsaha merged 12 commits into from
Jun 4, 2026
Merged

Fix navbar UX #211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
2fb74b3
Fix sass watch issue
mohin7 Jun 3, 2026
b21102e
Update navbar dropdown styles
mohin7 Jun 3, 2026
118628f
Update navbar fixed
mohin7 Jun 3, 2026
62dffcf
Fix responsive desing nav
mohin7 Jun 3, 2026
d59ceb0
Fix navbar resources dropdown
mohin7 Jun 4, 2026
ac838c7
Remove refactor scss
mohin7 Jun 4, 2026
c917494
Update navbar
mohin7 Jun 4, 2026
8072a0f
Remove resource nav
mohin7 Jun 4, 2026
25cbfa0
Refactor scss files
mohin7 Jun 4, 2026
ecdca3d
Update border radius for buttons
mohin7 Jun 4, 2026
a537b48
Move left nav items to the right side
mohin7 Jun 4, 2026
595b5e0
Fix responsive issues
mohin7 Jun 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 1 addition & 9 deletions hugo_stats.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@
"arrow",
"arrow-right",
"arrows",
"back-button",
"bb-1",
"benefit-item",
"benefits-section",
Expand Down Expand Up @@ -108,7 +107,6 @@
"card-offset-10",
"card-offset-11",
"card-offset-12",
"card-offset-13",
"card-offset-2",
"card-offset-3",
"card-offset-4",
Expand Down Expand Up @@ -357,7 +355,6 @@
"illustration-area",
"image",
"img",
"inline-button",
"input",
"is-1-mobile",
"is-10",
Expand Down Expand Up @@ -429,7 +426,6 @@
"is-one-thirds-fullhd",
"is-paddingless",
"is-primary",
"is-prod-ace-platform",
"is-prod-kubedb",
"is-prod-kubestash",
"is-prod-kubevault",
Expand All @@ -442,7 +438,6 @@
"is-services",
"is-shadowless",
"is-show",
"is-size-6",
"is-size-7",
"is-small",
"is-sticky",
Expand All @@ -464,7 +459,6 @@
"left-sidebar",
"left-sidebar-inner",
"link",
"list-items",
"location",
"location-area",
"logo-name",
Expand Down Expand Up @@ -582,7 +576,7 @@
"resource-card",
"resource-content",
"resource-thumbnail",
"resources-list",
"resources-menu",
"reverse-column-mobile",
"reverse-row-order",
"right-content",
Expand Down Expand Up @@ -722,7 +716,6 @@
"webinar-title",
"webinar-video",
"whats-new",
"width-12",
"width-20",
"working-scenarios-section",
"z-1"
Expand Down Expand Up @@ -820,7 +813,6 @@
"personal-data",
"phone",
"plaid",
"prod-ace-platform",
"prod-kubedb",
"prod-kubestash",
"prod-kubevault",
Expand Down
2 changes: 1 addition & 1 deletion layouts/_default/embed_console.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
.button.ac-button {
border:1px solid var(--ac-primary, #1c1c1c);
height: 38px;
border-radius: 0.125rem;
border-radius: 8px;
padding-inline: 24px;
font-size: .875rem;
font-family: roboto,sans-serif;
Expand Down
181 changes: 49 additions & 132 deletions layouts/partials/header/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,19 +54,43 @@
<div class="is-flex is-justify-content-space-between is-fullwidth">
<!-- navbar items start -->
<ul class="navbar-left-group">
<li class="nav-item">

</ul>
<!-- navbar items end -->
<!-- if webinar exist script -->
<script type="text/javascript">
(function () {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var result = JSON.parse(xhr.responseText);
if (result.schedules) {
let endDate = new Date(result.schedules[0]).getTime();
let startDate = new Date().getTime();
let timeRemaining = parseInt((endDate - startDate) / 1000);
if (timeRemaining >= 0) {
document.querySelector('.whats-new').classList.add('is-block')
}
}
}
}
} //
// console.log('GET', 'https://x.appscode.com/_/webinars/');
xhr.open('GET', 'https://x.appscode.com/_/webinars/');
xhr.send();
}());
</script>
<!-- navbar items start -->
<div class="navbar-right-group">
<ul>
<li class="nav-item">

<button class="link">Products <i class="fa fa-angle-down" aria-hidden="true"></i></button>
<div class="mega-menu-wrapper">

<!-- ac-grid-container -->
<div class="mega-menu-inner container">
<button class="button ac-button inline-button back-button">
<span class="icon p-0">
<iconify-icon icon="heroicons:arrow-uturn-left"></iconify-icon>
</span>
<span>Back</span>
</button>
<!-- product start -->
<div class="product-menu">
{{ range $item := $.Site.Data.config.productMenu.c0 }}
Expand All @@ -78,7 +102,7 @@
<img src="{{ $p.icon.src }}" alt="{{ $p.icon.alt }}" loading="lazy">
</div>
<div class="product-info">
<h2 class="is-size-6 is-flex">{{ $p.name }}
<h2 class="is-flex">{{ $p.name }}
{{ if eq ($p.name) "KubeStash" }}
<span class="whats-new is-relative is-block" style="right: -2px; top: -12px;">New</span>
{{ end }}
Expand All @@ -103,7 +127,7 @@ <h2 class="is-size-6 is-flex">{{ $p.name }}
<img src="{{ $p.icon.src }}" alt="{{ $p.icon.alt }}" loading="lazy">
</div>
<div class="product-info">
<h2 class="is-size-6">{{ $p.name }}</h2>
<h2>{{ $p.name }}</h2>
<p>{{ $p.tagline | plainify }}</p>
</div>
<div class="navigate-icon">
Expand All @@ -124,7 +148,7 @@ <h2 class="is-size-6">{{ $p.name }}</h2>
<img src="{{ $p.icon.src }}" alt="{{ $p.icon.alt }}" loading="lazy">
</div>
<div class="product-info">
<h2 class="is-size-6">{{ $p.name }}</h2>
<h2>{{ $p.name }}</h2>
<p>{{ $p.tagline | plainify }}</p>
</div>
<div class="navigate-icon">
Expand All @@ -145,7 +169,7 @@ <h2 class="is-size-6">{{ $p.name }}</h2>
<img src="{{ $p.icon.src }}" alt="{{ $p.icon.alt }}" loading="lazy">
</div>
<div class="product-info">
<h2 class="is-size-6">{{ $p.name }}</h2>
<h2>{{ $p.name }}</h2>
<p>{{ $p.tagline | plainify }}</p>
</div>
<div class="navigate-icon">
Expand Down Expand Up @@ -316,12 +340,6 @@ <h2 class="is-size-6">{{ $p.name }}</h2>
<div class="mega-menu-inner container">

<!-- Back Button -->
<button class="button ac-button inline-button back-button" type="button">
<span class="icon p-0">
<iconify-icon icon="heroicons:arrow-uturn-left"></iconify-icon>
</span>
<span>Back</span>
</button>

<!-- Services Grid -->
<div class="product-menu services-grid" id="servicesGrid">
Expand All @@ -331,7 +349,7 @@ <h2 class="is-size-6">{{ $p.name }}</h2>
<iconify-icon {{ printf "icon=%s" $service.lucide_icon | safeHTMLAttr }} width="24" height="24"></iconify-icon>
</div>
<div class="product-info">
<h2 class="is-size-6 is-flex">{{ $service.title }}</h2>
<h2>{{ $service.title }}</h2>
<p>{{ $service.description }}</p>
</div>
<!-- <div class="navigate-icon">
Expand All @@ -355,7 +373,7 @@ <h2 class="is-size-6 is-flex">{{ $service.title }}</h2>
{{ end }}
</div> -->
<div class="product-info">
<h2 class="is-size-6 is-flex is-align-items-center gap-8">{{ $offering.title }} <span class="arrow-right icon">
<h2 class="is-flex is-align-items-center gap-8">{{ $offering.title }} <span class="arrow-right icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.5 12H5m8 6s6-4.419 6-6s-6-6-6-6"/></svg>
</span></h2>
<p>{{ $offering.description }}</p>
Expand All @@ -371,130 +389,36 @@ <h2 class="is-size-6 is-flex is-align-items-center gap-8">{{ $offering.title }}
</li>

<script>
document.querySelectorAll('.product-menu .single-product').forEach(item => {
document.querySelectorAll('#servicesGrid .single-product').forEach(item => {
item.addEventListener('mouseenter', function(e) {
e.preventDefault();
const serviceId = this.getAttribute('data-service-id');
showOfferings(serviceId);
if (!serviceId) return;

// Update is-active class
document.querySelectorAll('.product-menu .single-product').forEach(el => {
document.querySelectorAll('#servicesGrid .single-product').forEach(el => {
el.classList.remove('is-active');
});
this.classList.add('is-active');
});
});

function showOfferings(serviceId) {
document.querySelectorAll('.product-description.offering-content').forEach(el => {
el.classList.remove('is-block');
document.querySelectorAll('.offering-content').forEach(el => {
el.classList.remove('is-block');
});
const panel = document.getElementById('offerings-' + serviceId);
if (panel) panel.classList.add('is-block');
});

const el = document.getElementById('offerings-' + serviceId);
if (el) {
el.classList.add('is-block');
}
}
});
</script>
<!-- services end -->

<li class="nav-item">
<li class="nav-item resources-menu">
<button class="link">Resources <i class="fa fa-angle-down" aria-hidden="true"></i></button>
<div class="mega-menu-wrapper">
<!-- ac-grid-container -->
<div class="mega-menu-inner container">
<button class="button is-small ac-button inline-button back-button"><span
class="icon p-0">
<iconify-icon icon="heroicons:arrow-uturn-left"></iconify-icon>
</span>
<span>Back to Resources</span>
</button>
<!-- list menu items start -->
<div class="resources-list">
<!-- single resources list -->
<div class="list-items">
<h2>RESOURCES</h2>
<ul>
<!-- <li><a href="#" target="_blank">Forum</a></li> -->
<li><a href="{{.Site.Params.blog_url}}" class="is-flex is-gap-4">
<span>Blog</span>
<span class="is-flex width-12">
<iconify-icon icon="heroicons:arrow-up-right" width="14" height="14"></iconify-icon>
</span>
</a>
</li>
<li><a href="{{.Site.Params.docs_url}}" class="is-flex is-gap-4">
<span>Docs</span>
<span class="is-flex width-12">
<iconify-icon icon="heroicons:arrow-up-right" width="14" height="14"></iconify-icon>
</span>
</a></li>
<li><a
href="https://www.youtube.com/watch?v=4lkBt5UUEAQ&list=PLoiT1Gv2KR1hAtDDW7fHEi-s2y2H3DOgx"
target="_blank" class="is-flex is-gap-4">
<span>Webinars</span>
<span class="is-flex width-12">
<iconify-icon icon="heroicons:arrow-up-right" width="14" height="14"></iconify-icon>
</span>
</a>
</li>
<li><a href="{{.Site.Params.learn_url}}" class="is-flex is-gap-4">
<span>Learn</span>
<span class="is-flex width-12">
<iconify-icon icon="heroicons:arrow-up-right" width="14" height="14"></iconify-icon>
</span>
</a></li>
<li><a href="{{.Site.Params.youtube_url}}" target="_blank" class="is-flex is-gap-4">
<span>Demos</span>
<span class="is-flex width-12">
<iconify-icon icon="heroicons:arrow-up-right" width="14" height="14"></iconify-icon>
</span>
</a></li>
<!-- <li><a
href="https://www.youtube.com/watch?v=xSq0OdlVLRI&list=PLoiT1Gv2KR1gE-WK7dIQ5bsJ_RAVZnzP8"
target="_blank">Tutorials</a></li> -->
<!-- <li><a href="#" target="_blank">Community</a></li> -->
</ul>
</div>
<!-- single resources list -->

</div>
<!-- list menu items end -->
{{ partial "menu/resources-nav.html" (dict "page" . "site" .Site) }}

</div>
</div>
</li>
<li class="nav-item">
<a href="/webinar" class="link">Webinar <span class="whats-new">New</span></a>
</li>
</ul>
<!-- navbar items end -->
<!-- if webinar exist script -->
<script type="text/javascript">
(function () {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var result = JSON.parse(xhr.responseText);
if (result.schedules) {
let endDate = new Date(result.schedules[0]).getTime();
let startDate = new Date().getTime();
let timeRemaining = parseInt((endDate - startDate) / 1000);
if (timeRemaining >= 0) {
document.querySelector('.whats-new').classList.add('is-block')
}
}
}
}
} //
// console.log('GET', 'https://x.appscode.com/_/webinars/');
xhr.open('GET', 'https://x.appscode.com/_/webinars/');
xhr.send();
}());
</script>
<!-- navbar items start -->
<div class="navbar-right-group">
<ul>
<li class="nav-item">
<a href="/partner/" class="link">Partner</a>
</li>
Expand Down Expand Up @@ -648,13 +572,6 @@ <h2>RESOURCES</h2>

<!-- ac-grid-container -->
<div class="mega-menu-inner container">
<button class="button ac-button inline-button back-button">
<span
class="icon p-0">
<iconify-icon icon="heroicons:arrow-uturn-left"></iconify-icon>
</span>
<span>Back</span>
</button>
<!-- product start -->
<div class="product-menu database-list">
{{ range .Children }}
Expand Down
Loading
Loading