Refactor navbar - v0 (#162)

IEEE-NITK · Aug 9, 2024 · b8fed3d · b8fed3d
1 parent fb1da4c
commit b8fed3d
Show file tree

Hide file tree

Showing 11 changed files with 273 additions and 162 deletions.
diff --git a/corpus/templates/base.html b/corpus/templates/base.html
@@ -113,13 +113,8 @@
 </head>
 
 <body>
-<div class="lg:hidden">
-    {% include "components/navbar_small.html" %}
-</div>
 
-<div class="hidden lg:block">
-    {% include "components/navbar_large.html" %}
-</div>
+{% include "components/navbar.html" %}
 
 {% if messages %}
     {% for message in messages %}

diff --git a/corpus/templates/components/general_dropdown.html b/corpus/templates/components/general_dropdown.html
diff --git a/corpus/templates/components/navbar.html b/corpus/templates/components/navbar.html
@@ -0,0 +1,73 @@
+{% load static %}
+
+{% block style %}
+  <link rel="stylesheet" href="{% static 'css/navbar.css' %}" />
+{% endblock %}
+
+<div class="drawer ">
+  <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
+  <div class="drawer-content bg-primary text-primary-content flex flex-col">
+    <!-- Navbar -->
+    <div class="navbar w-full bg-primary text-primary-content flex justify-between">
+
+      {# SECTION: LEFT SIDE NAVBAR MOBILE #}
+        <div class="flex-none lg:hidden">
+          <label for="my-drawer-3" aria-label="open sidebar" class="btn btn-square btn-ghost">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/>
+            </svg>
+          </label>
+        </div>
+      {# !SECTION #}
+
+      {# SECTION: CENTER NAVBAR MOBILE / LEFT SIDE NAVBAR DESKTOP #}
+        <div class="mx-2 px-2">
+          <a href="{% url 'index' %}" class="btn btn-ghost normal-case text-xl">
+            <img src="{% static 'img/ieee-nitk.png' %}" alt="IEEE NITK Logo" class="dark-logo logo">
+            <img src="{% static 'img/ieee-nitk-white.png' %}" alt="IEEE NITK Logo" class="light-logo logo">
+        </a>
+        </div>
+      {# !SECTION #}
+
+      {# SECTION: CENTER NAVBAR #}
+        <div class="hidden flex-none lg:block">
+          <ul class="menu menu-horizontal text-lg font-bold">
+            {% include "components/navbar_list.html" %}
+          </ul>
+        </div>
+      {# !SECTION #}
+
+      {# SECTION: RIGHT SIDE NAVBAR #}
+        <div class="flex-none lg:block">
+          {#{% if user.is_authenticated %}#}
+          <!-- <div class="w-max dropdown-content menu menu-sm mt-3 z-[1] p-2 shadow bg-base-100 rounded-box flex flex-row bg-primary text-primary-content mx-2 my-2 px-5 py-5">
+              {#        {% include "components/internal_dropdown.html" %}#}
+          </div>    -->
+          {# {% endif %}#}
+          {% include "components/navbar_right.html" %}
+        </div>
+      {# !SECTION #}
+    </div>
+  </div>
+
+  {# SECTION: DRAWER FOR MOBILE #}
+    <div class="drawer-side">
+      <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay">
+      </label>
+      <ul class="menu bg-primary text-primary-content min-h-full w-80 p-4 font-bold text-lg">
+
+        {# SECTION: CLOSE BUTTON #}
+          <div class="flex justify-end">
+            <label for="my-drawer-3" aria-label="close sidebar" class="btn btn-ghost">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-6 w-6 stroke-current">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M6 18L18 6M6 6l12 12"></path>
+              </svg>
+            </label>
+          </div>
+        {# !SECTION #}
+
+        {% include "components/navbar_list.html" %}
+      </ul>
+    </div>
+  {# !SECTION #}
+</div>
diff --git a/corpus/templates/components/navbar_dropdown.html b/corpus/templates/components/navbar_dropdown.html
diff --git a/corpus/templates/components/navbar_large.html b/corpus/templates/components/navbar_large.html
diff --git a/corpus/templates/components/navbar_list.html b/corpus/templates/components/navbar_list.html
@@ -0,0 +1,110 @@
+
+<li>
+    <a href="{% url 'index' %}">
+        Home
+    </a>
+</li>
+
+<li>
+    <a href="{% url 'about_us' %}">
+        About Us
+    </a>
+</li>
+
+<li>
+    <details>
+        <summary>
+            SIGs
+        </summary>
+        <ul class='bg-primary'>
+            <li>
+                <a href="{% url 'sig' sig_name='compsoc' %}">
+                    CompSoc
+                </a>
+            </li>
+            <li>
+                <a href="{% url 'sig' sig_name='diode' %}">
+                    Diode
+                </a>
+            </li>
+            <li>
+                <a href="{% url 'sig' sig_name='piston' %}">
+                    Piston
+                </a>
+            </li>
+        </ul>
+    </details>
+</li>
+
+<li>
+    <details>
+        <summary>
+            Affinity Groups
+        </summary>
+        <ul class='bg-primary'>
+            <li>
+                <a href="{% url 'sig' sig_name='wie' %}">
+                    WiE
+                </a>
+            </li>
+            <li>
+                <a href="{% url 'sig' sig_name='sight' %}">
+                    SIGHT
+                </a>
+            </li>
+        </ul>
+    </details>
+</li>
+
+<li>
+    <details>
+        <summary>
+            Events
+        </summary>
+        <ul class='bg-primary'>
+            <li>
+                <a href="{% url 'embedathon_home' %}">
+                    Embedathon
+                </a>
+            </li>
+            <li>
+                <a href="{% url 'impulse_home' %}">
+                    Impulse
+                </a>
+            </li>
+            <li>
+                <a href="{% url 'electrika_home' %}">
+                    Electrika
+                </a>
+            </li>
+            <li>
+                <a href="{% url 'skyward_expedition_home' %}">
+                    Skyward Expedition
+                </a>
+            </li>
+            <li>
+                <a href="{% url 'robotrix_home' %}">
+                    Robotrix
+                </a>
+            </li>
+        </ul>
+    </details>
+</li>
+
+<li>
+    <a href="https://ieee-nitk.github.io/blog/">
+        Blog
+    </a>
+</li>
+
+<li>
+    <a href="https://ieee-nitk.github.io/gyan/">
+        Gyan
+    </a>
+</li>
+
+<li>
+    <a href="{% url 'virtual_expo_home' %}">
+        Virtual Expo
+    </a>
+</li>
diff --git a/corpus/templates/components/navbar_small.html b/corpus/templates/components/navbar_small.html
diff --git a/corpus/templates/pages/index.html b/corpus/templates/pages/index.html
@@ -16,8 +16,11 @@
     class="hero min-h-screen min-w-screen bg-gradient-to-br from-sky-50 to-blue-300 dark:from-blue-950 dark:to-base-100">
     <div id="particles-js" class="h-screen w-full"></div>
     <div class="hero-content text-center flex-col">
-        <h1 class="text-3xl md:text-5xl lg:text-6xl font-extrabold">Advancing Technology for <span
-                id="typewriter"></span></h1>
+        <h1 class="text-3xl md:text-5xl lg:text-6xl font-extrabold">Advancing Technology for 
+            <span class="typewrite" data-period="2000" data-type='[ "Solving Problems", "NITK", "Humanity"]'>
+                <span class="wrap"></span>
+            </span>
+        </h1>
 
 
         <a class="my-5" href="https://www.ieee.org/">

diff --git a/corpus/templates/static/css/index.css b/corpus/templates/static/css/index.css
@@ -7,3 +7,10 @@
     0% { transform: translateX(100%); }
     100% { transform: translateX(0%); }
 }
+
+{% comment %} 
+    THIS IS A HACK TO FIX THE Z-INDEX OF THE HERO CONTENT
+{% endcomment %}
+.hero-content {
+    z-index: auto !important;
+}
diff --git a/corpus/templates/static/css/navbar.css b/corpus/templates/static/css/navbar.css
@@ -0,0 +1,25 @@
+.drawer-side {
+  z-index: 1000;
+}
+
+img.logo {
+  width: 125px;
+}
+
+@media (min-width: 480px) {
+  img.logo {
+      width: 150px;
+  }
+}
+
+@media (min-width: 768px) {
+  img.logo {
+      width: 175px;
+  }
+}
+
+@media (min-width: 992px) {
+  img.logo {
+      width: 200px;
+  }
+}