From eee8f5310d8f67716a59381787e148921bd92d1a Mon Sep 17 00:00:00 2001
From: Amir <amirsabani303@gmail.com>
Date: Fri, 13 Sep 2024 02:03:00 +0200
Subject: [PATCH] adding some more style

---
 static/css/style.css     | 15 ++++++++++++---
 templates/base.html      |  3 +++
 templates/side_menu.html | 26 ++++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index d3c7c458..a9be78a8 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -19,10 +19,9 @@ header {
   top: 0;
   width: 256px; 
   min-height: 100vh;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
+  overflow: hidden;
   background-color: #5763ab;
-  z-index: 0; 
+  z-index: 9999;
   display: none; 
   transition: transform 0.5s ease-out;
 }
@@ -187,6 +186,10 @@ footer {
 .side-menu.active {
   display: block;
 }
+body.side-menu.active {
+  overflow: none;
+}
+
 
 .content:before {
   content: '';
@@ -199,11 +202,14 @@ footer {
   width: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 99;
+  overflow: hidden;
 }
+
 .content-open{
   margin-left: -256px;
   transition: margin-left 0.1s;
   background-color: rgba(0, 0, 0, 0.5);
+  overflow: hidden;
 }
 
 .header-move{
@@ -211,3 +217,6 @@ footer {
   transition: margin-left 0.1s;
   background-color: rgba(55, 65, 105, 1.0);
 }
+.block-scroll{
+  overflow: hidden;
+}
diff --git a/templates/base.html b/templates/base.html
index 25d7ea4d..b1f267ca 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -40,12 +40,14 @@
         const sideCloseButtons = document.querySelectorAll('.side-close');
         const content = document.querySelector('.content');
         const headermove = document.getElementById('header');
+        const body = document.body;
 
         sideToggle.addEventListener('click', function() {
             sideMenu.classList.toggle('active');
             this.classList.toggle('menu-opened');
             content.classList.toggle('content-open');
             headermove.classList.toggle('header-move');
+            body.classList.toggle('block-scroll')
             });
         
         sideCloseButtons.forEach(button => {
@@ -54,6 +56,7 @@
                 sideToggle.classList.remove('menu-opened');
                 content.classList.remove('content-open');
                 headermove.classList.remove('header-move');
+                body.classList.remove('block-scroll');
                 });
             });
         })
diff --git a/templates/side_menu.html b/templates/side_menu.html
index 8d734b1a..24877c07 100644
--- a/templates/side_menu.html
+++ b/templates/side_menu.html
@@ -1,3 +1,5 @@
+{%load static%}
+
 <div class="side-menu hidden">
     <ul class="m-0 p-0 mt-4 side-navigation list-reset">
         <div class="side-close text-white text-3xl font-bold px-4 m-2 opacity-50 hover:opacity-100">X</div>
@@ -28,4 +30,28 @@
             </li>
         </a>
     </ul>
+    <div class="absolute bottom-0 social-icons p-8">
+        <ul class="flex justify-center">
+          <li class="mr-1">
+            <a href="https://facebook.com/saburly" rel="noreferrer" target="_blank">
+              <img src="{% static '/images/facebook.svg' %}" alt="Facebook Social Media" class="w-full p-2  transition opacity-80 hover:opacity-100" />
+            </a>
+          </li>
+          <li class="mr-1">
+            <a href="https://instagram.com/saburly" rel="noreferrer" target="_blank">
+              <img src="{% static '/images/instagram.svg' %}" alt="Instagram Social Media" class="w-full p-2 transition opacity-80 hover:opacity-100" />
+            </a>
+          </li>
+          <li class="mr-1">
+            <a href="https://twitter.com/saburly" rel="noreferrer" target="_blank">
+              <img src="{% static '/images/twitter.svg' %}" alt="Twitter Social Media" class="w-full p-2 transition opacity-80 hover:opacity-100" />
+            </a>
+          </li>
+          <li class="mr-1">
+            <a href="https://www.linkedin.com/company/saburly/" rel="noreferrer" target="_blank">
+              <img src="{% static '/images/linkedin.svg' %}" alt="LinkedIn Social Media" class="w-full p-2 transition opacity-80 hover:opacity-100" />
+            </a>
+          </li>
+        </ul>
+      </div>
 </div>
\ No newline at end of file