Update app.py

app.py

@@ -1,56 +1,146 @@
 import streamlit as st
-import streamlit.components.v1 as components
 
-# Set page config for dark theme
-st.set_page_config(layout="wide", page_title="Web UI", page_icon=":ghost:", initial_sidebar_state="expanded")
+# CSS styles
+css = """
+body {
+    background-color: #000000;
+    color: #FFFFFF;
+}
+.main {
+    background-color: #000000;
+}
+.main .block-container {
+    padding: 0rem;
+    background-color: #000000;
+}
+.sidebar .sidebar-content {
+    background-color: #D9D9D9 !important;
+    padding: 1rem;
+}
+header, #MainMenu, footer {visibility: hidden;}
+.category-button {
+    background-color: #D9D9D9;
+    color: #333333;
+    border: none;
+    text-align: left;
+    font-size: 1.1rem;
+    font-weight: bold;
+    padding: 10px;
+    width: 100%;
+    margin-bottom: 5px;
+    transition: background-color 0.3s;
+}
+.category-button:hover {
+    background-color: #C0C0C0;
+}
+.category-button:focus {
+    outline: none;
+}
+.selected-category {
+    background-color: #C0C0C0 !important;
+    color: #000000 !important;
+}
+.submenu-button {
+    background-color: #E6E6E6;
+    color: #333333;
+    border: none;
+    text-align: left;
+    font-size: 1rem;
+    padding: 6px 20px;
+    width: 100%;
+    margin-bottom: 3px;
+    transition: background-color 0.3s;
+}
+.submenu-button:hover {
+    background-color: #D0D0D0;
+}
+.submenu-button:focus {
+    outline: none;
+}
+.selected-submenu {
+    background-color: #C0C0C0 !important;
+    color: #000000 !important;
+    font-weight: bold;
+}
+"""
 
-# Apply dark theme and maximize iframe
-st.markdown("""
-<style>
-    #root > div:nth-child(1) > div > div > div > div > section > div {padding-top: 0rem;}
-    .reportview-container {background-color: #000000;}
-    .sidebar .sidebar-content {background-color: #262730;}
-    .Widget>label {color: white;}
-    .stRadio>div{color: white;}
-    .stCheckbox>div{color: white;}
-    .stSelectbox>div{color: white;}
-    .main .block-container {background-color: #000000; padding: 0rem;}
-    iframe {width: 100vw; height: 100vh; border: none;}
-    header {visibility: hidden;}
-    #MainMenu {visibility: hidden;}
-    footer {visibility: hidden;}
-</style>
-""", unsafe_allow_html=True)
+# Set page config
+st.set_page_config(
+    layout="wide",
+    page_title="Web UI",
+    page_icon=":ghost:",
+    initial_sidebar_state="expanded"
+)
+
+# Apply CSS
+st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
+
+# Menu structure (can be easily extended for multi-language support)
+menu_structure = {
+    "A 카테고리": ["a", "b"],
+    "B 카테고리": ["c", "d"]
+}
+
+# Initialize session state
+if 'expanded_category' not in st.session_state:
+    st.session_state.expanded_category = None
+if 'selected_item' not in st.session_state:
+    st.session_state.selected_item = None
+
+# Functions
+def toggle_category(category):
+    if st.session_state.expanded_category == category:
+        st.session_state.expanded_category = None
+    else:
+        st.session_state.expanded_category = category
+
+def select_item(item):
+    st.session_state.selected_item = item
 
 # Sidebar menu
 st.sidebar.title("메뉴")
-menu = st.sidebar.radio("선택하세요:", ("A", "B"))
+
+for category, items in menu_structure.items():
+    is_expanded = st.session_state.expanded_category == category
+    category_label = f"{'▼' if is_expanded else '▶'} {category}"
+    if st.sidebar.button(category_label, key=f"category_{category}", on_click=toggle_category, args=(category,)):
+        pass
+    
+    if is_expanded:
+        for item in items:
+            is_selected = st.session_state.selected_item == item
+            if st.sidebar.button(item, key=f"submenu_{item}", on_click=select_item, args=(item,)):
+                pass
 
 # Main content
-if menu == "A":
-    components.iframe("https://seawolf2357-flxloraexp.hf.space", height=1000, scrolling=True)
-elif menu == "B":
-    try:
-        components.iframe("http://hugpu.ai:7897", height=1000, scrolling=True)
-    except Exception as e:
-        st.error(f"B 메뉴 로딩 중 오류 발생: {str(e)}")
-        st.info("http://hugpu.ai:8000 에 접근할 수 없습니다. URL이 올바른지, 그리고 공개적으로 접근 가능한지 확인해 주세요.")
-
-# Make the layout responsive and ensure iframes are loaded correctly
+main_content = st.empty()
+
+# Content mapping
+content_map = {
+    "a": "https://seawolf2357-flxloraexp.hf.space",
+    "b": "https://seawolf2357-timer2.hf.space",
+    "c": "https://seawolf2357-timer3.hf.space",
+    "d": "https://seawolf2357-timer4.hf.space"
+}
+
+if st.session_state.selected_item in content_map:
+    main_content.markdown(
+        f'<iframe src="{content_map[st.session_state.selected_item]}" width="100%" height="800" frameborder="0"></iframe>',
+        unsafe_allow_html=True
+    )
+else:
+    main_content.markdown("<h2>메뉴에서 항목을 선택하세요.</h2>")
+
+# Add JavaScript for dynamic iframe resizing
 st.markdown("""
 <script>
-    window.addEventListener('load', function() {
-        var iframes = document.getElementsByTagName('iframe');
-        for (var i = 0; i < iframes.length; i++) {
-            iframes[i].style.height = window.innerHeight + 'px';
-            iframes[i].style.width = '100%';
-        }
-    });
-    window.addEventListener('resize', function() {
-        var iframes = document.getElementsByTagName('iframe');
-        for (var i = 0; i < iframes.length; i++) {
-            iframes[i].style.height = window.innerHeight + 'px';
-        }
-    });
+function resizeIframe() {
+    var iframe = document.querySelector('iframe');
+    if (iframe) {
+        iframe.style.height = window.innerHeight + 'px';
+    }
+}
+window.addEventListener('resize', resizeIframe);
+resizeIframe();
 </script>
 """, unsafe_allow_html=True)