From d5ded18dbac4329fe0061420aa9030ed7481f4f5 Mon Sep 17 00:00:00 2001
From: RuikangRPI <linr12@rpi.edu>
Date: Fri, 3 Nov 2023 12:32:40 -0400
Subject: [PATCH] feat: rotating profile dropdown

- added script to _base.html
- added profile dropdown
- need to add on hover effects for the icons
---
 .../dropdown_profile/dropdown_profile.html    | 156 ++++++++++++++++++
 .../dropdown_profile/dropdown_profile.py      |  14 ++
 .../dropdown_profile/example/.DS_Store        | Bin 0 -> 6148 bytes
 .../dropdown_profile/example/index.html       |  89 +++++-----
 ACMAS/app/ACMAS_Web/templates/_base.html      |   8 +-
 5 files changed, 221 insertions(+), 46 deletions(-)
 create mode 100644 ACMAS/app/ACMAS_Web/components/dropdown_profile/example/.DS_Store

diff --git a/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.html b/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.html
index e69de29..a75a7c0 100644
--- a/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.html
+++ b/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.html
@@ -0,0 +1,156 @@
+{% load component_tags %}
+
+<style>
+
+#dropdown_profile_x {
+    transform: rotate(-12deg);
+}
+#dropdown_profile_y {
+    transform: rotate(-45deg);
+}
+#dropdown_profile_z {
+    transform: rotate(-78deg);
+}
+#dropdown_profile_X, #dropdown_profile_Y, #dropdown_profile_Z {
+    background: lightgrey;
+}
+#dropdown_profile_X > svg {
+    transform: rotate(282deg); /* 102 + 180, there's a bug with tooltip, X also has class rotate-180 */
+}
+#dropdown_profile_Y > svg {
+    transform: rotate(135deg);
+}
+#dropdown_profile_Z > svg {
+    transform: rotate(168deg);
+}
+
+#dropdown_profile_por {
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd" /></svg>');
+}
+#dropdown_profile_hover-zone {
+    width: 12rem;
+    height: 12rem;
+    clip-path: circle(100% at 100% 100%);
+}
+#dropdown_profile_diameter {
+    transition: all 0.5s ease-in-out;
+    width: 12rem;
+    height: 12rem;
+}
+
+.dropdown_profile_hover {
+    transform: rotate(-90deg);
+}
+.dropdown_profile_por_hover {
+    transform: rotate(90deg);
+}
+.dropdown_profile_translate {
+    transform: translate(6rem, -4.8rem);
+}
+</style>
+
+<div class="relative px-4">
+    <div class="absolute top-1/2 right-1/2 dropdown_profile_translate invisible">
+        <div id="dropdown_profile_por"
+                class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 rounded-full visible"
+                onmouseover="rotate()"></div>
+        <div id="dropdown_profile_diameter" class="relative rounded-full invisible">
+            <div id="dropdown_profile_hover-zone"
+                class="absolute left-0 top-0 -translate-x-12 -translate-y-12 rounded-lg invisible"
+                onmouseout="reset()"></div>
+            <div id="dropdown_profile_x" class="absolute w-full h-full invisible">
+                <div id="dropdown_profile_X" onmouseover="rotate()" onclick="window.location.href='profile'"
+                    class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 w-10 h-10 rounded-full invisible flex justify-center items-center opacity-0 transition-opacity duration-200 ease-in-out rotate-180"
+                    data-tooltip-target="tooltip-x" data-tooltip-placement="top">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-6 h-6">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
+                    </svg>
+                    <div id="tooltip-x" role="tooltip" onmouseover="reset()"
+                        class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+                        <p>Profile</p>
+                        <div class="tooltip-arrow" data-popper-arrow></div>
+                    </div>
+                </div>
+            </div>
+            <div id="dropdown_profile_y" class="absolute w-full h-full invisible">
+                <div id="dropdown_profile_Y" onmouseover="rotate()"
+                    class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 w-10 h-10 rounded-full invisible flex justify-center items-center opacity-0 transition-opacity duration-200 ease-in-out"
+                    data-tooltip-target="tooltip-y" data-tooltip-placement="top">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-6 h-6">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                    <div id="tooltip-y" role="tooltip" onmouseover="reset()"
+                        class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+                        <p class="rotate-180">Setting</p>
+                        <div class="tooltip-arrow" data-popper-arrow></div>
+                    </div>
+                </div>
+            </div>
+            <div id="dropdown_profile_z" class="absolute w-full h-full invisible">
+                <div id="dropdown_profile_Z" onmouseover="rotate()"
+                    class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 w-10 h-10 rounded-full invisible flex justify-center items-center opacity-0 transition-opacity duration-200 ease-in-out"
+                    data-tooltip-target="tooltip-z" data-tooltip-placement="top">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-6 h-6">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
+                    </svg>
+                    <div id="tooltip-z" role="tooltip" onmouseover="reset()"
+                        class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+                        <p class="rotate-180">Sign Out</p>
+                        <div class="tooltip-arrow" data-popper-arrow></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    function rotate() {
+    document.getElementById("dropdown_profile_diameter").classList.add("dropdown_profile_hover");
+    document.getElementById("dropdown_profile_X").classList.add("opacity-100");
+    document.getElementById("dropdown_profile_X").classList.add("visible");
+    document.getElementById("dropdown_profile_X").classList.remove("opacity-0");
+    document.getElementById("dropdown_profile_X").classList.remove("invisible");
+    document.getElementById("dropdown_profile_Y").classList.add("opacity-100");
+    document.getElementById("dropdown_profile_Y").classList.add("visible");
+    document.getElementById("dropdown_profile_Y").classList.remove("opacity-0");
+    document.getElementById("dropdown_profile_Y").classList.remove("invisible");
+    document.getElementById("dropdown_profile_Z").classList.add("opacity-100");
+    document.getElementById("dropdown_profile_Z").classList.add("visible");
+    document.getElementById("dropdown_profile_Z").classList.remove("opacity-0");
+    document.getElementById("dropdown_profile_Z").classList.remove("invisible");
+
+    document.getElementById("dropdown_profile_hover-zone").classList.add("visible");
+    document.getElementById("dropdown_profile_hover-zone").classList.remove("invisible");
+}
+
+function reset() {
+    document.getElementById("dropdown_profile_diameter").classList.remove("dropdown_profile_hover");
+    document.getElementById("dropdown_profile_X").classList.add("opacity-0");
+    document.getElementById("dropdown_profile_X").classList.remove("opacity-100");
+    document.getElementById("dropdown_profile_Y").classList.add("opacity-0");
+    document.getElementById("dropdown_profile_Y").classList.remove("opacity-100");
+    document.getElementById("dropdown_profile_Z").classList.add("opacity-0");
+    document.getElementById("dropdown_profile_Z").classList.remove("opacity-100");
+}
+
+document.getElementById("dropdown_profile_X").addEventListener("transitionend", function() {
+    if(this.classList.contains("opacity-0")) {
+        document.getElementById("dropdown_profile_X").classList.add("invisible");
+        document.getElementById("dropdown_profile_X").classList.remove("visible");
+        document.getElementById("dropdown_profile_Y").classList.add("invisible");
+        document.getElementById("dropdown_profile_Y").classList.remove("visible");
+        document.getElementById("dropdown_profile_Z").classList.add("invisible");
+        document.getElementById("dropdown_profile_Z").classList.remove("visible");
+        document.getElementById("dropdown_profile_hover-zone").classList.add("invisible");
+        document.getElementById("dropdown_profile_hover-zone").classList.remove("visible");
+    }
+});
+</script>
\ No newline at end of file
diff --git a/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.py b/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.py
index e69de29..2704803 100644
--- a/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.py
+++ b/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.py
@@ -0,0 +1,14 @@
+from django_components import component
+
+
+@component.register("dropdown_profile")
+class dropdown_profile(component.Component):
+    template_name = "dropdown_profile/dropdown_profile.html"
+
+
+
+# {% component "dropdown_profile" profile_icon="" %}
+# 
+
+# NOTE need to load following line at the top of component's html to do nested components
+# {% load component_tags %}
\ No newline at end of file
diff --git a/ACMAS/app/ACMAS_Web/components/dropdown_profile/example/.DS_Store b/ACMAS/app/ACMAS_Web/components/dropdown_profile/example/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..870a976e630b6653438387dfb4541f7d63191a23
GIT binary patch
literal 6148
zcmeH~yH3O~5Jm6676F<qDg6aVh>FfyEd@0NE!u|!D9aWL5_I`Fz6<U=KqRCEAv7b|
z*N+(|IZ|v70GU0lPJt<ahDBAhF=9GAI<*(h`&6+to^gU(JYs`(WTC$}r0;%+J3L^8
zHNL$6WxHK2+U<h#3g?>T{4I>_rWbRM-N65K;D3M}xxA3env9n04I<=h5W#L*5=a6`
zAPFRaA0WUpTdg^A%{mDrfh6!rK=+5jqFO^cSKB&RSqea%aM+A(y)J7^39X@>D`#lp
zp;Ql*NHN62IbOoAhIXzV4vFML;>jP$i`dh-eld4Qb<H{nB!NBw&3$Q8J^wHG%Zw)Z
z=8{zsNCN+rfK29B^BKP`&em_=sb_6rxnWULzfK!8wtJTVc61*(wn?8a+NNI(?Ob&g
S9k+05UIYwCR!QI&2)qMOJv$cw

literal 0
HcmV?d00001

diff --git a/ACMAS/app/ACMAS_Web/components/dropdown_profile/example/index.html b/ACMAS/app/ACMAS_Web/components/dropdown_profile/example/index.html
index 52faa35..76cc58f 100644
--- a/ACMAS/app/ACMAS_Web/components/dropdown_profile/example/index.html
+++ b/ACMAS/app/ACMAS_Web/components/dropdown_profile/example/index.html
@@ -32,59 +32,60 @@
         <li>
           <a href="#" class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Pricing</a>
         </li>
-        <li class="relative px-4">
-          <div class="absolute top-1/2 right-1/2 translate-x-1/2 -translate-y-1/2 invisible">
-            <div id="diameter" class="relative rounded-full invisible">
-              <div id="hover-zone" class="absolute left-0 top-0 -translate-x-12 -translate-y-12 opacity-30 rounded-lg invisible"
-                onmouseout="reset()"></div>
-              <div id="o" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 bg-black rounded-full visible"
-                onmouseover="rotate()"></div>
-              <div id="x" class="absolute w-full h-full invisible">
-                <div id="X" onmouseover="rotate()"
-                  class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 w-10 h-10 rounded-full invisible flex justify-center items-center opacity-0 transition-opacity duration-200 ease-in-out rotate-180"
-                  data-tooltip-target="tooltip-x" data-tooltip-placement="top">
-                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
-                  </svg>
-                  <div id="tooltip-x" role="tooltip" onmouseover="reset()"
-                    class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-                    <p>Profile</p>
-                    <div class="tooltip-arrow" data-popper-arrow></div>
+        <li>
+          <div class="relative px-4">
+            <div id="o" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 bg-black rounded-full visible"
+                  onmouseover="rotate()"></div>
+            <div class="absolute top-1/2 right-1/2 translate-x-1/2 -translate-y-1/2 invisible">
+              <div id="diameter" class="relative rounded-full invisible">
+                <div id="hover-zone" class="absolute left-0 top-0 -translate-x-12 -translate-y-12 opacity-30 rounded-lg invisible"
+                  onmouseout="reset()"></div>
+                <div id="x" class="absolute w-full h-full invisible">
+                  <div id="X" onmouseover="rotate()"
+                    class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 w-10 h-10 rounded-full invisible flex justify-center items-center opacity-0 transition-opacity duration-200 ease-in-out rotate-180"
+                    data-tooltip-target="tooltip-x" data-tooltip-placement="top">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
+                    </svg>
+                    <div id="tooltip-x" role="tooltip" onmouseover="reset()"
+                      class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+                      <p>Profile</p>
+                      <div class="tooltip-arrow" data-popper-arrow></div>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div id="y" class="absolute w-full h-full invisible">
-                <div id="Y" onmouseover="rotate()"
-                  class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 w-10 h-10 rounded-full invisible flex justify-center items-center opacity-0 transition-opacity duration-200 ease-in-out"
-                  data-tooltip-target="tooltip-y" data-tooltip-placement="top">
-                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                  </svg>
-                  <div id="tooltip-y" role="tooltip" onmouseover="reset()"
-                    class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-                    <p class="rotate-180">Setting</p>
-                    <div class="tooltip-arrow" data-popper-arrow></div>
+                <div id="y" class="absolute w-full h-full invisible">
+                  <div id="Y" onmouseover="rotate()"
+                    class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 w-10 h-10 rounded-full invisible flex justify-center items-center opacity-0 transition-opacity duration-200 ease-in-out"
+                    data-tooltip-target="tooltip-y" data-tooltip-placement="top">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                    <div id="tooltip-y" role="tooltip" onmouseover="reset()"
+                      class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+                      <p class="rotate-180">Setting</p>
+                      <div class="tooltip-arrow" data-popper-arrow></div>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div id="z" class="absolute w-full h-full invisible">
-                <div id="Z" onmouseover="rotate()"
-                  class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 w-10 h-10 rounded-full invisible flex justify-center items-center opacity-0 transition-opacity duration-200 ease-in-out"
-                  data-tooltip-target="tooltip-z" data-tooltip-placement="top">
-                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
-                  </svg>
-                  <div id="tooltip-z" role="tooltip" onmouseover="reset()"
-                    class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-                    <p class="rotate-180">Sign Out</p>
-                    <div class="tooltip-arrow" data-popper-arrow></div>
+                <div id="z" class="absolute w-full h-full invisible">
+                  <div id="Z" onmouseover="rotate()"
+                    class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 w-10 h-10 rounded-full invisible flex justify-center items-center opacity-0 transition-opacity duration-200 ease-in-out"
+                    data-tooltip-target="tooltip-z" data-tooltip-placement="top">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
+                    </svg>
+                    <div id="tooltip-z" role="tooltip" onmouseover="reset()"
+                      class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+                      <p class="rotate-180">Sign Out</p>
+                      <div class="tooltip-arrow" data-popper-arrow></div>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-          
         </li>
       </ul>
     </div>
diff --git a/ACMAS/app/ACMAS_Web/templates/_base.html b/ACMAS/app/ACMAS_Web/templates/_base.html
index ff2e031..4ed8324 100644
--- a/ACMAS/app/ACMAS_Web/templates/_base.html
+++ b/ACMAS/app/ACMAS_Web/templates/_base.html
@@ -287,14 +287,16 @@
             {% block user %}
               <!-- Logout -->
               <li><a class="block py-2 pl-3 pr-4 text-gray-900 rounded md:hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-gray-500" href="/logout">Logout</a></li>
-              <!-- Hello Username-->
+              <!-- Hello Username -->
               <li><a class="block py-2 pl-3 pr-4 text-gray-900 rounded md:hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-gray-500" href="/profile">{{ user.username }}</a></li>
+              <!-- Profile -->
+              <li>{% component "dropdown_profile" %}</li>
             {% endblock %}
           {% else %}
             {% block anon %}
             <!-- Register -->
             <li><a class="block py-2 pl-3 pr-4 text-gray-900 rounded md:hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-gray-500" href="/register">Register</a></li>
-            <!-- Hello Username-->
+            <!-- Hello Username -->
             <li><a class="block py-2 pl-3 pr-4 text-gray-900 rounded md:hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-gray-500" href="/login">Login</a></li>
             {% endblock %}
           {% endif %}
@@ -322,6 +324,8 @@
     /svg>
   </div>
   -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/flowbite.min.js"></script>
 </body>
 {% endblock body %}