Collapsing Search field & Sidebar current Page-Section Highlighting

Collapsing Search field & Sidebar current Page-Section Highlighting
0

#1

I have almost completed my Technical Documentation page, which I decided would be a clone of the React JS Docs.

CodePen. (The project uses SCSS, but you may ignore that altogether for the solution).

The real React JS Docs page has three features which I have not been able to imitate. These are:

  1. The current Page section is always highlighted in the sidebar. (They have most probably implemented it using React-Router, but I want to know if this is possible using plain CSS-JS)
  2. The nav-bar on the top contains a search field, which collapses into a search-icon for smaller screens, it comes back to full width when focused.
  3. Code Syntax Highlighting - they have colored code block, while my code is all blue :frowning:

Any help/guidance/resource on how to implement these features will be appreciated. Pure CSS solution, as well as Vanilla JS solutions are also welcome. But please do not use JQuery.

Thanks and Happy Coding!


#2

First you need to add this link to your JavaScript settings in codepen,

https://code.jquery.com/jquery-3.3.1.slim.min.js

You can do this with Jquery, add these in your JS,

$(document).ready(function(){
     $(".js-link").click(function(){
	if($(".js-link").hasClass("highlight")) {
	     $(".js-link").removeClass("highlight");
	}
	$(this).addClass("highlight");
     });
});

Create a class called highlight in your CSS , also add a class called js-link to your anchor elements or you can use .nav-link instead of .js-link

.highlight {
    color: #f00;
}

It’s because they have set a color code at the top of CSS

$color-primary: rgb(97, 218, 251);

And they reference it here,

.code {
	display: block;
	padding: 2rem 3rem;
	margin-left: -2rem;
	margin-bottom: 2rem;
	width: 100%;
	font-size: 1.5rem;
	font-family: 'Source Code Pro', monospace;
	background-color: $code;
	border-radius: 5px;
	color: $color-primary; //Here they reference it, You can change the $color-primary above to see the difference
}

#3

Thanks @Sujith3021 but your answer does not help at all. You have quoted my own code!


#4

Hi @AliNisarAhmed

I gave an answer in JQuery for this Qn, but i just saw that you did not want any JQuery, so for JS solutions i might suggest this, it is a good example,

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_active_element

For this, i showed you a way to change the color, all they had done was to use a span between the code to make it look colorful,

In your media query, for smaller screens, hide the default search-bar, and in place of that, just place a search icon, and in your JS, you can add or remove the class to slide in or out the search-bar when the search-icon is clicked, you can try these suggestions, and if you get stuck you can come back here.