Update app.py

app.py

@@ -17,58 +17,86 @@ st.set_page_config(
     page_title="📱 Detektor Fałszywych Wiadomości SMS",
     page_icon="📱",
     layout="wide",
-    initial_sidebar_state="collapsed"  # Opcjonalnie, jeśli chcesz domyślnie ukryć sidebar
+    initial_sidebar_state="collapsed"  # Ukrycie sidebar domyślnie
 )
 
 # 2. Inicjalizacja pliku statystyk
 init_stats_file()
 
-# 3. Dodanie niestandardowego CSS do wzmocnienia stylów menu
+# 3. Dodanie niestandardowego CSS
 custom_css = """
 <style>
+    /* Ukryj boczne menu Streamlit */
+    [data-testid="stSidebar"] {
+        display: none;
+    }
+
+    /* Stylizacja poziomego menu */
+    .streamlit-option-menu {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--st-secondary-background-color);
+        padding: 10px 0;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+
     /* Podświetlenie wybranej zakładki */
-    .streamlit-option-menu .selected {
+    .option-menu-item.selected {
         background-color: #02ab21 !important;  /* Zielone tło dla wybranej zakładki */
         color: #ffffff !important;             /* Biały tekst dla wybranej zakładki */
     }
 
     /* Efekt hover dla elementów menu */
-    .streamlit-option-menu .menu-item:hover {
+    .option-menu-item:hover {
         background-color: #02ab21 !important;  /* Zielone tło podczas hover */
         color: #ffffff !important;             /* Biały tekst podczas hover */
     }
 
     /* Zmiana koloru ikon w menu */
-    .streamlit-option-menu .menu-item .icon {
+    .option-menu-item .icon {
         color: inherit !important;
     }
+
+    /* Responsywność */
+    @media (max-width: 768px) {
+        .streamlit-option-menu {
+            flex-direction: column;
+        }
+        .option-menu-item {
+            margin: 5px 0;
+            width: 100%;
+            text-align: center;
+        }
+    }
 </style>
 """
 st.markdown(custom_css, unsafe_allow_html=True)
 
-# 4. Tworzenie poziomego menu z dostosowanymi stylami
-selected = option_menu(
-    menu_title=None,  # Brak tytułu menu
-    options=["Analiza SMS", "O Projekcie", "Edukacja", "Statystyki", "Kontakt"],
-    icons=["shield-check", "info-circle", "book", "bar-chart", "envelope"],
-    menu_icon=None,  # Usunięcie ikony menu
-    default_index=0,
-    orientation="horizontal",
-    styles={
-        "container": {"padding": "0!important", "background-color": "transparent"},
-        "icon": {"color": "inherit", "font-size": "18px"},
-        "nav-link": {
-            "font-size": "16px",
-            "text-align": "center",
-            "margin": "0px",
-            "--hover-color": "transparent"  # Hover kontrolowany przez niestandardowy CSS
-        },
-        "nav-link-selected": {
-            "background-color": "transparent",  # Tło kontrolowane przez niestandardowy CSS
-            "color": "inherit"
-        },
-    }
-)
+# 4. Tworzenie poziomego menu w kontenerze
+with st.container():
+    selected = option_menu(
+        menu_title=None,  # Brak tytułu menu
+        options=["Analiza SMS", "O Projekcie", "Edukacja", "Statystyki", "Kontakt"],
+        icons=["shield-check", "info-circle", "book", "bar-chart", "envelope"],
+        menu_icon=None,  # Usunięcie ikony menu
+        default_index=0,
+        orientation="horizontal",
+        styles={
+            "container": {"padding": "0!important", "background-color": "transparent"},
+            "icon": {"color": "inherit", "font-size": "18px"},
+            "nav-link": {
+                "font-size": "16px",
+                "text-align": "center",
+                "margin": "0px",
+                "--hover-color": "transparent"  # Hover kontrolowany przez niestandardowy CSS
+            },
+            "nav-link-selected": {
+                "background-color": "transparent",  # Tło kontrolowane przez niestandardowy CSS
+                "color": "inherit"
+            },
+        }
+    )
 
 # 5. Importowanie i wywoływanie modułów dla każdej zakładki
 if selected == "Analiza SMS":
@@ -85,4 +113,4 @@ elif selected == "Statystyki":
     show_statistics()
 elif selected == "Kontakt":
     from pages.Contact import main as show_contact
-    show_contact()
+    show_contact()