Update utils/components/improved_sidebar.py

utils/components/improved_sidebar.py

@@ -1,5 +1,5 @@
 """
-مكون الشريط الجانبي المحسن - مع وضع الأيقونات على اليمين وتحسين المظهر الاحترافي
+مكون الشريط الجانبي المحسن
 """
 
 import streamlit as st
@@ -22,20 +22,12 @@ def render_sidebar():
         bg_color = "#1e1e1e"
         text_color = "#ffffff"
         sidebar_bg = "#2d2d2d"
-        selected_bg = "#ff9a3c"
-        menu_bg = "#252525"
-        button_bg = "#3498db"
-        button_hover = "#2980b9"
     else:
         primary_color = "#2c3e50"
         secondary_color = "#ff9a3c"
         bg_color = "#f8f9fa"
         text_color = "#333333"
         sidebar_bg = "#f0f2f6"
-        selected_bg = "#ff9a3c"
-        menu_bg = "#ffffff"
-        button_bg = "#2c3e50"
-        button_hover = "#34495e"
     
     # تطبيق CSS مخصص لتحسين مظهر الشريط الجانبي
     st.markdown(f"""
@@ -49,21 +41,9 @@ def render_sidebar():
         /* تنسيق حاوية اللوجو */
         .logo-container {{
             display: flex;
-            flex-direction: column;
-            align-items: center;
             justify-content: center;
-            margin: 0 auto;
-            padding: 20px 0 15px 0;
-            text-align: center;
-            width: 100%;
-        }}
-        
-        /* تنسيق الشعار */
-        .logo-container img {{
-            border-radius: 50%;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
-            margin-bottom: 15px;
-            border: 3px solid {secondary_color};
+            margin-bottom: 10px;
+            padding: 15px 0;
         }}
         
         /* تنسيق عنوان التطبيق */
@@ -71,11 +51,10 @@ def render_sidebar():
             text-align: center;
             color: {primary_color};
             font-weight: bold;
-            font-size: 1rem;
-            margin-bottom: 20px;
-            padding-bottom: 15px;
+            font-size: 1.2rem;
+            margin-bottom: 15px;
+            padding-bottom: 10px;
             border-bottom: 1px solid #e0e0e0;
-            width: 90%;
         }}
         
         /* تنسيق القوائم */
@@ -83,117 +62,64 @@ def render_sidebar():
             padding-right: 0 !important;
         }}
         
-        /* تنسيق حاوية القائمة */
-        div[data-testid="stVerticalBlock"] > div:has(.nav-link) {{
-            background-color: {menu_bg};
-            border-radius: 10px;
-            margin: 0 5px 15px 5px;
-            overflow: hidden;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-        }}
-        
         /* تنسيق عناصر القائمة */
         .nav-link {{
             text-align: right !important;
-            padding: 12px 15px !important;
-            margin: 2px 0 !important;
-            border-radius: 0 !important;
+            padding: 10px 15px !important;
+            margin: 5px 0 !important;
+            border-radius: 5px !important;
             transition: all 0.3s ease !important;
-            color: {primary_color} !important;
-            font-size: 14px !important;
-            display: flex !important;
-            flex-direction: row-reverse !important;
-            align-items: center !important;
-            justify-content: flex-start !important;
         }}
         
         /* تنسيق الأيقونات */
         .nav-link i {{
-            margin-left: 12px !important;
+            margin-left: 10px !important;
             margin-right: 0 !important;
-            font-size: 18px !important;
-            color: {secondary_color} !important;
         }}
         
         /* تنسيق القائمة المحددة */
         .nav-link-selected {{
-            background-color: {selected_bg} !important;
+            background-color: {secondary_color} !important;
             color: white !important;
             font-weight: bold !important;
         }}
         
-        /* تنسيق أيقونات القائمة المحددة */
-        .nav-link-selected i {{
-            color: white !important;
-        }}
-        
-        /* تأثير التحويم على عناصر القائمة */
-        .nav-link:not(.nav-link-selected):hover {{
-            background-color: {sidebar_bg} !important;
-            transform: translateX(-3px);
-        }}
-        
         /* تنسيق معلومات المشروع */
         .project-info {{
-            background-color: {menu_bg};
-            padding: 15px;
-            border-radius: 10px;
-            margin: 15px 5px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            background-color: {sidebar_bg};
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 10px;
+            margin-bottom: 10px;
         }}
         
         /* تنسيق معلومات المستخدم */
         .user-info {{
-            background-color: {menu_bg};
-            padding: 15px;
-            border-radius: 10px;
-            margin: 15px 5px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-        }}
-        
-        /* تنسيق عناوين المعلومات */
-        .info-title {{
-            color: {secondary_color};
-            font-weight: bold;
-            font-size: 1.1rem;
-            margin-bottom: 10px;
-            padding-bottom: 5px;
-            border-bottom: 1px solid #e0e0e0;
+            background-color: {sidebar_bg};
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 10px;
         }}
         
         /* تنسيق الفواصل */
         hr {{
-            margin: 15px 5px;
+            margin: 15px 0;
             border-color: #e0e0e0;
         }}
         
         /* تنسيق الأزرار */
         .stButton button {{
             width: 100%;
-            background-color: {button_bg};
+            background-color: {primary_color};
             color: white;
             border: none;
-            padding: 10px 0;
-            border-radius: 8px;
+            padding: 8px 0;
+            border-radius: 5px;
             transition: all 0.3s ease;
-            font-weight: bold;
-            margin-top: 8px;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }}
         
         .stButton button:hover {{
-            background-color: {button_hover};
-            transform: translateY(-2px);
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
-        }}
-        
-        /* تنسيق معلومات الإصدار */
-        .version-info {{
-            text-align: center;
-            font-size: 0.8rem;
-            color: #888;
-            padding: 10px 0;
-            margin-top: 20px;
+            background-color: {primary_color}dd;
         }}
     </style>
     """, unsafe_allow_html=True)
