JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
  <li class="sub-cat"><a href="#" class="a-cat">Косметика для лица</a></li>
  <li class="sub-cat">
    <a href="/gl" class="a-cat">Косметика для глаз</a>
    <ul class="sub-nav">
    <li class="in-sub-nav"><a href="#">Тушь</a></li>
    <li class="in-sub-nav"><a href="#">Обводка</a></li>
    </ul>
  </li>
  <li class="sub-cat">
    <a href="#" class="a-cat">Косметика для губ</a>
    <ul class="sub-nav">
    <li class="in-sub-nav"><a href="#">Помада</a></li>
    <li class="in-sub-nav"><a href="#">Карандаш</a></li>
    </ul>
  </li>
  <li class="sub-cat" class="a-cat"><a href="#">Парфюмерия</a></li>
</ul>
<p>Нажимаем на li - открывается список,</p>
<p>Нажимаем на ссылку - открывается ссылка</p>
------------
<p>Как сделать, когда человек проходит в категорию, то автоматически открывалась эта категория?</p>
<p>Т.е. если я прошел по ссылке "Косметика для глаз" (/gl), то на этой странице уже будет развёрнут список "Косметики для глаз"</p>
<p>Также, если я перешёл по дочерней ссылке, например, "тушь", то на странице посвящённой "туше" должна быть открыта родительская категория "Косметика для глаз" </p>

CSS

.nav{
	width:250px;
	padding:0;
	font-family: arial;
	font-size: 13px;
}

.nav li {
	list-style: none;
	min-height: 55px; 
	line-height: 55px;
}

.sub-cat {
	background:#f68;
	cursor: pointer;
}

.sub-cat:hover {
	background:#F36081;
}

.in-sub-nav:hover {
	background: #D04A68;
}

.in-sub-nav a{
	display: block;
}

.nav li a {
	color:#000;
	text-decoration:none;
	margin-left: 30px;
	border-bottom: 1px solid transparent;
	transition: all 0.2s ease-in-out;
}

.a-cat:hover {
	border-bottom: 1px solid #333;
}
.sub-cat {
	cursor:pointer;
}

.sub-nav {
	display:none;
	background:#DC5371;
	padding:0;
}

JavaScript

$(".sub-cat").click(function(){
	$(this).find(".sub-nav").slideToggle("fast");
});