File size: 3,788 Bytes
5b34d46
 
 
 
 
9ff08e9
5b34d46
 
 
 
 
 
 
 
9ff08e9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5b34d46
9ff08e9
 
 
 
 
 
 
 
 
5b34d46
9ff08e9
 
 
 
 
 
 
 
 
 
 
 
 
5b34d46
9ff08e9
 
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
import os
import streamlit as st

from app.backend.constant import LEADERBOARD_MAP
from app.backend.data_engine import DataEngine
from app.backend.data_page import render_page

# init global data engine
data_engine = DataEngine()
data_engine.jsons_to_df()
st.session_state["data_engine"] = data_engine

st.set_page_config(layout="wide")

# Add custom CSS
st.markdown("""
<style>
    /* Sidebar background color */
    section[data-testid="stSidebar"] {
        background-color: #f0f2f6;
    }
    
    /* Navigation button style */
    section[data-testid="stSidebar"] .stButton button {
        width: 100%;
        padding: 0.75rem 1rem;
        background-color: transparent;
        border: none;
        text-align: left;
        color: rgb(49, 51, 63);
        font-size: 0.9rem;
        font-weight: 400;
        line-height: 1.6;
        margin: 0.1rem 0;
    }
    
    .st-emotion-cache-64tehz {

         gap: 0rem; 
    }
    
    .st-emotion-cache-qsto9u {

        justify-content: left;
    
    }
    
    [data-testid="stVerticalBlock"] .stVerticalBlock {
        text-indent: 2rem;
    } 

    /* Navigation button hover effect */
    section[data-testid="stSidebar"] .stButton button:hover {
        background-color: rgba(151, 166, 195, 0.15);
    }
    
    /* Selected state */
    section[data-testid="stSidebar"] .stButton button.selected,
    section[data-testid="stSidebar"] .stButton button:active,
    section[data-testid="stSidebar"] .stButton button:focus {
        background-color: #fff;
        border: none;
        box-shadow: none;
    }
    
    /* Page title style */
    h1 {
        font-size: 3rem !important;
        font-weight: 600 !important;
        color: rgb(49, 51, 63) !important;
        margin-bottom: 1rem !important;
    }
    
    /* Divider style */
    hr {
        margin: 0.5rem 0;
        border-color: rgba(49, 51, 63, 0.1);
    }
    
    /* Subpage indentation */
    .child-page {
        padding-left: 1rem;
    }
</style>
""", unsafe_allow_html=True)

# Implement navigation using sidebar
with st.sidebar:
    # Initialize session state
    if "selected_page" not in st.session_state:
        st.session_state.selected_page = "text"

    # Text Leaderboard as clickable button
    selected_class = "selected" if st.session_state.selected_page == "text" else ""
    if st.button("📚 Text Leaderboard", key="text",
                 use_container_width=True,
                 ):
        st.session_state.selected_page = "text"
        st.rerun()

    # Subpage list
    pages = [
        ("law", "⚖️ Law"),
        ("multilingual", "🌎 Multilingual"),
        ("german", "🇩🇪 German"),
        ("code", "💻 Code"),
        ("tech", "🛠️ Tech")
    ]

    # Use container for indentation
    with st.container():
        st.markdown('<div class="child-page">', unsafe_allow_html=True)
        for page_id, page_title in pages:
            selected_class = "selected" if st.session_state.selected_page == page_id else ""
            if st.button(page_title, key=page_id, use_container_width=True):
                st.session_state.selected_page = page_id
                # st.rerun()
        st.markdown('</div>', unsafe_allow_html=True)

# Add page title
if st.session_state.selected_page == "text":
    st.title("📚 Text Leaderboard")
elif st.session_state.selected_page == "law":
    st.title("⚖️ Law")
elif st.session_state.selected_page == "multilingual":
    st.title("🌎 Multilingual")
elif st.session_state.selected_page == "german":
    st.title("🇩🇪 German")
elif st.session_state.selected_page == "code":
    st.title("💻 Code")
elif st.session_state.selected_page == "tech":
    st.title("🛠️ Tech")

# Render current selected page
render_page(st.session_state.selected_page)