@@ -201,12 +127,12 @@ def render_sidebar():
     with st.sidebar:
         # إضافة اللوجو بتنسيق مخصص
         st.markdown('<div class="logo-container">', unsafe_allow_html=True)
-        # ضبط حجم الشعار ليتناسب مع حجم القائمة
-        logo_width = 140  # حجم متناسب مع عرض القائمة
-        st.image("static/images/logo.png", width=logo_width)
-        st.markdown(f'<div class="app-title">{APP_TITLE.split("-")[0].strip()}</div>', unsafe_allow_html=True)
+        st.image("static/images/logo.png", width=180)
         st.markdown('</div>', unsafe_allow_html=True)
         
+        # إضافة عنوان التطبيق
+        st.markdown(f'<div class="app-title">{APP_TITLE.split("-")[0].strip()}</div>', unsafe_allow_html=True)
+        
         # إنشاء قائمة الخيارات باستخدام مكتبة streamlit_option_menu
         selected_module = option_menu(
             "",  # إزالة العنوان لأننا أضفناه بشكل منفصل أعلاه
@@ -234,36 +160,38 @@ def render_sidebar():
             default_index=0,
             styles={
                 "container": {"padding": "0px", "background-color": "transparent"},
-                "icon": {"color": secondary_color, "font-size": "18px"},
-                "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"},
+                "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"},
             }
         )
         
-        # إضافة معلومات المشروع الحالي
+        # إضافة فاصل
+        st.markdown("<hr>", unsafe_allow_html=True)
         
-if 'current_project' in st.session_state and st.session_state.current_project:
-    project_id = st.session_state.current_project
-    project = next((p for p in st.session_state.projects if p['id'] == project_id), None)
-
-    if project:
-        st.markdown('<div class="project-info">', unsafe_allow_html=True)
-        st.markdown('<div class="info-title">المشروع الحالي</div>', unsafe_allow_html=True)
-        st.markdown(f"**{project['name']}**")
-        st.markdown(f"رقم المناقصة: {project.get('number', 'غير متوفر')}")
-        st.markdown(f"الجهة المالكة: {project['client']}")
-        st.markdown('</div>', unsafe_allow_html=True)
-
-        pass
-    else:
-        st.warning("لم يتم العثور على تفاصيل المشروع الحالي.")
+        # إضافة معلومات المشروع الحالي
+        if 'current_project' in st.session_state and st.session_state.current_project:
+            project = st.session_state.current_project
+            
+            st.markdown('<div class="project-info">', unsafe_allow_html=True)
+            st.markdown("### المشروع الحالي")
+            st.markdown(f"**{project['name']}**")
+            st.markdown(f"رقم المناقصة: {project['number']}")
+            st.markdown(f"الجهة المالكة: {project['client']}")
+            st.markdown('</div>', unsafe_allow_html=True)
+            
+            # إضافة زر للتبديل بين المشاريع
+            if st.button("تبديل المشروع"):
+                # لتنفيذ في مرحلة لاحقة
+                pass
         
         # إضافة معلومات المستخدم
         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('<div class="info-title">معلومات المستخدم</div>', unsafe_allow_html=True)
+            st.markdown("### معلومات المستخدم")
             st.markdown(f"**{user['full_name']}**")
             st.markdown(f"الدور: {user['role']}")
             st.markdown('</div>', unsafe_allow_html=True)
@@ -276,9 +204,8 @@ if 'current_project' in st.session_state and st.session_state.current_project:
         
         # إضافة معلومات النسخة
         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
+    return selected_module