reverted change for navbar and fix overflow issue for dashboard

Author: Richajaishwal0

docusaurus.config.ts

@@ -93,12 +93,13 @@ const config: Config = {
       items: [
         {
           type: "dropdown",
-          html: '<span id="nav-docs"></span> Docs',
+          html: '<span class="nav-emoji">📚</span> Docs',
           position: "left",
           items: [
             {
               type: "html",
               value: `<div class="grid grid-cols-3 gap-4 w-xl">
+                <a class="border-r col-span-1" href="/courses/">Tutorials</a>
                 <a class="border-r col-span-1" href="/courses/">Tutorials</a>
                 <div class="grid grid-cols-4 col-span-2">
                   <a href="/docs/sql/intro-sql" class="nav__icons"> <img src="/icons/sql.svg" title="SQL" alt="SQL" /> </a>
@@ -115,6 +116,7 @@ const config: Config = {
             {
               type: "html",
               value: `<div class="grid grid-cols-3 gap-4">
+                <a class="border-r col-span-1" href="/courses/"> Courses </a>
                 <a class="border-r col-span-1" href="/courses/"> Courses </a>
                 <div class="grid grid-cols-4 col-span-2">
                   <a href="https://www.youtube.com/watch?v=GrTV59Y84S8&list=PLrLTYhoDFx-kiuFiGQqVpYYZ56pIhUW63&ab_channel=RecodeHive" class="nav__icons"> <img src="/icons/git.svg" alt="git" /> </a>
@@ -130,73 +132,74 @@ const config: Config = {
             {
               type: "html",
               value: `<div class="grid grid-cols-3 gap-4">
+                <a  class="border-r col-span-1" href="#" target="_self"> Interview Prep </a>
                 <a  class="border-r col-span-1" href="#" target="_self"> Interview Prep </a>
                 <div class="grid grid-cols-1 col-span-2">
-                  <a href="/interview-prep/" target="_self" class="nav__icons"><span id="nav-technical" style="display:inline-flex;align-items:center;"></span> Technical</a> <br />
-                  <a href="/interview-prep/" target="_self" class="nav__icons"><span id="nav-behavioral" style="display:inline-flex;align-items:center;"></span> Behavioral</a>
+                  <a href="/interview-prep/" target="_self" class="nav__icons"> 🧩Technical </a> <br />
+                  <a href="/interview-prep/" target="_self" class="nav__icons"> 💡Behavioral </a>
                 </div>
               </div>`,
             },
           ],
         },
         {
           to: "/showcase",
-          html: '<span id="nav-showcase"></span> Showcase',
+          html: '<span class="nav-emoji">🌍</span> Showcase',
           position: "left",
         },
         {
           to: "/dashboard",
-          html: '<span id="nav-dashboard"></span> Dashboard',
+          html: '<span class="nav-emoji">📊</span> Dashboard',
           position: "left",
         },
         {
           to: "/our-sponsors/",
-          html: '<span id="nav-donate"></span> Donate',
+          html: '<span class="nav-emoji">💰</span> Donate',
           position: "left",
         },
         {
           type: "dropdown",
-          html: '<span id="nav-devfolio"></span> Devfolio',
+          html: '<span class="nav-emoji">👩🏻‍💻</span> Devfolio',
           position: "left",
           items: [
             {
-              html: '<span id="nav-github" style="display:inline-flex;align-items:center;"></span> GitHub Profiles',
+              label: "💻GitHub Profiles",
               to: "https://dev.recodehive.com/devfolio",
             },
             {
-              html: '<span id="nav-badges" style="display:inline-flex;align-items:center;"></span> GitHub Badges',
+              label: "🎖️ GitHub Badges",
               to: "/badges/github-badges/",
             }, 
           ],
         },
         {
           to: "/blogs",
-          html: '<span id="nav-blogs"></span> Blogs',
+          html: '<span class="nav-emoji">📰</span> Blogs',
           position: "left",
         },
         {
           type: "dropdown",
-          html: '<span id="nav-more"></span> More',
+          html: '<span class="nav-emoji">🔗</span> More',
           position: "left",
           items: [
             {
-              html: '<span id="nav-ebooks" style="display:inline-flex;align-items:center;"></span> E-books',
+              label: "📚 E-books",
               to: "https://learn.recodehive.com/datascience",
             },
             {
               html: '<span id="nav-roadmap" style="display:inline-flex;align-items:center;"></span> Roadmap',
               to: "https://github.com/orgs/recodehive/projects/9",
             },
             {
-              html: '<span id="nav-community" style="display:inline-flex;align-items:center;"></span> Community',
+              label: "🤝 Community",
               to: "/community",
             },
             {
-              html: '<span id="nav-broadcast" style="display:inline-flex;align-items:center;"></span> Broadcast',
+              label: "📺 Broadcast",
               to: "/broadcasts/",
             },
             {
-              html: '<span id="nav-podcast" style="display:inline-flex;align-items:center;"></span> Podcast',
+              label: "🎙️ Podcast",
               to: "/podcasts/",
             },
           ],

src/css/custom.css

@@ -695,7 +695,7 @@ body {
 
 /* Force left alignment for all tabs */
 .tabs,
-[class*="tabs--"] {
+[class*='tabs--'] {
   display: flex !important;
   justify-content: flex-start !important;
   text-align: left !important;
@@ -706,18 +706,18 @@ body {
 
 /* Target all possible tab item variations */
 .tabs__item,
-[class*="tabs__item"],
+[class*='tabs__item'],
 .tabItem_LNqP,
-[role="tab"] {
+[role='tab'] {
   text-align: left !important;
   justify-content: flex-start !important;
 }
 
 /* Active tab styles */
 .tabs__item--active,
-[class*="tabs__item--active"],
-.tabItem_LNqP[aria-selected="true"],
-[role="tab"][aria-selected="true"] {
+[class*='tabs__item--active'],
+.tabItem_LNqP[aria-selected='true'],
+[role='tab'][aria-selected='true'] {
   border-color: var(--ifm-toc-border-color) !important;
   border-bottom-color: var(--ifm-background-color) !important;
   background: var(--ifm-background-color) !important;
@@ -727,21 +727,21 @@ body {
 
 /* Hover state */
 .tabs__item:not(.tabs__item--active):hover,
-[class*="tabs__item"]:not([class*="--active"]):hover,
-[role="tab"]:not([aria-selected="true"]):hover {
+[class*='tabs__item']:not([class*='--active']):hover,
+[role='tab']:not([aria-selected='true']):hover {
   background-color: var(--ifm-menu-color-background-active) !important;
 }
 
 /* Remove any right margin/padding that might be pushing content */
 .tabs-container,
-[class*="tabs-container"] {
+[class*='tabs-container'] {
   width: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
 }
 
 /* Ensure tab list takes full width */
-[role="tablist"] {
+[role='tablist'] {
   width: 100% !important;
   display: flex !important;
   justify-content: flex-start !important;
@@ -776,8 +776,7 @@ html.theme-light .text-gray-900 {
 }
 
 .modern-card-shadow {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 
 .modern-card-shadow-hover {
@@ -832,82 +831,63 @@ html {
 
 /* =====  BASIC FOOTER PROTECTION ===== */
 /* Prevent global dark theme container rule from affecting footer */
-[data-theme="dark"] .enhanced-footer .container {
+[data-theme='dark'] .enhanced-footer .container {
   background-color: transparent !important;
 }
 
 /* ===== FOOTER BACKGROUND PROTECTION ===== */
 /* Ensure footer maintains its gradient background in dark mode */
-[data-theme="dark"] .enhanced-footer {
-  background: linear-gradient(
-    135deg,
-    #0f0f23 0%,
-    #1a1a2e 25%,
-    #16213e 50%,
-    #0f3460 75%,
-    #533483 100%
-  ) !important;
+[data-theme='dark'] .enhanced-footer {
+  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important;
   color: #e2e8f0 !important;
 }
 
 /* ===== STEP 5: FOOTER SECTION PROTECTION ===== */
 /* Protect specific footer sections from global overrides */
-[data-theme="dark"] .enhanced-footer .footer-links-section {
+[data-theme='dark'] .enhanced-footer .footer-links-section {
   background: rgba(0, 0, 0, 0.15) !important;
 }
 
-[data-theme="dark"] .enhanced-footer .footer-bottom {
+[data-theme='dark'] .enhanced-footer .footer-bottom {
   background: rgba(0, 0, 0, 0.2) !important;
 }
 
 /* ===== STEP 6: MAXIMUM SPECIFICITY PROTECTION ===== */
 /* Override the exact problematic global rule with same specificity */
-[data-theme="dark"]
-  body:not(:has(.community-page))
-  .enhanced-footer
-  .container {
+[data-theme='dark'] body:not(:has(.community-page)) .enhanced-footer .container {
   background-color: transparent !important;
 }
 
-[data-theme="dark"] body:not(:has(.community-page)) .enhanced-footer {
-  background: linear-gradient(
-    135deg,
-    #0f0f23 0%,
-    #1a1a2e 25%,
-    #16213e 50%,
-    #0f3460 75%,
-    #533483 100%
-  ) !important;
+[data-theme='dark'] body:not(:has(.community-page)) .enhanced-footer {
+  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important;
   color: #e2e8f0 !important;
 }
 
 /* ===== STEP 7: COMPREHENSIVE ELEMENT PROTECTION ===== */
 /* Protect all footer elements from any global overrides */
-[data-theme="dark"] .enhanced-footer *,
-[data-theme="dark"] .enhanced-footer .row,
-[data-theme="dark"] .enhanced-footer .col,
-[data-theme="dark"] .enhanced-footer div,
-[data-theme="dark"] .enhanced-footer section {
+[data-theme='dark'] .enhanced-footer *,
+[data-theme='dark'] .enhanced-footer .row,
+[data-theme='dark'] .enhanced-footer .col,
+[data-theme='dark'] .enhanced-footer div,
+[data-theme='dark'] .enhanced-footer section {
   background-color: transparent !important;
 }
 
 /* Ensure text colors inherit properly */
-[data-theme="dark"] .enhanced-footer,
-[data-theme="dark"] .enhanced-footer * {
+[data-theme='dark'] .enhanced-footer,
+[data-theme='dark'] .enhanced-footer * {
   color: inherit !important;
 }
 
 /* ===== REMOVE THEME TOGGLE FROM MOBILE SIDEBAR AS THERE IS ONE ON THE NAVBAR ===== */
 @media (max-width: 1200px) {
   /* Aggressively hide theme toggle in mobile sidebar */
-  .navbar-sidebar__brand
-    button:not(.navbar-sidebar__close):not([class*="close"]),
+  .navbar-sidebar__brand button:not(.navbar-sidebar__close):not([class*="close"]),
   .navbar-sidebar__brand .colorModeToggle,
   .navbar-sidebar .colorModeToggle,
   .navbar-sidebar__brand button[class*="colorModeToggle"],
   .navbar-sidebar button[class*="colorModeToggle"],
-  .navbar-sidebar__brand
-    .clean-btn[class*="toggle"]:not(.navbar-sidebar__close),
+  .navbar-sidebar__brand .clean-btn[class*="toggle"]:not(.navbar-sidebar__close),
   .navbar-sidebar .clean-btn[class*="toggle"]:not(.navbar-sidebar__close),
   .navbar-sidebar__brand [class*="toggle_"]:not(.navbar-sidebar__close),
   .navbar-sidebar [class*="toggle_"]:not(.navbar-sidebar__close),