Skip to content

Instantly share code, notes, and snippets.

@arun0009

arun0009/_sidebar.md

Created February 20, 2026 07:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save arun0009/b4b8c1ce84d0f1b12d4c0dfa1391a46f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save arun0009/b4b8c1ce84d0f1b12d4c0dfa1391a46f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
_sidebar.md
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Docsify-saurus</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<!-- Core CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/style.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-breadcrumb@latest/dist/breadcrumb.min.css">
<style>
:root {
--theme-color: #25c2a0;
--sidebar-bg: #f5f6f7;
--sidebar-hover: rgba(37, 194, 160, 0.08);
--sidebar-active-bg: rgba(37, 194, 160, 0.12);
--toc-border: #ebedf0;
--header-height: 60px;
--content-max-width: 1000px;
}
/* ===== TOP NAVBAR ===== */
.app-nav-custom {
position: fixed;
top: 0; left:0;
width:100%;
height: var(--header-height);
display: flex;
align-items: center;
padding: 0 20px;
background-color: rgba(255,255,255,0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0,0,0,0.08);
z-index: 1000;
font-weight: 600;
}
.app-nav-custom .logo { font-size:1.2rem; font-weight:700; color: var(--theme-color); text-decoration:none;}
.app-nav-custom nav {
margin-left:auto;
display:flex;
gap:20px;
margin-right:50px; /* Room for dark/light toggle */
}
.app-nav-custom nav a { text-decoration:none; color: inherit; font-weight:500;}
[data-theme='dark'] .app-nav-custom { background-color: rgba(27,27,29,0.9); border-bottom: 1px solid rgba(255,255,255,0.1);}
/* ===== SIDEBAR ===== */
.sidebar { padding-top: var(--header-height) !important; background-color: var(--sidebar-bg) !important; }
.sidebar-nav li > a {
font-weight:500;
margin:2px 10px;
border-radius:6px;
padding:8px 12px !important;
transition: all 0.2s;
display:block;
}
.sidebar-nav li > a:hover { background: var(--sidebar-hover);}
.sidebar-nav li.active > a {
background: var(--sidebar-active-bg);
color: var(--theme-color) !important;
font-weight:600;
border-left:3px solid var(--theme-color);
margin-left: -3px;
}
/* ===== CONTENT ===== */
.content { padding-top: var(--header-height); max-width: var(--content-max-width); }
/* ===== SEARCH ===== */
.search { padding:15px; border-bottom:1px solid rgba(0,0,0,0.05);}
.search input { background:#ebedf0 !important; border-radius:8px !important; padding:10px 12px !important; width:100%;}
[data-theme='dark'] .search input { background:#303032 !important; }
/* ===== BREADCRUMBS ===== */
.docsify-breadcrumb { margin-top:10px; font-size:14px; color:#606770; }
/* ===== RIGHT TOC ===== */
.page_toc {
position: fixed; top:100px; right:30px; width:220px;
border-left:1px solid var(--toc-border);
font-size:13px;
padding-left:15px;
}
.page_toc div.active { color: var(--theme-color) !important; border-left:2px solid var(--theme-color); margin-left:-17px; padding-left:15px;}
.page_toc .toc-h3 { padding-left:10px; font-size:12px; color:#555; }
/* ===== DARK/LIGHT TOGGLE ===== */
#docsify-darklight-theme { top:15px !important; right:20px !important; z-index:1001;}
/* ===== MOBILE ===== */
.menu-toggle { display:none; margin-left:auto; font-size:24px; cursor:pointer;}
@media(max-width:768px) {
.menu-toggle{display:block;}
.page_toc{display:none;}
.app-nav-custom{padding:0 15px;}
.app-nav-custom nav{display:none;} /* Hide nav links on mobile */
}
</style>
</head>
<body>
<header class="app-nav-custom">
<a href="#/" class="logo">MyDocs</a>
<nav>
<a href="#/getting-started">Getting Started</a>
<a href="#/guides">Guides</a>
<a href="#/api">API</a>
<a href="#/blog">Blog</a>
</nav>
<div class="menu-toggle" onclick="toggleSidebar()">☰</div>
</header>
<div id="app">Loading...</div>
<script>
window.$docsify = {
name:'MyDocs',
repo:'',
loadSidebar:true,
loadNavbar:false, // Prevent Docsify from injecting a second navbar
subMaxLevel:3,
auto2top:true,
search:{ maxAge:86400000, paths:'auto', placeholder:'Search docs...', noData:'No results!', depth:6},
breadcrumb:{ showHome:true, separator:' › ', casing:'capitalize'},
darklightTheme:{
defaultTheme:'light',
dark:{ background:'#1b1b1d', textColor:'#f5f6f7', accent:'#25c2a0' },
light:{ background:'#ffffff', textColor:'#1c1e21', accent:'#25c2a0' }
},
toc:{ scope:'.markdown-section', headings:'h2, h3', title:'On this page'},
flexibleAlerts:{ style:'flat'},
sidebarDisplayLevel:1,
// Scroll spy for sidebar highlighting
plugins:[
function(hook){
hook.doneEach(function(){
const links=document.querySelectorAll('.sidebar-nav a');
links.forEach(l=>l.classList.remove('active'));
const active=Array.from(links).find(l=>l.href===window.location.href);
if(active) active.classList.add('active');
});
}
]
}
function toggleSidebar(){ document.body.classList.toggle('close'); }
</script>
<!-- DOCSIFY CORE + PLUGINS -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/index.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/docsify-breadcrumb@latest/dist/index.min.js"></script>
<script src="https://unpkg.com/docsify-plugin-toc@1.3.1/dist/docsify-plugin-toc.min.js"></script>
<script src="https://unpkg.com/docsify-plugin-flexible-alerts"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment