Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Navbar links issue on the login page #944

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

hbSrujana
Copy link

@hbSrujana hbSrujana commented Oct 30, 2024

Pull Request for Resum-Resume 💡

Issue Title : Navbar links are not working on the Login page .
Closes: #935

Info about the related issue (Aim of the project) :
This PR fixes the issue where the navbar links were not functioning correctly on the login page by ensuring they redirect properly to other sections/pages.

Name : Srujana H B
GitHub ID : hbSrujana
Email ID : [email protected]

Screenshots :
Uploading Screenshot 2024-10-30 142313.png…
Uploading Screenshot 2024-10-30 142404.png…

Describe the add-ons or changes you've made 📃 :

  1. I’ve fixed the non-functional links in the navbar by:
  2. Ensuring that each link uses the correct path and removes unnecessary # symbols.
  3. Removed the "Login" link from the navbar on the login page to avoid unnecessary redirection to the same page.

Type of change ☑️ :
Bug fix (non-breaking change which fixes an issue)

What sort of change have you made:

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Code style update (formatting, local variables)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested? ⚙️ :

  1. Tested the navbar by clicking all links to ensure they now navigate correctly.
  2. Verified that the login page no longer displays a redundant "Login" link in the navbar.
  3. No new warnings were generated.

Checklist: ☑️
My code follows the guidelines of this project.
I have performed a self-review of my own code.
I have commented my code, particularly wherever it was hard to understand.
I have made corresponding changes to the documentation.
My changes generate no new warnings.
I have added things that prove my fix is effective or that my feature works.

Summary by CodeRabbit

  • New Features
    • Enhanced navigation structure with dynamic behavior for the "Login" link.
    • Improved user experience by hiding the "Login" link when already on the login page.
    • Updated internal links to point directly to respective HTML files, removing hash prefixes.

Copy link

coderabbitai bot commented Oct 30, 2024

Walkthrough

The changes made in login.html focus on improving the navigation structure and user experience. The "Login" link now includes an id attribute to facilitate conditional display, hiding it when the user is on the login page. Additionally, the "Home" link and other internal links have been updated to remove the hash prefix, ensuring they directly point to their respective HTML files. The form functionality remains unchanged.

Changes

File Change Summary
login.html Updated <nav> section with id for "Login" link, added JavaScript to hide "Login" on login page, adjusted links to remove hash prefix.

Assessment against linked issues

Objective Addressed Explanation
Navbar links are not working on the Login page (#935)

Possibly related PRs

Suggested labels

hacktoberfest, level1, gssoc-ext, hacktoberfest-accepted

Poem

In the login space, we hop and play,
Links now lead the right way,
No more hashes, just a clear path,
A joyful click, and a happy laugh!
With a script to hide, we make it bright,
Navigating smoothly, what a delight! 🐇✨


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Outside diff range and nitpick comments (2)
login.html (2)

Line range hint 89-92: Update GitHub profile link placeholder.

The GitHub authentication link contains a placeholder URL that needs to be updated.

-            <a href="https://github.com/YourGitHubProfile" target="_blank">
+            <a href="https://github.com/login/oauth/authorize?client_id=YOUR_CLIENT_ID" target="_blank">

Line range hint 108-111: Remove redundant hash (#) symbols from footer links.

For consistency with the navbar changes, update the footer links to point to actual pages instead of using hash symbols.

-                <li><a href="#">Our Story</a></li>
-                <li><a href="#">Team</a></li>
-                <li><a href="#">Careers</a></li>
+                <li><a href="about.html#our-story">Our Story</a></li>
+                <li><a href="about.html#team">Team</a></li>
+                <li><a href="careers.html">Careers</a></li>
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 0061ade and a3699ac.

📒 Files selected for processing (1)
  • login.html (1 hunks)
🔇 Additional comments (1)
login.html (1)

19-27: LGTM! Navigation structure has been properly updated.

The navbar links now correctly point to their respective HTML files, addressing the core issue from #935.

Comment on lines +19 to +35
<nav>
<ul id="nav-menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="signup.html">Sign Up</a></li>
<li id="login-link"><a href="login.html">Login</a></li>
</ul>
</nav>

<script>
// Hide the "Login" link if the user is on the login page
if (window.location.pathname.endsWith("login.html")) {
document.getElementById("login-link").style.display = "none";
}
</script>

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Several navigation inconsistencies need attention

  • Multiple pages still contain placeholder href="#" links that need proper destinations
  • The login-link implementation varies across pages:
    • login.html: <li id="login-link"><a href="login.html">
    • Other pages: <a href="login.html" id="login-link"> (without <li> wrapper)
  • Some referenced files are missing:
    • cv.html
    • comment.html
    • privacy-policy.html
🔗 Analysis chain

Verify navbar functionality across pages.

The changes look good, but let's verify the implementation across different scenarios.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify navbar implementation across pages
# Expected results: All pages should have consistent navbar structure and working links

# Check for any remaining hash-only href attributes
echo "Checking for remaining hash-only hrefs..."
rg 'href="#"' --type html

# Verify that all referenced HTML files exist
echo "Verifying referenced HTML files..."
for file in index.html about.html resume.html signup.html cv.html Faqs.html comment.html privacy-policy.html; do
  if [ ! -f "$file" ]; then
    echo "Warning: Referenced file $file does not exist"
  fi
done

# Check for consistent login-link implementation across pages
echo "Checking login link implementation..."
rg 'id="login-link"' --type html

Length of output: 7730

Comment on lines +29 to +34
<script>
// Hide the "Login" link if the user is on the login page
if (window.location.pathname.endsWith("login.html")) {
document.getElementById("login-link").style.display = "none";
}
</script>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve login link visibility handling.

The current implementation has several potential issues:

  1. Might not work with different URL structures (e.g., query parameters, different paths)
  2. Could cause layout shift if executed after page load
  3. No fallback if script fails

Consider this more robust implementation:

   <script>
-      // Hide the "Login" link if the user is on the login page
-      if (window.location.pathname.endsWith("login.html")) {
-          document.getElementById("login-link").style.display = "none";
-      }
+      // Hide login link immediately to prevent layout shift
+      document.documentElement.style.visibility = 'hidden';
+      
+      // More robust page detection
+      document.addEventListener('DOMContentLoaded', function() {
+          try {
+              const loginLink = document.getElementById("login-link");
+              if (window.location.pathname.toLowerCase().includes('login')) {
+                  loginLink.style.display = "none";
+              }
+              // Ensure link is visible if script fails to detect page
+              loginLink.style.visibility = 'visible';
+          } catch (e) {
+              console.error('Error handling login link visibility:', e);
+          } finally {
+              document.documentElement.style.visibility = 'visible';
+          }
+      });
   </script>

Committable suggestion was skipped due to low confidence.

@hbSrujana
Copy link
Author

i created an Issue , issue Title : Navbar links are not working on the Login page.
issue number : #968 935
and solve this issue . ( PR Title : Fix: Navbar links issue on the login page.#944)
could you please review my PR? 😊

@hbSrujana
Copy link
Author

could you please review my PR? 😊

hbSrujana added a commit to hbSrujana/Open-source-Practice that referenced this pull request Nov 9, 2024
Hi GSSOC 2024 extd team 
this is the pr i have raised and it's not been merged.
its Level 1 PR
could yo review and merge it.
GarimaSingh0109/Resum-Resume#968
vishanurag/Canvas-Editor#737
GarimaSingh0109/Resum-Resume#944
@aslams2020
Copy link

This PR cannot be merged as you were not assigned to work on it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Navbar links are not working on the Login page
2 participants