diff --git a/docusaurus.config.ts b/docusaurus.config.ts index df004ec1..a17fda3e 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -10,6 +10,7 @@ const config: Config = { title: "Recode Hive", tagline: "Dinosaurs are cool", favicon: "img/favicon.ico", + url: "https://your-docusaurus-site.example.com", baseUrl: "/", @@ -92,12 +93,13 @@ const config: Config = { items: [ { type: "dropdown", - html: ' Docs', + html: 'πŸ“š Docs', position: "left", items: [ { type: "html", value: `
+ Tutorials Tutorials
SQL @@ -114,6 +116,7 @@ const config: Config = { { type: "html", value: `
+ Courses Courses
git @@ -129,10 +132,11 @@ const config: Config = { { type: "html", value: `
+ Interview Prep Interview Prep
- Technical
- Behavioral + 🧩Technical
+ πŸ’‘Behavioral
`, }, @@ -140,46 +144,46 @@ const config: Config = { }, { to: "/showcase", - html: ' Showcase', + html: '🌍 Showcase', position: "left", }, { to: "/dashboard", - html: ' Dashboard', + html: 'πŸ“Š Dashboard', position: "left", }, { to: "/our-sponsors/", - html: ' Donate', + html: 'πŸ’° Donate', position: "left", }, { type: "dropdown", - html: ' Devfolio', + html: 'πŸ‘©πŸ»β€πŸ’» Devfolio', position: "left", items: [ { - html: ' GitHub Profiles', + label: "πŸ’»GitHub Profiles", to: "https://dev.recodehive.com/devfolio", }, { - html: ' GitHub Badges', + label: "πŸŽ–οΈ GitHub Badges", to: "/badges/github-badges/", }, ], }, { to: "/blogs", - html: ' Blogs', + html: 'πŸ“° Blogs', position: "left", }, { type: "dropdown", - html: ' More', + html: 'πŸ”— More', position: "left", items: [ { - html: ' E-books', + label: "πŸ“š E-books", to: "https://learn.recodehive.com/datascience", }, { @@ -187,15 +191,15 @@ const config: Config = { to: "https://github.com/orgs/recodehive/projects/9", }, { - html: ' Community', + label: "🀝 Community", to: "/community", }, { - html: ' Broadcast', + label: "πŸ“Ί Broadcast", to: "/broadcasts/", }, { - html: ' Podcast', + label: "πŸŽ™οΈ Podcast", to: "/podcasts/", }, ], diff --git a/src/css/custom.css b/src/css/custom.css index 79c5997e..6dbf18e0 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,12 +1,3 @@ -.dropdown-content .border-r, -.dropdown-content .col-span-1, -.dropdown-content .col-span-2, -.dropdown-content a.border-r, -.dropdown-content a.col-span-1, -.dropdown-content a.col-span-2 { - color: var(--ifm-font-color-base); -} - /* You can override the default Infima variables here. */ @import "tailwindcss"; @@ -222,17 +213,19 @@ html[data-theme="dark"] .menu__link--active::after { color var(--ifm-transition-fast) ease; } -/* Fix navbar alignment and spacing */ +/*======= SECTION 6: Fix navbar alignment and spacing ======== */ .navbar { - padding: 0.5rem 1rem; + /* padding: 0 1rem; */ + padding-left: 0 !important; + margin: 0; height: 60px; display: flex; - align-items: center; } .navbar__brand { display: flex; - align-items: center; + align-items: center !important; + justify-content: flex-start !important; margin-right: 1rem; margin-left: 0; flex-shrink: 0; @@ -257,7 +250,7 @@ html[data-theme="dark"] .menu__link--active::after { padding: 0 !important; } -/* Adjust individual navbar items */ +/* ======== SECTION 7 : Adjust individual navbar items ==========*/ .navbar__items > .navbar__item { padding: 0.2rem 0.3rem !important; margin: 0 !important; @@ -284,7 +277,7 @@ html[data-theme="dark"] .menu__link--active::after { vertical-align: middle; } -/* ===== CRITICAL FIX: DROPDOWN HOVER BEHAVIOR ===== */ +/* ===== SECTION 8: CRITICAL FIX: DROPDOWN HOVER BEHAVIOR ===== */ .dropdown { display: inline-flex !important; align-items: center !important; @@ -304,6 +297,14 @@ html[data-theme="dark"] .menu__link--active::after { background: transparent !important; z-index: 999 !important; } +.dropdown-content .border-r, +.dropdown-content .col-span-1, +.dropdown-content .col-span-2, +.dropdown-content a.border-r, +.dropdown-content a.col-span-1, +.dropdown-content a.col-span-2 { + color: var(--ifm-font-color-base); +} /* Show dropdown on hover with delay */ .dropdown:hover .dropdown__menu { @@ -374,7 +375,7 @@ html[data-theme="dark"] .menu__link--active::after { --ifm-transition-slow: 300ms; } -/* Smooth theme transitions */ +/* ======= SECTION 9 :Smooth theme transitions ========== */ html, body { transition: background-color 150ms ease, color 150ms ease; @@ -409,145 +410,10 @@ body { --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } -/* ===== CRITICAL FIX: MOBILE NAVBAR BEHAVIOR ===== */ -@media screen and (max-width: 996px) { - /* Hide TOP navbar items on mobile (not sidebar) */ - .navbar__items:not(.navbar__items--right) - .navbar__item:not(.navbar__toggle):not(.navbar__brand) { - display: none !important; - } - - /* Keep sidebar items visible */ - .navbar-sidebar .navbar__item, - .navbar-sidebar .navbar__link, - .navbar-sidebar .dropdown { - display: block !important; - } - - /* Only show essential elements in TOP navbar */ - .navbar__toggle, - .navbar__brand, - .navbar__search, - #firebase-auth-github-navbar, - .colorModeToggle { - display: flex !important; - } - - /* Clean mobile navbar layout - prevent overflow */ - .navbar { - padding: 0.5rem 0.5rem !important; - height: 56px !important; - } - - .navbar__inner { - width: 100% !important; - display: flex !important; - align-items: center !important; - justify-content: space-between !important; - } - - /* Right side items - only essential ones with proper spacing */ - .navbar__items--right { - display: flex !important; - align-items: center !important; - justify-content: space-between; - gap: 0.2rem !important; - margin-left: auto !important; - flex-shrink: 0 !important; - } - - /* Logo and brand adjustments */ - .navbar__brand { - margin-right: 1.5rem !important; - } - - .navbar__logo { - height: 32px !important; - } - - .navbar__title { - font-size: 1rem !important; - } - - /* Mobile search button - fixed spacing */ - .DocSearch-Button { - min-width: 36px !important; - width: 36px !important; - height: 36px !important; - padding: 0.3rem !important; - margin: 0 0.25rem !important; - flex-shrink: 0 !important; - box-sizing: border-box !important; - } - - .DocSearch-Button-Placeholder, - .DocSearch-Button-Keys { - display: none !important; - } - - /* Mobile GitHub button - fixed spacing */ - #firebase-auth-github-navbar { - display: flex !important; - flex-shrink: 0 !important; - position: relative !important; - } - - #firebase-auth-github-navbar button { - height: 36px !important; - width: 36px !important; - min-width: 36px !important; - padding: 0.3rem !important; - font-size: 0 !important; - margin: 0 0.25rem !important; - flex-shrink: 0 !important; - position: relative !important; - display: flex !important; - align-items: center !important; - justify-content: center !important; - box-sizing: border-box !important; - } - - #firebase-auth-github-navbar button svg { - margin-right: 0 !important; - } - - /* Mobile theme toggle - fixed spacing */ - .colorModeToggle { - width: 36px !important; - height: 36px !important; - min-width: 36px !important; - padding: 0.3rem !important; - margin: 0 0.25rem !important; - flex-shrink: 0 !important; - position: relative !important; - display: flex !important; - align-items: center !important; - justify-content: center !important; - box-sizing: border-box !important; - } - - /* Ensure sidebar toggle is always visible */ - .navbar__toggle { - display: block !important; - margin-right: 0.5rem !important; - } -} - -@media screen and (min-width: 1057px) { - .nav-emoji { - display: none; - } -} - -@media screen and (min-width: 1205px) { - .nav-emoji { - display: inline-block; - } -} - -/* ===== TABLET AND DESKTOP NAVBAR (997px+) ===== */ -@media (min-width: 997px) { +/* ===== SECTION 10: DESKTOP NAVBAR ENHANCEMENTS ===== */ +@media (min-width: 1300px) { /* Enhanced dropdown hover behavior */ + .dropdown:hover .dropdown__menu { display: block !important; visibility: visible !important; @@ -568,9 +434,9 @@ body { /* Better spacing for desktop navbar */ .navbar__inner { max-width: 1400px; - margin: 0 auto; width: 100%; - padding: 0 1rem; + padding: 0 0.5rem; + display: flex; } .navbar__items:not(.navbar__items--right) { @@ -579,178 +445,55 @@ body { margin-left: 0; margin-right: 2rem; } - - /* Ensure proper spacing between left and right items */ - .navbar__items--right { - margin-left: auto !important; - } } - -/* Icon-only navbar design for tablets and smaller screens */ -@media (max-width: 1200px) and (min-width: 997px) { - /* Right navbar container with proper spacing */ - .navbar .navbar__inner .navbar__items.navbar__items--right { - display: flex !important; - align-items: center; - gap: 0.5rem; - margin-left: auto; - flex-shrink: 0; - height: 100%; - padding: 0; - } - - /* Make all right navbar items visible with consistent layout */ - .navbar .navbar__inner .navbar__items.navbar__items--right .navbar__item { - display: flex !important; - visibility: visible !important; - opacity: 1 !important; - margin: 0 !important; - align-items: center; - justify-content: center; - } - - /* GitHub auth button - improved styling */ - #firebase-auth-github-navbar button { - height: 36px !important; - padding: 0.5rem 0.75rem !important; - font-size: 0.8rem !important; - display: flex !important; - justify-content: center !important; - align-items: center !important; - border-radius: 6px !important; - background-color: #24292e !important; - border: 1px solid rgba(255, 255, 255, 0.1) !important; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; - transition: all 0.2s ease !important; - cursor: pointer !important; - white-space: nowrap !important; - } - - #firebase-auth-github-navbar button:hover { - background-color: #1a1e22 !important; - transform: translateY(-3px) !important; - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important; - border-color: rgba(255, 255, 255, 0.2) !important; - } - - #firebase-auth-github-navbar button svg { - width: 16px !important; - height: 16px !important; - color: white !important; - flex-shrink: 0 !important; - margin-right: 0.5rem !important; - } - - /* Search button - consistent styling */ - .DocSearch-Button { - height: 36px !important; - min-width: 180px !important; - padding: 0.5rem 0.75rem !important; - border-radius: 6px !important; - margin: 0 !important; - display: flex !important; - justify-content: flex-start !important; - align-items: center !important; - background-color: var(--ifm-color-emphasis-200) !important; - border: 1px solid var(--ifm-color-emphasis-300) !important; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; - transition: all 0.2s ease !important; - cursor: pointer !important; - } - - .DocSearch-Button:hover { - background-color: var(--ifm-color-emphasis-300) !important; - transform: translateY(-2px) !important; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important; - border-color: var(--ifm-color-emphasis-400) !important; - } - - .DocSearch-Button-Placeholder, - .DocSearch-Button-Keys { +/* ===== SECTION 11: CRITICAL FIX: TABLET/IPAD NAVBAR BEHAVIOR ===== */ +@media screen and (max-width: 1300px) { + /* Hide TOP navbar items on mobile (not sidebar) */ + .navbar__items .navbar__item:not(.navbar__toggle):not(.navbar__brand) { display: none !important; } - .DocSearch-Search-Icon { - width: 16px !important; - height: 16px !important; - margin-right: 0.5rem !important; - color: var(--ifm-color-emphasis-600) !important; - flex-shrink: 0 !important; - } - - .DocSearch-Button-Placeholder { + /* Keep sidebar items visible */ + .navbar-sidebar .navbar__item, + .navbar-sidebar .navbar__link, + .navbar-sidebar .dropdown { display: block !important; - font-size: 0.8rem !important; - color: var(--ifm-color-emphasis-600) !important; } - .DocSearch-Button-Keys { - display: flex !important; - margin-left: auto !important; + /* Clean mobile navbar layout - prevent overflow */ + .navbar { + padding: 0.5rem 0.5rem !important; + height: 56px !important; } - /* Theme toggle - improved styling */ - .colorModeToggle { - display: flex !important; - width: 36px !important; - height: 36px !important; - padding: 0.5rem !important; - border-radius: 6px !important; + .navbar__inner { + display: flex; + justify-content: space-between; + align-items: center; margin: 0 !important; - background-color: var(--ifm-color-emphasis-200) !important; - border: 1px solid var(--ifm-color-emphasis-300) !important; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; - transition: all 0.2s ease !important; - justify-content: center !important; - align-items: center !important; - cursor: pointer !important; - flex-shrink: 0 !important; - } - - .colorModeToggle:hover { - background-color: var(--ifm-color-emphasis-300) !important; - transform: translateY(-3px) !important; - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important; - border-color: var(--ifm-color-emphasis-400) !important; - } - - .colorModeToggle svg { - width: 16px !important; - height: 16px !important; - color: var(--ifm-color-emphasis-700) !important; - flex-shrink: 0 !important; - } - - /* Dark theme adjustments for mobile icons */ - [data-theme="dark"] .DocSearch-Button { - background-color: var(--dark-bg-tertiary) !important; - border-color: var(--dark-border) !important; - } - - [data-theme="dark"] .DocSearch-Button:hover { - background-color: var(--dark-card-hover-bg) !important; + max-width: 100% !important; + padding: 0 !important; + width: 100% !important; } - [data-theme="dark"] .DocSearch-Search-Icon { - color: var(--dark-text-secondary) !important; + /* Logo and brand adjustments */ + .navbar__brand { + margin-right: 1.5rem !important; } - [data-theme="dark"] .colorModeToggle { - background-color: var(--dark-bg-tertiary) !important; - border-color: var(--dark-border) !important; + .navbar__logo { + height: 32px !important; } - [data-theme="dark"] .colorModeToggle:hover { - background-color: var(--dark-card-hover-bg) !important; + .navbar__title { + font-size: 1rem !important; } - [data-theme="dark"] .colorModeToggle svg { - color: var(--dark-text-secondary) !important; + /* Ensure sidebar toggle is always visible */ + .navbar__toggle { + display: block !important; + margin-right: 0.5rem !important; } -} - -/* ===== MOBILE SIDEBAR IMPROVEMENTS ===== */ -@media (max-width: 996px) { /* Ensure sidebar is fully functional */ .navbar-sidebar { display: block !important; @@ -801,23 +544,6 @@ body { .navbar-sidebar .dropdown__link:hover { background-color: var(--ifm-color-emphasis-300) !important; } - - /* Right side items spacing */ - .navbar .navbar__inner .navbar__items.navbar__items--right { - gap: 0.55rem !important; - margin-right: 0 !important; - } - - /* Hide GitHub button text on mobile - show only icon */ - #firebase-auth-github-navbar .github-text { - display: none !important; - } - - #firebase-auth-github-navbar button { - padding: 0.5rem !important; - min-width: 44px !important; - justify-content: center !important; - } } /* Custom nav item styles for dropdown and navbar */ @@ -876,64 +602,6 @@ body { background: var(--ifm-color-primary); } -/* Mobile screen adjustments */ -@media (max-width: 768px) { - .navbar .navbar__inner .navbar__items.navbar__items--right { - gap: 16px !important; - margin: auto auto; - } -} - -@media (max-width: 480px) { - /* Compact but comfortable spacing for small screens */ - .navbar .navbar__inner .navbar__items.navbar__items--right { - gap: 14px !important; - margin: auto auto; - } - - /* Comfortable button size for small screens */ - #firebase-auth-github-navbar button, - .DocSearch-Button, - .colorModeToggle { - width: 44px !important; - height: 44px !important; - padding: 10px !important; - border-radius: 10px !important; - } - - #firebase-auth-github-navbar button svg, - .DocSearch-Search-Icon, - .colorModeToggle svg { - width: 20px !important; - height: 20px !important; - } -} - -@media (max-width: 360px) { - /* Minimal but usable spacing for very small screens */ - .navbar .navbar__inner .navbar__items.navbar__items--right { - gap: 12px !important; - margin: auto auto; - } - - /* Minimum usable button size */ - #firebase-auth-github-navbar button, - .DocSearch-Button, - .colorModeToggle { - width: 40px !important; - height: 40px !important; - padding: 8px !important; - border-radius: 8px !important; - } - - #firebase-auth-github-navbar button svg, - .DocSearch-Search-Icon, - .colorModeToggle svg { - width: 18px !important; - height: 18px !important; - } -} - .dropdown_grid { display: grid; grid-template-columns: repeat(3, 1fr); @@ -1027,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; @@ -1038,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; @@ -1059,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; @@ -1102,14 +770,13 @@ html.theme-light .text-gray-900 { color: #1a1a1a !important; } -/* Modern Blog Enhancements */ +/*==== SECTION 13 Modern Blog Enhancements ======*/ .modern-gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .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 { @@ -1162,84 +829,65 @@ html { color: inherit; } -/* ===== STEP 3: BASIC FOOTER PROTECTION ===== */ +/* ===== 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; } -/* ===== STEP 4: FOOTER BACKGROUND PROTECTION ===== */ +/* ===== 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 ===== */ +/* ===== 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), @@ -1261,7 +909,6 @@ html { left: -9999px !important; pointer-events: none !important; } - /* Ensure close button is always visible */ .navbar-sidebar__brand .navbar-sidebar__close, .navbar-sidebar__brand button[class*="close"], @@ -1306,38 +953,6 @@ html { } } - -/* Fix: Remove extra box/space above dropdown nav items in sidebar */ -.navbar-sidebar__item, -.navbar-sidebar__link, -.navbar-sidebar__brand { - margin-top: 0 !important; - padding-top: 0 !important; - border-top: none !important; - box-shadow: none !important; -} -.navbar-sidebar__item:first-child, -.navbar-sidebar__link:first-child { - margin-top: 0 !important; - padding-top: 0 !important; - border-top: none !important; - box-shadow: none !important; -} -/* Remove any unwanted hr or divider above dropdowns */ -.navbar-sidebar hr, -.navbar-sidebar__item hr { - display: none !important; - margin: 0 !important; - padding: 0 !important; - border: none !important; -} -/* Remove grid gap above dropdowns */ -.navbar-sidebar .grid { - gap: 0 !important; - margin-top: 0 !important; - padding-top: 0 !important; -} - /* STAR section border fixes for dark mode */ [data-theme="dark"] .star-border-red { border-color: #ef4444 !important; @@ -1351,18 +966,18 @@ html { border-color: #3b82f6 !important; } - [data-theme="dark"] .star-border-yellow { - border-color: #eab308 !important; - } +[data-theme="dark"] .star-border-yellow { + border-color: #eab308 !important; +} - [data-theme="light"] .interview-prep-page h1, - [data-theme="light"] .interview-prep-page h2, - [data-theme="light"] .interview-prep-page h3, - [data-theme="light"] .interview-prep-page h4, - [data-theme="light"] .interview-prep-page h5, - [data-theme="light"] .interview-prep-page h6 { - color: #ffffff !important; - } +[data-theme="light"] .interview-prep-page h1, +[data-theme="light"] .interview-prep-page h2, +[data-theme="light"] .interview-prep-page h3, +[data-theme="light"] .interview-prep-page h4, +[data-theme="light"] .interview-prep-page h5, +[data-theme="light"] .interview-prep-page h6 { + color: #ffffff !important; +} .watch-video-btn { background-color: #dc2626; @@ -1408,9 +1023,6 @@ html { color: white; } -.interview-prep-discord-btn { - color: white; -} .interview-prep-discord-btn:hover { color: white; } @@ -1493,34 +1105,6 @@ html { color: white; } -.explore-btn:hover { - color: white; -} -/* Global alignment fix for navbar right elements */ -.navbar .navbar__inner .navbar__items--right { - display: flex !important; - align-items: center !important; - gap: 1rem !important; - margin-right: 1rem !important; - padding-right: 0 !important; - /* transform: translateX(-60px) !important; */ -} - -@media (min-width: 997px) { - .navbar .navbar__inner .navbar__items--right { - margin-right: 1.5rem !important; - transform: none !important; - gap: 0.5rem !important; - } -} - - -.navbar__items--right .navbar__item { - display: flex !important; - align-items: center !important; - height: 36px !important; -} - .DocSearch-Button, #firebase-auth-github-navbar button, .colorModeToggle { @@ -1531,37 +1115,37 @@ html { box-sizing: border-box !important; } -.explore-btn:hover{ - color:white; +.explore-btn:hover { + color: white; } .custom-input { background-color: #374151; - color:white; /* cyan-500 */ + color: white; /* cyan-500 */ } -.company-border{ - border-color:#6b7280; - color:white; +.company-border { + border-color: #6b7280; + color: white; } -.company-blue-border{ - border-color:#3b82f6 ; +.company-blue-border { + border-color: #3b82f6; } -.company-green-border{ +.company-green-border { border-color: #22c55e; } -.company-purple-border{ +.company-purple-border { border-color: #a855f7; } /* System Design */ -[data-theme='dark'] .badge-system { +[data-theme="dark"] .badge-system { border-color: #60a5fa; /* dark:border-blue-300 */ - color: #60a5fa; /* dark:text-blue-300 */ + color: #60a5fa; /* dark:text-blue-300 */ background-color: rgba(30, 64, 175, 0.2); /* dark:bg-blue-900/20 */ } /* Behavioral */ -[data-theme='dark'] .badge-behavioral { +[data-theme="dark"] .badge-behavioral { border-color: #4ade80; color: #4ade80; background-color: rgba(20, 83, 45, 0.2); @@ -1569,41 +1153,75 @@ html { /* Technical */ -[data-theme='dark'] .badge-technical { +[data-theme="dark"] .badge-technical { border-color: #c084fc; color: #c084fc; background-color: rgba(88, 28, 135, 0.2); } - -[data-theme='dark'] .badge-other { +[data-theme="dark"] .badge-other { border-color: #fb923c; color: #fb923c; background-color: rgba(124, 45, 18, 0.2); } -[data-theme='dark'] .question-card { +[data-theme="dark"] .question-card { border-color: #1f2937; /* border-gray-800 */ background-color: #1f2937; /* bg-gray-800 */ } -.company-tab-link{ +.company-tab-link { color: white; } -.company-tab-link:hover{ +.company-tab-link:hover { color: white; } -.company-tab-community-link{ +.company-tab-community-link { color: #fdba74; } -.company-tab-community-link:hover{ +.company-tab-community-link:hover { color: #fdba74; text-decoration: none; } +/* Move navbar right items to absolute right corner */ +.navbar .navbar__inner { + display: flex !important; + justify-content: space-between !important; + align-items: center !important; + width: 100% !important; + max-width: none !important; +} + + +.navbar .navbar__items { + display: flex !important; + align-items: center !important; +} + +.navbar .navbar__items--right { + margin-left: auto !important; + display: flex !important; + align-items: center !important; + gap: 0.5rem !important; + flex-shrink: 0 !important; +} +/* Ensure the navbar container takes full width */ +.navbar { + padding-left: var(--ifm-navbar-padding-horizontal) !important; + padding-right: var(--ifm-navbar-padding-horizontal) !important; +} + +.navbar > .container, +.navbar > .container-fluid { + max-width: none !important; + width: 100% !important; + padding: 0 !important; +} .practice-tab-link:hover{ color: white; text-decoration: none; } .practice-tab-link{ color: white; + } diff --git a/src/pages/dashboard/dashboard.css b/src/pages/dashboard/dashboard.css index f8c6c421..3c890089 100644 --- a/src/pages/dashboard/dashboard.css +++ b/src/pages/dashboard/dashboard.css @@ -8,7 +8,7 @@ /* Sidebar Styles */ .dashboard-sidebar { - width: 300px; + width: 260px; background: var(--ifm-card-background-color); border-right: 1px solid var(--ifm-toc-border-color); padding: 1.5rem 0; @@ -154,9 +154,9 @@ /* Main Content */ .dashboard-main { flex: 1; - margin-left: 250px; /* Match sidebar width */ + margin-left: 300px; /* Match sidebar width */ padding: 2rem; - max-width: calc(100% - 250px); + max-width: calc(100% - 300px); transition: margin-left 0.3s ease, max-width 0.3s ease; } @@ -176,11 +176,14 @@ /* Discussion Section - Enhanced Modern UI */ .discussion-container { - max-width: 1200px; + max-width: 1400px; margin: 0 auto; padding: 2rem 1rem; color: var(--ifm-font-color-base); position: relative; + overflow-x: hidden; + width: 100%; + box-sizing: border-box; } /* Sidebar compatibility */ @@ -586,15 +589,6 @@ padding: 1rem; } - .dashboard-sidebar { - transform: translateX(-100%); - z-index: 1000; - } - - .dashboard-sidebar.show { - transform: translateX(0); - } - .discussion-container { padding: 1rem; } @@ -708,12 +702,12 @@ } } -/* Mobile Menu Button */ -.mobile-menu-btn { +/* Dashboard Mobile Menu Button */ +.dashboard-menu-btn { display: none; position: fixed; - top: 1rem; - left: 1rem; + top: 4rem; + right: 1rem; z-index: 1001; background: var(--ifm-color-primary); color: white; @@ -726,36 +720,130 @@ cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; + font-size: 1.2rem; } -.mobile-menu-btn:hover { +.dashboard-menu-btn:hover { background: var(--ifm-color-primary-dark); transform: scale(1.05); } -.mobile-menu-btn::before { - content: "☰"; +/* Dashboard Mobile Menu */ +.dashboard-mobile-menu { + position: fixed; + top: 0; + right: -100%; + width: 280px; + height: 100vh; + background: var(--ifm-card-background-color); + border-left: 1px solid var(--ifm-color-border); + z-index: 1002; + transition: right 0.3s ease; + box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); + overflow-y: auto; +} + +.dashboard-mobile-menu.show { + right: 0; +} + +/* Mobile menu overlay */ +.dashboard-menu-overlay { + position: fixed; + top: 0; + left: 0; + right: 280px; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: -1; + cursor: pointer; +} + +.dashboard-menu-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem; + border-bottom: 1px solid var(--ifm-color-border); + background: var(--ifm-color-primary); + color: white; +} + +.dashboard-menu-header h3 { + margin: 0; font-size: 1.2rem; + font-weight: 600; + color: white; +} + +.close-menu-btn { + background: none; + border: none; + color: white; + font-size: 1.5rem; + cursor: pointer; + padding: 0.25rem; + border-radius: 4px; + transition: background-color 0.2s ease; } -.mobile-menu-btn.open::before { - content: "βœ•"; +.close-menu-btn:hover { + background: rgba(255, 255, 255, 0.1); +} + +.menu-divider { + height: 1px; + background: var(--ifm-color-border); + margin: 0.5rem 0; +} + +.dashboard-menu-items { + padding: 1rem 0; +} + +.menu-item { + display: flex; + align-items: center; + padding: 0.875rem 1.5rem; + cursor: pointer; + transition: all 0.2s ease; + color: var(--ifm-font-color-base); + border-left: 3px solid transparent; +} + +.menu-item:hover { + background: var(--ifm-menu-color-background-active); + color: var(--ifm-color-primary); +} + +.menu-item.active { + background: var(--ifm-menu-color-background-active); + border-left-color: var(--ifm-color-primary); + color: var(--ifm-color-primary); + font-weight: 600; +} + + + +.menu-icon { + margin-right: 0.75rem; + font-size: 1.1rem; + display: flex; + align-items: center; +} + +.menu-text { + font-size: 0.95rem; } /* Mobile responsive styles */ @media (max-width: 992px) { - .mobile-menu-btn { + .dashboard-menu-btn { display: flex; } .dashboard-sidebar { - transform: translateX(-100%); - z-index: 1000; - box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); - } - - .dashboard-sidebar.show { - transform: translateX(0); + display: none; } .dashboard-layout::before { @@ -772,7 +860,15 @@ transition: all 0.3s ease; } - .dashboard-layout.sidebar-open::before { + .dashboard-mobile-menu.show ~ .dashboard-main::before { + content: ""; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 999; opacity: 1; visibility: visible; } @@ -780,6 +876,12 @@ .discussion-container { padding-top: 4rem; } + + .dashboard-main { + margin-left: 0; + max-width: 100%; + padding: 1rem; + } } /* Sidebar collapsed states */ @@ -789,26 +891,32 @@ } } -/* Mobile sidebar overlay */ -@media (max-width: 992px) { - .dashboard-layout::before { - content: ""; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - z-index: 999; - opacity: 0; - visibility: hidden; - transition: all 0.3s ease; - } +/* Dark theme support for dashboard mobile menu */ +[data-theme="dark"] .dashboard-mobile-menu { + background: var(--ifm-background-surface-color); + border-left-color: var(--ifm-color-emphasis-300); + box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3); +} - .dashboard-layout.sidebar-open::before { - opacity: 1; - visibility: visible; +[data-theme="dark"] .dashboard-menu-header { + background: var(--ifm-color-primary); +} + + + +/* Responsive adjustments for mobile menu */ + + +@media (max-width: 320px) { + .dashboard-menu-header { + padding: 1rem; } + + .menu-item { + padding: 0.75rem 1rem; + } + + } /* Enhanced New Discussion Button */ diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index dd922358..5ed2dc0d 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -1,7 +1,7 @@ -import NavbarIcon from "../../components/navbar/NavbarIcon"; import React, { useEffect, useState } from "react"; import Layout from "@theme/Layout"; import Head from "@docusaurus/Head"; +import BrowserOnly from "@docusaurus/BrowserOnly"; import { motion } from "framer-motion"; import { useCommunityStatsContext, @@ -22,7 +22,14 @@ import { MessageCircle, Search, TrendingUp, + Home, + Trophy, + Gift, + Calendar, + BarChart3, + ArrowLeft, } from "lucide-react"; +import NavbarIcon from "@site/src/components/navbar/NavbarIcon"; import "@site/src/components/discussions/discussions.css"; import "./dashboard.css"; @@ -97,6 +104,27 @@ const DashboardContent: React.FC = () => { const [discussionsError, setDiscussionsError] = useState(null); const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false); + const [showDashboardMenu, setShowDashboardMenu] = useState(false); + + // Close dashboard menu when clicking outside + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + const target = event.target as Element; + if (showDashboardMenu && + !target.closest('.dashboard-mobile-menu') && + !target.closest('.dashboard-menu-btn')) { + setShowDashboardMenu(false); + } + }; + + if (showDashboardMenu) { + document.addEventListener('mousedown', handleClickOutside); + } + + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [showDashboardMenu]); const [leaderboardData, setLeaderboardData] = useState( [] ); @@ -438,17 +466,14 @@ const DashboardContent: React.FC = () => { setLeaderboardError(null); try { - console.log("πŸ”„ Fetching leaderboard data from RecodeHive GitHub API..."); + console.log('Fetching leaderboard data from RecodeHive GitHub API...'); // Fetch all repositories from RecodeHive organization - const reposResponse = await fetch( - "https://api.github.com/orgs/recodehive/repos?type=public&per_page=100" - ); + const reposResponse = await fetch('https://api.github.com/orgs/recodehive/repos?type=public&per_page=100'); if (!reposResponse.ok) { if (reposResponse.status === 403) { - console.warn("GitHub API rate limit exceeded. Using fallback data."); - throw new Error("GitHub API rate limit exceeded"); + throw new Error('GitHub API rate limit exceeded'); } throw new Error(`GitHub API request failed: ${reposResponse.status}`); } @@ -568,13 +593,11 @@ const DashboardContent: React.FC = () => { setLeaderboardData(transformedData); } catch (error) { - console.error("❌ Error fetching RecodeHive contributors data:", error); + console.error("Error fetching RecodeHive contributors data:", error); setLeaderboardError(error.message); // Load fallback demo data - console.warn( - "Using fallback leaderboard data due to GitHub API limitations" - ); + console.warn("Using fallback leaderboard data due to GitHub API limitations"); setLeaderboardError("GitHub API rate limit reached. Showing demo data."); const demoData: LeaderboardEntry[] = [ { @@ -585,7 +608,7 @@ const DashboardContent: React.FC = () => { contributions: 250, repositories: 25, score: 2500, - achievements: ["πŸ† Top Contributor", "πŸ‘‘ Founder", "πŸš€ Maintainer"], + achievements: ["Top Contributor", "Founder", "Maintainer"], github_url: "https://github.com/sanjay-kv", streak: 15, postManTag: false, @@ -601,11 +624,7 @@ const DashboardContent: React.FC = () => { contributions: 180, repositories: 22, score: 1800, - achievements: [ - "πŸš€ Rising Star", - "πŸ’ͺ Active Contributor", - "⭐ Star Contributor", - ], + achievements: ["Rising Star", "Active Contributor", "Star Contributor"], github_url: "https://github.com/vansh-codes", streak: 8, postManTag: false, @@ -621,11 +640,7 @@ const DashboardContent: React.FC = () => { contributions: 120, repositories: 18, score: 1200, - achievements: [ - "πŸ’ͺ Power User", - "⭐ Star Contributor", - "πŸ”₯ Consistent", - ], + achievements: ["Power User", "Star Contributor", "Consistent"], github_url: "https://github.com/Hemu21", streak: 5, postManTag: false, @@ -645,25 +660,18 @@ const DashboardContent: React.FC = () => { contributions: number ): string[] => { const achievements: string[] = []; - - // Score-based achievements (GSSoC style) - if (score >= 5000) achievements.push("πŸ† Elite Contributor"); - if (score >= 3000) achievements.push("⭐ Master Contributor"); - if (score >= 1000) achievements.push("πŸš€ Advanced Contributor"); - if (score >= 500) achievements.push("πŸ’ͺ Active Contributor"); - if (score >= 100) achievements.push("🌟 Rising Star"); - - // PR count-based achievements - if (contributions >= 100) achievements.push("πŸ“ˆ Century Club"); - if (contributions >= 50) achievements.push("🎯 Half Century"); - if (contributions >= 25) achievements.push("⚑ Quick Contributor"); - if (contributions >= 10) achievements.push("πŸ”₯ Consistent"); - - // Special milestone achievements - if (score >= 7000) achievements.push("πŸ‘‘ Legend"); - if (contributions >= 150) achievements.push("πŸŽ–οΈ PR Master"); - - return achievements.slice(0, 3); // Limit to 3 achievements for UI + if (score >= 5000) achievements.push("Elite Contributor"); + if (score >= 3000) achievements.push("Master Contributor"); + if (score >= 1000) achievements.push("Advanced Contributor"); + if (score >= 500) achievements.push("Active Contributor"); + if (score >= 100) achievements.push("Rising Star"); + if (contributions >= 100) achievements.push("Century Club"); + if (contributions >= 50) achievements.push("Half Century"); + if (contributions >= 25) achievements.push("Quick Contributor"); + if (contributions >= 10) achievements.push("Consistent"); + if (score >= 7000) achievements.push("Legend"); + if (contributions >= 150) achievements.push("PR Master"); + return achievements.slice(0, 3); }; const handleTabChange = ( @@ -671,6 +679,7 @@ const DashboardContent: React.FC = () => { ) => { setActiveTab(tab); setIsMobileSidebarOpen(false); // Close mobile sidebar + setShowDashboardMenu(false); // Close dashboard menu if (tab === "discuss") { history.push("#discuss"); window.scrollTo(0, 0); @@ -679,7 +688,6 @@ const DashboardContent: React.FC = () => { window.scrollTo(0, 0); } else if (tab === "giveaway") { history.push("/dashboard/giveaway"); - window.scrollTo(0, 0); } else if (tab === "contributors") { history.push("#contributors"); window.scrollTo(0, 0); @@ -726,7 +734,7 @@ const DashboardContent: React.FC = () => { onClick={() => handleFilterChange("weekly")} disabled={isLoadingLeaderboard || rateLimitInfo.isLimited} > - πŸ“… + Weekly @@ -767,7 +775,7 @@ const DashboardContent: React.FC = () => { initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} > -

⚠️ GitHub API Rate Limit Reached

+

GitHub API Rate Limit Reached

We've temporarily reached the GitHub API rate limit. The leaderboard will automatically refresh when the limit resets. @@ -778,10 +786,7 @@ const DashboardContent: React.FC = () => { {(retryTimer % 60).toString().padStart(2, "0")}

)} -

- πŸ’‘ Pro Tip: For unlimited access, consider setting up - a GitHub Personal Access Token. -

+ ) : rateLimitInfo.remaining && rateLimitInfo.remaining < 20 ? ( { initial={{ opacity: 0 }} animate={{ opacity: 1 }} > -

⚠️ API Rate Limit Low

+

API Rate Limit Low

GitHub API requests remaining: {rateLimitInfo.remaining}/ {rateLimitInfo.limit} @@ -855,7 +860,7 @@ const DashboardContent: React.FC = () => {

{title}

{loading ? ( -
⏳
+
Loading...
) : ( { ); return ( - - - RecodeHive | Dashboard - - -
- {/* Mobile Menu Button */} +
+ {/* Dashboard Menu Button - Only visible on mobile */} + + {/* Dashboard Mobile Menu */} +
+ {/* Overlay */} + {showDashboardMenu && ( +
setShowDashboardMenu(false)} + /> + )} +
+

Dashboard Menu

+ +
+ + + {/* Dashboard navigation items */} +
+
{ + handleTabChange("home"); + setShowDashboardMenu(false); + }} + > + + + + Home +
+
{ + handleTabChange("discuss"); + setShowDashboardMenu(false); + }} + > + + + + Discuss +
+
{ + handleTabChange("leaderboard"); + setShowDashboardMenu(false); + }} + > + + + + Leaderboard +
+
{ + handleTabChange("giveaway"); + setShowDashboardMenu(false); + }} + > + + + + Giveaway +
+
{ + handleTabChange("contributors"); + setShowDashboardMenu(false); + }} + > + + + + Contributors +
+
+
+ + {/* Sidebar Navigation - Hidden on mobile */}
}> + {() => ( + + + + )} + + ); }; diff --git a/src/theme/Navbar/Content/index.tsx b/src/theme/Navbar/Content/index.tsx index 94d59d46..5706a7f9 100644 --- a/src/theme/Navbar/Content/index.tsx +++ b/src/theme/Navbar/Content/index.tsx @@ -11,7 +11,7 @@ import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle'; import NavbarLogo from '@theme/Navbar/Logo'; import NavbarSearch from '@theme/Navbar/Search'; -import styles from './styles.module.css'; + function useNavbarItems() { return useThemeConfig().navbar.items as NavbarItemConfig[]; @@ -78,7 +78,7 @@ export default function NavbarContent(): ReactNode { // Ask the user to add the respective navbar items => more flexible <> - + {!searchBarItem && ( diff --git a/src/theme/Navbar/Content/styles.module.css b/src/theme/Navbar/Content/styles.module.css deleted file mode 100644 index 4c9471e1..00000000 --- a/src/theme/Navbar/Content/styles.module.css +++ /dev/null @@ -1,8 +0,0 @@ -/* -Hide color mode toggle in small viewports - */ -@media (max-width: 996px) { - .colorModeToggle { - display: none; - } -} diff --git a/src/theme/Navbar/index.tsx b/src/theme/Navbar/index.tsx index 893bae13..fda3a757 100644 --- a/src/theme/Navbar/index.tsx +++ b/src/theme/Navbar/index.tsx @@ -1,8 +1,7 @@ -import React, { type ReactNode } from "react"; -import Navbar from "@theme-original/Navbar"; -import type NavbarType from "@theme/Navbar"; -import type { WrapperProps } from "@docusaurus/types"; -import NavbarIconInjector from "../../components/navbar/NavbarIconInjector"; +import React, {type ReactNode} from 'react'; +import Navbar from '@theme-original/Navbar'; +import type NavbarType from '@theme/Navbar'; +import type {WrapperProps} from '@docusaurus/types'; type Props = WrapperProps; @@ -10,7 +9,6 @@ export default function NavbarWrapper(props: Props): ReactNode { return ( <> - ); }