WIP more dropdown

Shivam · Shivam · commit dae405a82b5a · 2022-02-16T11:58:35.000+05:30
diff --git a/static/style.css b/static/style.css
@@ -85,6 +85,14 @@ html {
     transform: none;
 }
 
+.dropdown:hover .dropdown-menu {
+    display: block;
+}
+
+.dropdown-menu {
+    background-color: white;
+}
+
 .swiper-container {
     z-index: 0;
 }
diff --git a/templates/base.html b/templates/base.html
@@ -24,6 +24,7 @@
 <body class="antialiased bg-white md:max-w-[1092px] mx-auto w-full" style="font-family: museo-sans, sans-serif;">
 <main>
     <header class="py-12 pl-6 pr-8 mg:py-16 lg:py-16 md:px-12 bg-white">
+        <!-- Mobile navbar -->
         <div class="md:hidden">
             <nav class="w-full items-center flex justify-between">
                 <a href="/">
@@ -61,6 +62,7 @@
             </nav>
         </div>
 
+        <!-- Desktop Navbar -->
         <nav>
             <div class="hidden md:flex items-center justify-between">
                 <a href="/">
@@ -83,6 +85,25 @@
                             </li>
                         {% endif %}
                     {% endfor %}
+                    <div class="dropdown font-normal text-base leading-tight tracking-wider md:pr-4 lg:pr-8 xl:pr-8 text-black hover:text-pink-500 ">
+                        <span> more » </span>
+                        <ul class="dropdown-menu absolute hidden h-auto flex pt-1 ">
+                            {% for tab in config.extra.tabs %}
+                            {% if not tab.nav %}
+                                <li class="pt-3">
+                                    <a href="{{ tab.path }}"
+                                    class="font-normal text-base leading-tight tracking-wider md:pr-4 lg:pr-8 xl:pr-8 text-black hover:text-pink-500 ">
+                                        {% if current_path == tab.path %}
+                                            {{ tab.name | replace(from="o", to="<span class='font-bold text-pink-500'>o</span>") | safe }}
+                                        {% else %}
+                                            {{ tab.name }}
+                                        {% endif %}
+                                    </a>
+                                </li>
+                            {% endif %}
+                            {% endfor %}
+                        </div>
+                    </div>
                 </ul>
             </div>
         </nav>

Original file line number	Diff line number	Diff line change
`@@ -85,6 +85,14 @@ html {`
`85`	`85`	`transform: none;`
`86`	`86`	`}`
`87`	`87`
	`88`	`+.dropdown:hover .dropdown-menu {`
	`89`	`+ display: block;`
	`90`	`+}`
	`91`	`+`
	`92`	`+.dropdown-menu {`
	`93`	`+ background-color: white;`
	`94`	`+}`
	`95`	`+`
`88`	`96`	`.swiper-container {`
`89`	`97`	`z-index: 0;`
`90`	`98`	`}`