Skip to content

Commit 4650b69

Browse files
ajay-dhangarajay-dhangar
committed
Add: mega navbar
1 parent dab6018 commit 4650b69

File tree

2 files changed

+99
-112
lines changed

2 files changed

+99
-112
lines changed

‎docusaurus.config.js‎

Lines changed: 54 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -129,88 +129,75 @@ const config = {
129129
items: [
130130
{
131131
type: "dropdown",
132-
html: '<span class="nav-emoji">📚</span> Tutorials',
132+
html: '<span class="nav-emoji">🗺️</span> Tutorials',
133133
position: "left",
134+
className: "mega-menu", // Add a custom class for CSS styling
134135
items: [
135136
{
136137
type: "html",
137-
value: `<div class="dropdown_grid">
138-
<a class="dropbtn" href="/tutorial/">Absolute Beginner</a>
139-
<div class="dropdown-content">
140-
<a href="#" class="nav__icons"> <img src="/tutorial/icons/html-5.svg" title="HTML5" alt="HTML" /> </a>
141-
<a href="#" class="nav__icons"> <img src="/tutorial/icons/css.svg" title="CSS" alt="CSS" /> </a>
142-
<a href="#" class="nav__icons"> <img src="/tutorial/icons/js.svg" title="JavaScript" alt="JavaScript" /> </a>
143-
<a href="#" class="nav__icons"> <img src="/tutorial/icons/jsx.svg" title="React.Js" alt="React" /> </a>
144-
<a href="#" class="nav__icons"> <img src="/tutorial/icons/ts.svg" title="TypeScript" alt="TypeScript" /> </a>
145-
<a href="#" class="nav__icons"> <img src="/tutorial/icons/py.svg" title="Python" alt="Python" /> </a>
146-
<a href="#" class="nav__icons"> <img src="/tutorial/icons/tailwind-css.svg" title="Tailwind CSS" alt="Tailwind" /> </a>
147-
<a href="#" class="nav__icons"> <img src="/tutorial/icons/next-js.svg" title="NextJs" alt="Next" /> </a>
148-
</div>
149-
</div>`,
150-
},
151-
152-
{
153-
type: "html",
154-
value: '<hr style="margin: 0.3rem 0;">',
155-
},
156-
157-
{
158-
type: "html",
159-
value: `<div class="dropdown_grid">
160-
<a class="dropbtn" href="#">Web Development</a>
161-
<div class="dropdown-content">
162-
<a href="#" class="nav__icons"> <img src="/tutorial/icons/html-5.svg" alt="HTML" /> </a>
163-
<a href="#" class="nav__icons"> <img src="/tutorial/icons/jsx.svg" alt="React" /> </a>
164-
</div>
165-
</div>`,
166-
},
138+
value: `
139+
<div class="mega-menu-container">
140+
<div class="mega-menu-column">
141+
<h3>🚀 Foundations</h3>
142+
<hr style="margin: 0.5rem 0; opacity: 0.4;">
143+
<a href="#">🐣 Absolute Beginner</a>
144+
<a href="#">🏛️ Computer Science</a>
145+
<a href="#">💻 Languages & Platforms</a>
146+
<a href="/tutorial/docs/git/introduction">🌿 Git & GitHub</a>
147+
</div>
148+
149+
<div class="mega-menu-column">
150+
<h3>🌐 Development</h3>
151+
<hr style="margin: 0.5rem 0; opacity: 0.4;">
152+
<a href="#">🌍 Web Development</a>
153+
<a href="#">🧩 Frameworks</a>
154+
<a href="#">📱 Mobile Development</a>
155+
<a href="#">🎮 Game Development</a>
156+
</div>
167157
168-
{
169-
type: "html",
170-
value: '<hr style="margin: 0.3rem 0;">',
171-
},
158+
<div class="mega-menu-column">
159+
<h3>⚙️ Data & Ops</h3>
160+
<hr style="margin: 0.5rem 0; opacity: 0.4;">
161+
<a href="#">🤖 AI & Machine Learning</a>
162+
<a href="#">🗄️ Databases</a>
163+
<a href="#">♾️ DevOps & Cloud</a>
164+
<a href="#">🛡️ Cyber Security</a>
165+
</div>
172166
173-
{
174-
type: "html",
175-
value: `<div class="dropdown_grid">
176-
<a class="dropbtn" href="#" target="_self">Frameworks</a>
177-
<div class="dropdown-content dsa-content ">
178-
<a href="#" target="_self" class="nav__icons"> 🧩Problems </a> <br />
179-
<a href="#" target="_self" class="nav__icons "> 💡Solutions </a>
180-
</div>
181-
</div>`,
167+
<div class="mega-menu-column">
168+
<h3>💼 Career & Quality</h3>
169+
<hr style="margin: 0.5rem 0; opacity: 0.4;">
170+
<a href="#">👔 Management</a>
171+
<a href="#">🎨 Design & UX</a>
172+
<a href="#">⛓️ Blockchain</a>
173+
<a href="#">✅ Best Practices</a>
174+
</div>
175+
</div>
176+
`,
182177
},
183178
{
184179
type: "html",
185-
value: '<hr style="margin: 0.3rem 0;">',
180+
value: '<hr style="margin: 0.5rem 0; opacity: 0.2;">',
186181
},
187182
{
188-
to: "/tutorial/",
189-
label: "View All Tutorials",
190-
style: {
191-
margin: "0.5rem 0",
192-
padding: "0.5rem 1rem",
193-
borderRadius: "4px",
194-
fontSize: "0.8rem",
195-
textAlign: "center",
196-
fontWeight: "bold",
197-
},
183+
to: "/",
184+
label: "Explore All Tutorials",
185+
className: "view-all-link",
198186
},
199187
],
200188
},
201-
{
202-
to: "https://codeharborhub.github.io/blog",
203-
html: '<span class="nav-emoji">📝</span> Blog',
204-
position: "right",
205-
},
206-
{
207-
href: "https://github.com/codeharborhub",
208-
position: "right",
209-
className: "header-github-link",
210-
"aria-label": "GitHub repository",
211-
},
189+
// {
190+
// to: "https://codeharborhub.github.io/blog",
191+
// html: '<span class="nav-emoji">📝</span> Blog',
192+
// position: "right",
193+
// },
194+
// {
195+
// href: "https://github.com/codeharborhub",
196+
// position: "right",
197+
// className: "header-github-link",
198+
// "aria-label": "GitHub repository",
199+
// },
212200
],
213-
// hideOnScroll: true,
214201
},
215202
footer: {
216203
style: "dark",

‎src/css/custom.css‎

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -253,64 +253,64 @@ mark {
253253
-webkit-text-fill-color: transparent;
254254
}
255255

256-
.dropdown_grid {
256+
/* [data-theme='dark'] #__docusaurus_skipToContent_fallback {
257+
background: linear-gradient(rgba(15, 23, 42, 0.796), rgba(15, 23, 42, 0.23));
258+
} */
259+
[data-theme="dark"] .navbar {
260+
background: rgba(15, 23, 42, 0.862);
261+
border-bottom: 1px solid #4e8da0db;
262+
}
263+
264+
@keyframes progressAnim {
265+
to {
266+
width: 70%;
267+
}
268+
}
269+
/* Container for the 4-column layout */
270+
.mega-menu-container {
257271
display: grid;
258-
grid-template-columns: repeat(3, 1fr);
272+
grid-template-columns: repeat(4, 170px);
259273
gap: 10px;
274+
padding: 1rem 0.5rem;
275+
background: var(--ifm-background-surface-color);
260276
}
261277

262-
.dropbtn {
263-
width: 130px;
264-
background-color: transparent;
278+
.mega-menu-column h3 {
279+
font-size: 0.9rem;
280+
text-transform: uppercase;
265281
color: var(--ifm-color-primary);
266-
padding: 14px;
267-
font-size: 16px;
268-
border: none;
269-
cursor: pointer;
270-
border-right: 1px solid #4e8da0db;
271-
margin: 2px;
282+
/* margin-bottom: 0.8rem; */
283+
/* border-bottom: 1px solid var(--ifm-color-emphasis-200); */
284+
/* padding-bottom: 4px; */
272285
}
273286

274-
.dropdown-content {
275-
position: relative;
276-
min-width: 180px;
277-
}
278-
@media (max-width: 400px) {
279-
.dsa-content {
280-
flex-direction: column;
281-
}
282-
}
283-
.dropdown-content a:hover {
287+
.mega-menu-column a {
288+
display: block;
289+
padding: 6px 0;
290+
font-size: 0.85rem;
291+
color: var(--ifm-menu-color);
284292
text-decoration: none;
285-
background: linear-gradient(
286-
90deg,
287-
transparent 0%,
288-
rgba(252, 176, 69, 0.285) 50%,
289-
rgba(253, 29, 29, 0.33) 100%
290-
);
291-
border-radius: 50% 40%;
293+
transition: transform 0.2s ease;
292294
}
293295

294-
.nav__icons img {
295-
width: 35px;
296-
height: 35px;
297-
object-fit: contain;
298-
}
299-
300-
.nav__icons img:hover {
301-
transform: scale(1.2);
296+
.mega-menu-column a:hover {
297+
color: var(--ifm-color-primary);
298+
transform: translateX(2px);
299+
text-decoration: none;
302300
}
303301

304-
/* [data-theme='dark'] #__docusaurus_skipToContent_fallback {
305-
background: linear-gradient(rgba(15, 23, 42, 0.796), rgba(15, 23, 42, 0.23));
306-
} */
307-
[data-theme="dark"] .navbar {
308-
background: rgba(15, 23, 42, 0.862);
309-
border-bottom: 1px solid #4e8da0db;
302+
/* Style for the 'View All' footer link */
303+
.view-all-link {
304+
text-align: center;
305+
font-weight: bold;
306+
font-size: 0.9rem;
307+
color: var(--ifm-color-primary) !important;
310308
}
311309

312-
@keyframes progressAnim {
313-
to {
314-
width: 70%;
310+
/* Adjust for smaller screens */
311+
@media (max-width: 996px) {
312+
.mega-menu-container {
313+
grid-template-columns: 1fr 1fr;
315314
}
316315
}
316+

0 commit comments

Comments
 (0)