Hugging Face's logo

Spaces:
aiqtech
/
ofai-stream-menu-backup
Sleeping

App Files Community
ofai-stream-menu-backup
File size: 3,666 Bytes 
3d67fe2
 
c04dd6c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3d67fe2
c04dd6c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3d67fe2
 
 
c04dd6c
 
 
 
 
 
 
 
 
 
 
 
3d67fe2
 
c04dd6c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
72e5351
 
c04dd6c
 
 
 
 
 
 
 
72e5351
3d67fe2
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
 
import streamlit as st

# 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;
}
"""

# 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("메뉴")

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
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>
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)