Update utils/components/improved_sidebar.py

utils/components/improved_sidebar.py

@@ -1,5 +1,5 @@
 """
-مكون الشريط الجانبي المحسن
+مكون الشريط الجانبي المحسن - مع تحسين موضع الشعار وتحديث الأزرار والأيقونات
 """
 
 import streamlit as st
@@ -22,12 +22,14 @@ def render_sidebar():
         bg_color = "#1e1e1e"
         text_color = "#ffffff"
         sidebar_bg = "#2d2d2d"
+        selected_bg = "#ff9a3c"
     else:
         primary_color = "#2c3e50"
         secondary_color = "#ff9a3c"
         bg_color = "#f8f9fa"
         text_color = "#333333"
         sidebar_bg = "#f0f2f6"
+        selected_bg = "#ff9a3c"
     
     # تطبيق CSS مخصص لتحسين مظهر الشريط الجانبي
     st.markdown(f"""
@@ -41,9 +43,19 @@ def render_sidebar():
         /* تنسيق حاوية اللوجو */
         .logo-container {{
             display: flex;
+            flex-direction: column;
+            align-items: center;
             justify-content: center;
-            margin-bottom: 10px;
-            padding: 15px 0;
+            margin: 0 auto;
+            padding: 20px 0 10px 0;
+            text-align: center;
+        }}
+        
+        /* تنسيق الشعار */
+        .logo-container img {{
+            border-radius: 50%;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            margin-bottom: 15px;
         }}
         
         /* تنسيق عنوان التطبيق */
@@ -51,10 +63,11 @@ def render_sidebar():
             text-align: center;
             color: {primary_color};
             font-weight: bold;
-            font-size: 1.2rem;
+            font-size: 1rem;
             margin-bottom: 15px;
             padding-bottom: 10px;
             border-bottom: 1px solid #e0e0e0;
+            width: 100%;
         }}
         
         /* تنسيق القوائم */
@@ -62,24 +75,35 @@ def render_sidebar():
             padding-right: 0 !important;
         }}
         
+        /* تنسيق حاوية القائمة */
+        div[data-testid="stVerticalBlock"] > div:has(.nav-link) {{
+            background-color: {sidebar_bg};
+            border-radius: 8px;
+            margin: 0 5px;
+            overflow: hidden;
+        }}
+        
         /* تنسيق عناصر القائمة */
         .nav-link {{
             text-align: right !important;
-            padding: 10px 15px !important;
-            margin: 5px 0 !important;
-            border-radius: 5px !important;
+            padding: 12px 15px !important;
+            margin: 2px 0 !important;
+            border-radius: 0 !important;
             transition: all 0.3s ease !important;
+            color: {primary_color} !important;
+            font-size: 14px !important;
         }}
         
         /* تنسيق الأيقونات */
         .nav-link i {{
             margin-left: 10px !important;
             margin-right: 0 !important;
+            font-size: 16px !important;
         }}
         
         /* تنسيق القائمة المحددة */
         .nav-link-selected {{
-            background-color: {secondary_color} !important;
+            background-color: {selected_bg} !important;
             color: white !important;
             font-weight: bold !important;
         }}
@@ -87,23 +111,24 @@ def render_sidebar():
         /* تنسيق معلومات المشروع */
         .project-info {{
             background-color: {sidebar_bg};
-            padding: 10px;
-            border-radius: 5px;
-            margin-top: 10px;
-            margin-bottom: 10px;
+            padding: 12px;
+            border-radius: 8px;
+            margin: 15px 5px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
         }}
         
         /* تنسيق معلومات المستخدم */
         .user-info {{
             background-color: {sidebar_bg};
-            padding: 10px;
-            border-radius: 5px;
-            margin-top: 10px;
+            padding: 12px;
+            border-radius: 8px;
+            margin: 15px 5px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
         }}
         
         /* تنسيق الفواصل */
         hr {{
-            margin: 15px 0;
+            margin: 15px 5px;
             border-color: #e0e0e0;
         }}
         
@@ -116,10 +141,23 @@ def render_sidebar():
             padding: 8px 0;
             border-radius: 5px;
             transition: all 0.3s ease;
+            font-weight: bold;
+            margin-top: 5px;
         }}
         
         .stButton button:hover {{
             background-color: {primary_color}dd;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }}
+        
+        /* تنسيق معلومات الإصدار */
+        .version-info {{
+            text-align: center;
+            font-size: 0.8rem;
+            color: #888;
+            padding: 10px 0;
+            margin-top: 20px;
         }}
     </style>
     """, unsafe_allow_html=True)
@@ -127,11 +165,9 @@ def render_sidebar():
     with st.sidebar:
         # إضافة اللوجو بتنسيق مخصص
         st.markdown('<div class="logo-container">', unsafe_allow_html=True)
-        st.image("static/images/logo.png", width=180)
-        st.markdown('</div>', unsafe_allow_html=True)
-        
-        # إضافة عنوان التطبيق
+        st.image("static/images/logo.png", width=150)
         st.markdown(f'<div class="app-title">{APP_TITLE.split("-")[0].strip()}</div>', unsafe_allow_html=True)
+        st.markdown('</div>', unsafe_allow_html=True)
         
         # إنشاء قائمة الخيارات باستخدام مكتبة streamlit_option_menu
         selected_module = option_menu(
@@ -161,14 +197,11 @@ def render_sidebar():
             styles={
                 "container": {"padding": "0px", "background-color": "transparent"},
                 "icon": {"color": primary_color, "font-size": "18px"},
-                "nav-link": {"font-size": "14px", "text-align": "right", "margin": "5px 0px", "padding": "10px 15px"},
-                "nav-link-selected": {"background-color": secondary_color, "color": "white", "font-weight": "bold"},
+                "nav-link": {"font-size": "14px", "text-align": "right", "margin": "0px", "padding": "12px 15px"},
+                "nav-link-selected": {"background-color": selected_bg, "color": "white", "font-weight": "bold"},
             }
         )
         
-        # إضافة فاصل
-        st.markdown("<hr>", unsafe_allow_html=True)
-        
         # إضافة معلومات المشروع الحالي
         if 'current_project' in st.session_state and st.session_state.current_project:
             project = st.session_state.current_project
@@ -189,7 +222,6 @@ def render_sidebar():
         if 'user_info' in st.session_state and st.session_state.user_info:
             user = st.session_state.user_info
             
-            st.markdown("<hr>", unsafe_allow_html=True)
             st.markdown('<div class="user-info">', unsafe_allow_html=True)
             st.markdown("### معلومات المستخدم")
             st.markdown(f"**{user['full_name']}**")
@@ -204,8 +236,9 @@ def render_sidebar():
         
         # إضافة معلومات النسخة
         st.markdown("<hr>", unsafe_allow_html=True)
+        st.markdown('<div class="version-info">', unsafe_allow_html=True)
         st.markdown(f"الإصدار: 1.0.0")
-        st.markdown(f"تاريخ الإصدار: 2025-03-15")
         st.markdown(f"© 2025 شركة شبه الجزيرة للمقاولات")
+        st.markdown('</div>', unsafe_allow_html=True)
     
     return selected_module