Merge pull request #192 from codeharborhub/dev-1

drop-down items updated

Author: ajay-dhangar

docusaurus.config.js

@@ -134,41 +134,55 @@ const config = {
             items: [
               {
                 type: "html",
-                value: `
-        <div class="dropdown_grid">
-          <a class="dropbtn" href="/tutorial/">Web Development</a>
-          <div class="dropdown-content">
-            <a href="/tutorial/category/html/" class="nav__icons"> <img src="/tutorial/icons/html-5.svg" title="HTML" alt="HTML" /> </a>
-            <a href="/tutorial/css/introduction" class="nav__icons"> <img src="/tutorial/icons/css.svg" title="CSS" alt="CSS" /> </a>
-            <a href="/tutorial/javascript/introduction-to-javascript/what-is-js" class="nav__icons"> <img src="/tutorial/icons/js.svg" title="JavaScript" alt="JS" /> </a>
-            <a href="/tutorial/react/react-intro" class="nav__icons"> <img src="/tutorial/icons/jsx.svg" title="React" alt="React" /> </a>
-          </div>
-        </div>`,
+                value: `<div class="dropdown_grid">
+                <a class="dropbtn" href="/tutorial/">Docs</a>
+                <div class="dropdown-content">
+                  <a href="#" class="nav__icons"> <img src="/tutorial/icons/html-5.svg" title="HTML5" alt="HTML" /> </a>
+                  <a href="#" class="nav__icons"> <img src="/tutorial/icons/css.svg" title="CSS" alt="CSS" /> </a>
+                  <a href="#" class="nav__icons"> <img src="/tutorial/icons/js.svg" title="JavaScript" alt="JavaScript" /> </a>
+                  <a href="#" class="nav__icons"> <img src="/tutorial/icons/jsx.svg" title="React.Js" alt="React" /> </a>
+                  <a href="#" class="nav__icons"> <img src="/tutorial/icons/ts.svg" title="TypeScript" alt="TypeScript" /> </a>
+                  <a href="#" class="nav__icons"> <img src="/tutorial/icons/py.svg" title="Python" alt="Python" /> </a>
+                  <a href="#" class="nav__icons"> <img src="/tutorial/icons/tailwind-css.svg" title="Tailwind CSS" alt="Tailwind" /> </a>
+                  <a href="#" class="nav__icons"> <img src="/tutorial/icons/next-js.svg" title="NextJs" alt="Next" /> </a>
+                </div>
+              </div>`,
               },
+
+              {
+                type: "html",
+                value: '<hr style="margin: 0.3rem 0;">',
+              },
+
               {
                 type: "html",
-                value:
-                  '<hr style="margin: 0.3rem 0; border: none; border-top: 1px solid var(--ifm-color-emphasis-200);">',
+                value: `<div class="dropdown_grid">
+                <a class="dropbtn" href="#"> Courses </a>
+                <div class="dropdown-content">
+                  <a href="#" class="nav__icons"> <img src="/tutorial/icons/html-5.svg" alt="HTML" /> </a>
+                  <a href="#" class="nav__icons"> <img src="/tutorial/icons/jsx.svg" alt="React" /> </a>
+                </div>
+              </div>`,
               },
+
+              {
+                type: "html",
+                value: '<hr style="margin: 0.3rem 0;">',
+              },
+
               {
                 type: "html",
-                value: `
-                    <div class="dropdown_grid">
-                      <a class="dropbtn" href="#">Core Skills & Tech</a>
-                      <div class="dropdown-content">
-                        <a href="/tutorial/git/introduction" class="nav__icons"> <img src="/tutorial/icons/git.svg" title="Git" alt="Git" /> </a>
-                        <a href="/tutorial/github/introduction-to-github" class="nav__icons"> <img src="/tutorial/icons/github.svg" title="GitHub" alt="GitHub" /> </a>
-                        <a href="/tutorial/cybersecurity" class="nav__icons"> <img src="/tutorial/icons/cyber-security.png" title="Cyber Security" alt="Cyber" /> </a>
-                        <a href="/tutorial/machine-learning" class="nav__icons"> <img src="/tutorial/icons/ai-chat.svg" title="Machine Learning" alt="ML" /> </a>
-                        <a href="/tutorial/internet/introduction" class="nav__icons"> <img src="/tutorial/icons/internet.svg" title="Internet" alt="Internet" /> </a>
-                        <a href="/tutorial/technical-writer" class="nav__icons"> <img src="/tutorial/icons/writer.png" title="Technical Writing" alt="Writing" /> </a>
-                      </div>
-                    </div>`,
+                value: `<div class="dropdown_grid">
+                <a class="dropbtn" href="#" target="_self"> DSA </a>
+                <div class="dropdown-content dsa-content ">
+                  <a href="#" target="_self" class="nav__icons"> 🧩Problems </a> <br />
+                  <a href="#" target="_self" class="nav__icons  "> 💡Solutions </a>
+                </div>
+              </div>`,
               },
               {
                 type: "html",
-                value:
-                  '<hr style="margin: 0.3rem 0; border: none; border-top: 1px solid var(--ifm-color-emphasis-200);">',
+                value: '<hr style="margin: 0.3rem 0;">',
               },
               {
                 to: "/tutorial/",

src/css/custom.css

@@ -240,47 +240,44 @@ mark {
   -webkit-text-fill-color: transparent;
 }
 
-.dropdown_grid {
-  display: grid;
-  grid-template-columns: repeat(2, auto);
-  gap: 4px;
-}
-
-.dropdown_grid .dropbtn {
+.dropbtn {
+  width: 110px;
   background-color: transparent;
   color: var(--ifm-color-primary);
-  padding: 8px 16px;
-  font-size: 16px;
+  padding: 14px;
+  font-size: 18px;
   border: none;
-  transition: background-color 0.3s, color 0.3s;
+  cursor: pointer;
+  border-right: 1px solid #4e8da0db;
+  margin: 2px;
 }
 
-.dropdown-content {  
-  position: relative;
-  min-width: 180px;
+.dropdown_grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 6px;
-  padding: 5px 0;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
 }
 
-.dropdown-content a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 5px;
-  border-radius: 8px;
-  transition: background-color 0.3s, transform 0.3s;
+.dropdown-content {
+  position: relative;
+  min-width: 180px;
+}
+@media (max-width: 400px) {
+  .dsa-content {
+    flex-direction: column;
+  }
+}
+.dropdown-content a:hover {
+  text-decoration: none;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(252, 176, 69, 0.285) 50%,
+    rgba(253, 29, 29, 0.33) 100%
+  );
+  border-radius: 50% 40%;
 }
 
-/* .dropdown_grid .dropdown-content::before {
-  content: "";
-  position: absolute;
-  left: 1px;
-  top: 10%;
-  height: 80%;
-  border: 1px solid #cccccc60;
-} */
 
 .nav__icons img {
   width: 35px;