Merge pull request #1060 from kanishka-commits/ui/nav

[FIX]: #1017 Hamburger Menu Appears but Doesn't Display Content Between 1300px and 996px Screen Width

Author: sanjay-kv

sidebars.ts

@@ -112,8 +112,8 @@ const sidebars: SidebarsConfig = {
             "python/Data_Structures/python-linked-list",
             "python/Data_Structures/python-stack",
             "python/Data_Structures/python-queue",
-          ]
-        }
+          ],
+        },
       ],
     },
     {

src/components/ui/FirebaseAuthGithub.tsx

@@ -17,12 +17,29 @@ const uiConfig = {
 
 const FirebaseAuthGithub: React.FC = () => {
   const [user, setUser] = useState<User | null>(null);
+  const [githubText, setGithubText] = useState("Sign in with GitHub"); // ✅ new state
 
   useEffect(() => {
     const unregisterAuthObserver = auth.onAuthStateChanged((user) =>
       setUser(user as User),
     );
-    return () => unregisterAuthObserver();
+
+    // ✅ new effect to change text on resize
+    const handleResize = () => {
+      if (window.innerWidth <= 1110) {
+        setGithubText("Sign in");
+      } else {
+        setGithubText("Sign in with GitHub");
+      }
+    };
+
+    handleResize(); // initial call
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      unregisterAuthObserver();
+      window.removeEventListener("resize", handleResize);
+    };
   }, []);
 
   if (user) {
@@ -88,7 +105,8 @@ const FirebaseAuthGithub: React.FC = () => {
         >
           <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.65 7.65 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
         </svg>
-        <span className="github-text">Sign in with GitHub</span>
+        {/* ✅ dynamic text */}
+        <span className="github-text">{githubText}</span>
       </button>
     </div>
   );

src/css/custom.css

@@ -474,10 +474,14 @@ body {
 }
 
 /* ===== SECTION 11: CRITICAL FIX: TABLET/IPAD NAVBAR BEHAVIOR ===== */
-@media screen and (max-width: 1299px) {
-
+@media screen and (max-width: 996px) {
   /* Hide TOP navbar items on mobile (not sidebar) */
-  .navbar__items .navbar__item:not(.navbar__toggle):not(.navbar__brand) {
+
+  /*
+  * This hides all navbar items on small screens, *except* for the
+  * toggle, brand, and the item :has() the GitHub auth button.
+  */
+  .navbar__items .navbar__item:not(.navbar__toggle):not(.navbar__brand):not(:has(#firebase-auth-github-navbar)) {
     display: none !important;
   }
 
@@ -1484,7 +1488,7 @@ html {
   margin-left: auto !important;
   display: flex !important;
   align-items: center !important;
-  gap: 0.5rem !important;
+  /* gap: 0.5rem !important; */
   flex-shrink: 0 !important;
 }
 
@@ -1764,38 +1768,8 @@ html[data-theme="light"] [data-slot="card-header"].bg-gradient-to-br {
   mix-blend-mode: normal !important;
 }
 
-/* ================= SECTION 15: AUTHOR PAGE AVATAR OVERLAP FIX ================= */
-/* Fix for author page avatar overlap - working solution */
-.avatar.margin-bottom--sm.author-as-h1_iMAg {
-  width: 150px !important;
-  height: 150px !important;
-  border-radius: 50% !important;
-  border: none !important;
-}
-
-/* Additional avatar class fix */
-/* .avatar.margin-bottom--sm {
-  width: 40px !important;
-  height: 40px !important;
-  border-radius: 50% !important;
-  border: none !important; */
-/* } */
-/* 
-/* Author name styling fix */
-/* .authorName_w5sO {
-  font-size: 1.1rem !important;
-  line-height: 1.1rem !important;
-  display: block !important;
-  flex-direction: column !important;
-} */
-
-.avatar.margin-bottom--sm {
-  width: auto !important;
-  height: auto !important;
-  border: none !important;
+@media screen and (max-width: 1110px) {
+  .navbar__items{
+    gap: 0.1rem !important;
 }
-
-
-.blog-page .margin-bottom--xl {
-  margin-bottom: 0rem !important;
 }