From c4c8b39f6ec65e2f6ca4ea1528dafce2d66ac421 Mon Sep 17 00:00:00 2001 From: Sneha-chourey Date: Sat, 25 Oct 2025 22:11:14 +0530 Subject: [PATCH] Update navbar styling --- opsimate-docs/docusaurus.config.js | 330 ++++++++++++++++++----------- opsimate-docs/src/css/custom.css | 27 +++ 2 files changed, 236 insertions(+), 121 deletions(-) diff --git a/opsimate-docs/docusaurus.config.js b/opsimate-docs/docusaurus.config.js index a6f1e07..855e8ed 100644 --- a/opsimate-docs/docusaurus.config.js +++ b/opsimate-docs/docusaurus.config.js @@ -1,3 +1,200 @@ +// // docusaurus.config.js +// module.exports = { +// title: 'OpsiMate', +// tagline: 'One console for servers, Docker, and Kubernetes', +// url: 'https://your-site.com', +// baseUrl: '/', +// favicon: 'img/favicon.ico', +// organizationName: 'OpsiMate', +// projectName: 'documentation', + +// onBrokenLinks: 'warn', +// onBrokenMarkdownLinks: 'warn', + +// presets: [ +// [ +// 'classic', +// { +// docs: { +// routeBasePath: '/docs', +// sidebarPath: require.resolve('./sidebars.js'), +// showLastUpdateTime: true, +// editUrl: 'https://github.com/OpsiMate/documentation/edit/main/', +// }, +// blog: false, +// theme: { customCss: require.resolve('./src/css/custom.css') }, +// }, +// ], +// ], + +// themeConfig: { +// // Color mode configuration - THIS ENABLES THE TOGGLE +// colorMode: { +// defaultMode: 'light', +// disableSwitch: false, // This enables the toggle! +// respectPrefersColorScheme: true, +// }, + +// navbar: { +// title: 'OpsiMate', +// logo: { alt: 'OpsiMate Logo', src: 'img/logo.png' }, +// items: [ +// { type: 'docSidebar', sidebarId: 'tutorialSidebar', position: 'left', label: 'Docs' }, +// { type: 'doc', docId: 'dashboards/overview', position: 'left', label: 'Dashboard' }, +// { type: 'doc', docId: 'alerts/adding-alerts', position: 'left', label: 'Alerts' }, +// { type: 'doc', docId: 'integrations/overview', position: 'left', label: 'Integrations' }, +// { type: 'doc', docId: 'user-management/register-login', position: 'left', label: 'User Management' }, +// { +// href: 'https://www.opsimate.com/', +// label: 'Website', +// position: 'left' +// }, + +// // --- Right-side icons (GitHub + Slack) --- +// { +// type: 'html', +// position: 'right', +// value: ` +//
+// +// GitHub +// +// +// Slack +// +//
+// `, +// }, +// ], +// }, + +// footer: { +// style: 'dark', +// links: [ +// { +// title: 'Integrate with', +// items: [ +// { +// html: ` +//
+// +//
+// Grafana +//
+// Grafana +// +// +//
+// Kibana +//
+// Kibana +// +// +//
+// Docker +//
+// Docker +// +// +//
+// Kubernetes +//
+// Kubernetes +// +// +//
+// Systemd +//
+// Systemd +// +// +//
+// Datadog +//
+// Datadog +// +//
+// `, +// }, +// ], +// }, + +// { + +// title: 'Community', +// items: [ +// { +// html: ` +//
+// +// GitHub +// +// +// Slack +// +//
+// `, +// }, +// ], +// }, +// ], +// { +// title: 'Resources', +// items: [ +// { +// label: 'Main Website', +// href: 'https://www.opsimate.com/', +// }, +// { +// label: 'Documentation', +// href: '/', +// }, +// ], +// }, +// ], +// // --- VERCEL CARD FOOTER BOTTOM --- +// copyright: ` +//
+//
+//
+// Copyright © ${new Date().getFullYear()} OpsiMate. All rights reserved. +//
+ +// +//
+// Deployed on +// +//
+// +//
+//
+// `, +// }, + +// algolia: { +// appId: 'GADD2TVEH5', +// apiKey: 'cc7b48e597d80aa85aad4c50df82812f', +// indexName: 'OpsiMate Docs', +// contextualSearch: true, +// }, +// }, +// }; + // docusaurus.config.js module.exports = { title: 'OpsiMate', @@ -28,10 +225,9 @@ module.exports = { ], themeConfig: { - // Color mode configuration - THIS ENABLES THE TOGGLE colorMode: { defaultMode: 'light', - disableSwitch: false, // This enables the toggle! + disableSwitch: false, respectPrefersColorScheme: true, }, @@ -44,32 +240,14 @@ module.exports = { { type: 'doc', docId: 'alerts/adding-alerts', position: 'left', label: 'Alerts' }, { type: 'doc', docId: 'integrations/overview', position: 'left', label: 'Integrations' }, { type: 'doc', docId: 'user-management/register-login', position: 'left', label: 'User Management' }, - { - href: 'https://www.opsimate.com/', - label: 'Website', - position: 'left' - }, + { href: 'https://www.opsimate.com/', label: 'Website', position: 'left' }, - // --- Right-side icons (GitHub + Slack) --- + // Simple HTML for right icons { type: 'html', position: 'right', - value: ` -
- - GitHub - - - Slack - -
- `, + value: `GitHub + Slack`, }, ], }, @@ -78,112 +256,23 @@ module.exports = { style: 'dark', links: [ { - title: 'Integrate with', + title: 'Community', items: [ { - html: ` -
- -
- Grafana -
- Grafana - - -
- Kibana -
- Kibana - - -
- Docker -
- Docker - - -
- Kubernetes -
- Kubernetes - - -
- Systemd -
- Systemd - - -
- Datadog -
- Datadog - -
- `, - }, + html: `GitHub + Slack`, + }, ], }, - - { - - title: 'Community', - items: [ - { - html: ` -
- - GitHub - - - Slack - -
- `, - }, - ], - }, - ], { title: 'Resources', items: [ - { - label: 'Main Website', - href: 'https://www.opsimate.com/', - }, - { - label: 'Documentation', - href: '/', - }, + { label: 'Main Website', href: 'https://www.opsimate.com/' }, + { label: 'Documentation', href: '/' }, ], }, ], - // --- VERCEL CARD FOOTER BOTTOM --- - copyright: ` -
-
-
- Copyright © ${new Date().getFullYear()} OpsiMate. All rights reserved. -
- - -
- Deployed on - -
- -
-
- `, + copyright: `Copyright © ${new Date().getFullYear()} OpsiMate. All rights reserved.`, }, algolia: { @@ -195,4 +284,3 @@ module.exports = { }, }; - diff --git a/opsimate-docs/src/css/custom.css b/opsimate-docs/src/css/custom.css index d77c525..7e184c0 100644 --- a/opsimate-docs/src/css/custom.css +++ b/opsimate-docs/src/css/custom.css @@ -864,3 +864,30 @@ button[class*="toggle"] { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); margin: 1rem 0; } +/* ===== NAVBAR SIZE & SPACING ===== */ +.navbar { + min-height: 80px !important; /* taller navbar */ + padding: 1rem 2rem !important; /* increase spacing */ +} + +.navbar__logo img { + height: 50px !important; /* bigger logo */ + width: auto; +} + +.navbar__title, +.navbar__brand { + font-size: 1.2rem !important; /* slightly bigger text */ + font-weight: 700 !important; +} + +.navbar__link { + font-size: 1rem !important; /* larger menu items */ + padding: 0.8rem 1rem !important; /* more spacing around links */ +} + +/* Adjust icons spacing for bigger navbar */ +.navbar-icons-container { + gap: 12px !important; + align-items: center; +}