From bd4e9963026dd12607309233c2609df6c8b7cf95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8r=E2=88=82=C2=A1?= <4456749@users.noreply.github.com>
Date: Wed, 13 Mar 2024 13:58:37 +0100
Subject: [PATCH] Fixing the powered by aragon bottom overlap

---
 components/sidebar.tsx                        | 209 ++++++++++--------
 .../dualGovernance/pages/proposal-list.tsx    |   1 +
 plugins/tokenVoting/pages/proposal-list.tsx   |   1 +
 3 files changed, 122 insertions(+), 89 deletions(-)

diff --git a/components/sidebar.tsx b/components/sidebar.tsx
index 5795eb19..21f0fe2e 100644
--- a/components/sidebar.tsx
+++ b/components/sidebar.tsx
@@ -38,8 +38,14 @@ const Sidebar = () => {
   return (
     <header className="h-screen select-none">
       <SidebarSwitchButton />
+
       <div
-        className={`md:w-72 bg-neutral-50 md:bg-neutral-100 h-screen flex flex-col justify-between z-40 ${isOpen ? "absolute md:relative w-full" : "hidden md:block"}`}
+        className={
+          "flex flex-col justify-between h-screen md:w-72 bg-neutral-50 md:bg-neutral-100 " +
+          (isOpen
+            ? "max-sm:absolute md:relative max-sm:w-full"
+            : "max-sm:hidden")
+        }
       >
         <div className="w-full">
           <div className="w-full flex items-center pt-14 py-3 px-3 md:pt-6">
@@ -58,100 +64,125 @@ const Sidebar = () => {
               Aragonette
             </Link>
           </div>
-          <ul className="mt-6 px-6">
-            {/* Home page */}
-            <li
-              onClick={() => setIsOpen(false)}
-              className={`flex w-full justify-between text-neutral-700 cursor-pointer items-center mb-2 ${isHome ? "bg-neutral-100 md:bg-neutral-200 font-semibold text-primary-500" : ""
-                } rounded-lg shadow-lg hover:bg-neutral-100 md:hover:bg-neutral-200`}
-            >
-              <Link href="/" className="flex items-center w-full p-3">
-                <Icon
-                  className="mr-2"
-                  icon={IconType.HOME}
-                  size="lg"
-                  responsiveSize={{ md: "lg" }}
-                />
+          <MenuList isHome={isHome} setIsOpen={setIsOpen} pluginId={pluginId} />
+        </div>
+        <div className="w-full">
+          <PoweredByAragon />
+        </div>
+      </div>
+    </header>
+  );
+};
 
-                <span
-                  className={`block py-2 pr-4 pl-3 rounded ${isHome ? "font-semibold" : ""
-                    } lg:p-0`}
-                  aria-current="page"
-                >
-                  Home
-                </span>
-              </Link>
-            </li>
+const MenuList = ({
+  isHome,
+  setIsOpen,
+  pluginId,
+}: {
+  isHome: boolean;
+  setIsOpen: (o: boolean) => any;
+  pluginId: string | null;
+}) => {
+  return (
+    <ul className="mt-6 px-6">
+      {/* HOME */}
+      <li
+        onClick={() => setIsOpen(false)}
+        className={`flex w-full justify-between text-neutral-700 cursor-pointer items-center mb-2 ${
+          isHome
+            ? "bg-neutral-100 md:bg-neutral-200 font-semibold text-primary-500"
+            : ""
+        } rounded-lg shadow-lg hover:bg-neutral-100 md:hover:bg-neutral-200`}
+      >
+        <Link href="/" className="flex items-center w-full p-3">
+          <Icon
+            className="mr-2"
+            icon={IconType.HOME}
+            size="lg"
+            responsiveSize={{ md: "lg" }}
+          />
 
-            {/* Plugin list */}
-            {plugins.map((plugin, idx) => (
-              <li
-                key={idx}
-                onClick={() => setIsOpen(false)}
-                className={`flex w-full justify-between text-neutral-700 cursor-pointer items-center mb-2 ${plugin.id === pluginId
-                  ? "bg-neutral-100 md:bg-neutral-200 font-semibold text-primary-500 rounded-lg shadow-lg"
-                  : ""
-                  } rounded-lg shadow-lg hover:bg-neutral-100 md:hover:bg-neutral-200`}
-              >
-                <Link
-                  href={"/plugins/" + plugin.id + "/#/"}
-                  className="flex items-center focus:outline-none focus:ring-2 focus:ring-white w-full p-3"
-                >
-                  <Icon
-                    className="mr-2"
-                    icon={plugin.icon}
-                    size="md"
-                    responsiveSize={{ md: "lg" }}
-                  />
-                  <span className="block py-2 pr-4 pl-3 lg:p-0">
-                    {plugin.title}
-                  </span>
-                </Link>
-              </li>
-            ))}
+          <span
+            className={`block py-2 pr-4 pl-3 rounded ${
+              isHome ? "font-semibold" : ""
+            } lg:p-0`}
+            aria-current="page"
+          >
+            Home
+          </span>
+        </Link>
+      </li>
 
-            {/* External links */}
-            <li
-              className={`flex w-full justify-between text-neutral-700 cursor-pointer items-center mb-2 rounded-lg shadow-lg hover:bg-neutral-100 md:hover:bg-neutral-200`}
-            >
-              <Link
-                href={PUB_DISCORD_URL}
-                target="_blank"
-                className="flex items-center w-full p-3"
-              >
-                <Icon
-                  className="mr-2"
-                  icon={IconType.HELP}
-                  size="md"
-                  responsiveSize={{ md: "lg" }}
-                />
-                <span className="block py-2 pr-4 pl-3 lg:p-0">Discord</span>
-              </Link>
-            </li>
-          </ul>
-        </div>
-        <div className="px-8 cursor-pointer py-5 text-neutral-400 w-full fixed bottom-0">
+      {/* PLUGINS */}
+      {plugins.map((plugin, idx) => (
+        <li
+          key={idx}
+          onClick={() => setIsOpen(false)}
+          className={`flex w-full justify-between text-neutral-700 cursor-pointer items-center mb-2 ${
+            plugin.id === pluginId
+              ? "bg-neutral-100 md:bg-neutral-200 font-semibold text-primary-500 rounded-lg shadow-lg"
+              : ""
+          } rounded-lg shadow-lg hover:bg-neutral-100 md:hover:bg-neutral-200`}
+        >
           <Link
-            href="https://aragon.org"
-            className="flex items-center focus:outline-none focus:ring-2 focus:ring-white"
+            href={"/plugins/" + plugin.id + "/#/"}
+            className="flex items-center focus:outline-none focus:ring-2 focus:ring-white w-full p-3"
           >
-            <span className="block py-2 pr-4 pl-3 lg:border-0 flex flex-row">
-              Powered by{" "}
-              <span className="font-semibold text-primary-400 mr-1">
-                &nbsp;Aragon
-              </span>
-              <Image
-                src="/logo.png"
-                width="24"
-                height="20"
-                className=""
-                alt="Aragonette"
-              />
-            </span>
+            <Icon
+              className="mr-2"
+              icon={plugin.icon}
+              size="md"
+              responsiveSize={{ md: "lg" }}
+            />
+            <span className="block py-2 pr-4 pl-3 lg:p-0">{plugin.title}</span>
           </Link>
-        </div>
-      </div>
-    </header>
+        </li>
+      ))}
+
+      {/* EXTERNAL LINKS */}
+      <li
+        className={`flex w-full justify-between text-neutral-700 cursor-pointer items-center mb-2 rounded-lg shadow-lg hover:bg-neutral-100 md:hover:bg-neutral-200`}
+      >
+        <Link
+          href={PUB_DISCORD_URL}
+          target="_blank"
+          className="flex items-center w-full p-3"
+        >
+          <Icon
+            className="mr-2"
+            icon={IconType.HELP}
+            size="md"
+            responsiveSize={{ md: "lg" }}
+          />
+          <span className="block py-2 pr-4 pl-3 lg:p-0">Discord</span>
+        </Link>
+      </li>
+    </ul>
+  );
+};
+
+const PoweredByAragon = () => {
+  return (
+    <div className="w-full flex justify-center mb-3">
+      <Link
+        href="https://aragon.org"
+        className="flex items-center focus:outline-none focus:ring-2 focus:ring-white"
+      >
+        <span className="block py-2 pr-4 pl-3 lg:border-0 flex flex-row">
+          Powered by{" "}
+          <span className="font-semibold text-primary-400 mr-1">
+            &nbsp;Aragon
+          </span>
+          <Image
+            src="/logo.png"
+            width="24"
+            height="20"
+            className=""
+            alt="Aragonette"
+          />
+        </span>
+      </Link>
+    </div>
   );
 };
 
diff --git a/plugins/dualGovernance/pages/proposal-list.tsx b/plugins/dualGovernance/pages/proposal-list.tsx
index 409c6203..810836ab 100644
--- a/plugins/dualGovernance/pages/proposal-list.tsx
+++ b/plugins/dualGovernance/pages/proposal-list.tsx
@@ -96,6 +96,7 @@ export default function Proposals() {
         <ElseIf condition={isConnected}>
           <SectionView>
             <CardEmptyState
+              className="w-full"
               heading="There are no proposals yet"
               humanIllustration={{
                 body: "VOTING",
diff --git a/plugins/tokenVoting/pages/proposal-list.tsx b/plugins/tokenVoting/pages/proposal-list.tsx
index f0f7849a..336cd74b 100644
--- a/plugins/tokenVoting/pages/proposal-list.tsx
+++ b/plugins/tokenVoting/pages/proposal-list.tsx
@@ -101,6 +101,7 @@ export default function Proposals() {
         <ElseIf condition={isConnected}>
           <SectionView>
             <CardEmptyState
+              className="w-full"
               heading="There are no proposals yet"
               humanIllustration={{
                 body: "VOTING",