Update navigation on www and Search to match learn

[QuincyLarson]

[johnkennedy9147]

I think 'settings ' is better UI, clearer and more obvious for users. Also think 'home' would be better than clicking freeCodeCamp word and icon which doesn't actually look like a button.

[QuincyLarson]

@johnkennedy9147 I agree. We should have both: a user photo and settings link - both of which will point to the settings. Is this something you'd be interested in helping us implement?

[johnkennedy9147]

@QuincyLarson I'd be happy to but I've got a bunch on at the moment so might be a few weeks before I get a chance to look at it. I've added it to my to-do list but in the meantime anyone else can pick it up. I'll add a comment if I start working on it.

[Nirajn2311]

@QuincyLarson @johnkennedy9147 I would appreciate it if someone told me what I should do and the progress of this issue.

[QuincyLarson]

@johnkennedy9147 Are you still interested in helping tackle this issue? I think we could add both a "home" button (which would take them to the "welcome page" to the navigation, and a "settings" link to the left of their photo (both the photo and the "settings" link would redirect them to /settings).

[johnkennedy9147]

@QuincyLarson see my email - however for this issue I think I saw something being done in another PR which has changed the navs - www, learn and settings are all now different

[QuincyLarson]

@johnkennedy9147 Yes - we're trying to make the navigation universal across different services. We will add the settings button to the nav when we do so.

[schalkneethling]

@QuincyLarson Hey there, is this issue still up for grabs? Also, are the requirements still as defined in https://github.com/freeCodeCamp/freeCodeCamp/issues/17307#issue-327929096

It seems like it might have changed a bit from reading the conversation above. Thanks!

[ahmaxed]

@QuincyLarson, @moT01 pointed out to me that we have a number of different navigations. I was wondering if you would be interested in a complete nav redesign to make it more comprehensive and more user friendly?

[SemperDisco]

What is the current of this issue? Can I be of any help?

[QuincyLarson]

@ahmadabdolsaheb Thanks for your patience.

We want to build a universal navigation component that exists on every page - including the Guide and Learn.

Rather than add a ton of buttons up top, we want to add a footer that has links to all the various pages currently linked from about.freecodecamp.org. The main problem with having a footer is that the curriculum view has 3 independently scrolling elements.

Would you be interested in taking a crack at designing this? And @SemperDisco We would welcome your help as well if you're interested in collaborating on this.

[moT01]

I made a quick pen at one point that I thought might be a good design to implement or build on... https://codepen.io/moT01/pen/zMKbEQ?editors=1100 - basically just took all the parts we have on various pages and put them together.

[moT01]

Here's a list of what we might want in a footer. About Donate YouTube Podcast Support Medium Alumni Network GitHub Gitter Sponsors

[ahmaxed]

I suggest finalizing the links that we need to include in the footer and then start working on the footer component.

here is a link to bootstrap official sticky footer template: https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/

for large number of links, It is the industry standard to group the links for the footer. so we probably need to think of that.

here are some examples:

khanacademy:

Udacity:

EDX:

Slack:

[ahmaxed]

Any ideas for resolving the 3 scroller issue Qunicy mentioned? @moT01 @SemperDisco I think if we had only one scroller, the user had to scroll to the bottom of the page anyway to get the footer. Right now, i get a pretty similar behavior. when I have my cursor on a scrolling component and scroll to the end I am able to go where the footer component would be. So I don't think it is a major issue because the behavior is similar.

[QuincyLarson]

@ahmadabdolsaheb I like the simplicity of Khan Academy's footer, with it's mission statement and call to action on the side:

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff. You can make a tax-deductible donation here.

Columns:

Our Nonprofit

About Donate Shop Sponsors Contact email

Our Community

Alumni Network Study Groups Forum Gitter GitHub Support Code of Conduct Privacy Policy Terms of Service

Our Learning Resources

Curriculum Guide YouTube Podcast Twitter Medium Instagram

[ahmaxed]

Here is a quick pen. https://codepen.io/abdolsa/pen/rozGJj?editors=1100 any thoughts? @QuincyLarson @moT01 @SemperDisco

[QuincyLarson]

@ahmadabdolsaheb This looks great! Very nice clean design, good use of whitespace, and good responsivity.

[ahmaxed]

@QuincyLarson @moT01 @Nirajn2311 I have a working footer, and as Qunicy mentioned it does affect the user experience when placed under three scrolling divs. here are some solutions.

1. widening the separating the columns separating the three panels so campers have something to grab onto to scroll the whole page rather than individual panels;

2. have a an expandable fixed bar at the bottom.

3. have a sticky expandable small footer at the bottom.

4. completely removing the footer on this page.

Let me know about your feedback so I could proceed with finalizing the footer. Thanks P.S there are other issues with the UI's grid system and markdown that affects the footer implementation. I addressed them in a separate issue. #34826

[moT01]

There's already a lot going on in this area. More scroll bars seems like clutter and possible confusion...

I like the expandable option(s) or...

5. embed the footer within the lesson panel?

[ahmaxed]

Thanks @moT01, that is definitely an option. we should see how it would like in action. I also like the small expandable option. so if it does get in the way of the user, at least it is a small distraction. I included a gif of the current state of the footer in different screens. let me know what you think. btw, how does the style and the color look?

[moT01]

Looks good, I was thinking more of a green background to match the nav, but the gray and green buttons look good... might want to get Quincy's opinion there. And actually, that looks pretty good just putting it at the bottom of the other panels... the scrollbar is hidden until you scroll down - I suppose it might be different on other browsers. It could maybe use some white space or something to separate it from the lesson panels a little. But overall, it looks real good - nice job!

[vkWeb]

@QuincyLarson I want to be an active participant in designing the footer but as you know I am presently inactive in the community. Fortunately, I landed here while I was looking at the issues. I want to share some ideas on this.

@ahmadabdolsaheb Amazing work there 👍. I am a big fan of GitHub's footer! We should do something similar. We should put the full footer only on the main homepage. Few primary links may be put on the authorized user's welcome page. Some screenshots will clear the design I have in mind.

Full footer on homepage:

We can implement something similar to:

Footer with primary links on authorized user welcome page:

We can implement something similar to:

And I am totally against putting footer on the learn platform. Before making any UI change we should ask ourselves "As a camper will it improve my learning experience?". Putting footer on learn platform will not. Presently, we have a lot of scrollbars and buttons on learn platform and putting footer there will conjust things up more. So, no footer on learn is the way we should be going :)

[ahmaxed]

thanks @vkWeb for the valuable input. That is the industry standard to implement footers. So ideally the footer component will receive some props depending on the page that the user is visiting and output a custom footer. Let's wait for @QuincyLarson's output to see which direction he would like us to pursue.

[Nirajn2311]

@ahmadabdolsaheb Nice design of the footer. I was wondering if for the social media part(FB, twitter, medium, Youtube etc.) we could change it to logos.

[QuincyLarson]

@ahmadabdolsaheb That looks solid!

@vkWeb Rather than simplify the footer as GitHub has done, I propose we keep it the same everywhere so people don't have to adapt to the fact that the footer changes from page to page. We want to keep our navigation up top the same on every page, too.

Regarding having the footer on Learn - we do eventually want to do this, but we need to figure out how. As @vkWeb pointed out, with the current multi-pain scrolling, having a footer would be a pain. Let's worry about that later, and focus instead on creating a common component we can use on all the non-learn pages.

@ahmadabdolsaheb Since you've already got a working design of the footer, are you interested in tackling this?