Hugging Face's logo

Spaces:
georad
/
sbsmapper
Running

App Files Community
georad commited on
Commit
97aea69
·
verified ·
1 Parent(s): 71977e3

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +75 -51
app.py CHANGED
@@ -1,60 +1,84 @@
1
  import streamlit as st
2
 
3
- # Set page config
4
- st.set_page_config(page_title="My App", layout="wide")
5
 
6
- # Minimal CSS that shouldn't interfere with status toolbar
7
- st.markdown("""
8
- <style>
9
- .fixed-nav {
10
- position: fixed;
11
- top: 0;
12
- left: 0;
13
- width: 100%;
14
- background-color: #f0f5f5;
15
- padding: 10px;
16
- z-index: 999;
17
- border-bottom: 1px solid #ddd;
18
- display: flex;
19
- justify-content: space-between;
20
- align-items: center;
21
- }
22
- .main-content {
23
- margin-top: 60px;
24
- }
25
- /* Don't hide status toolbar */
26
- [data-testid="stStatusWidget"] {
27
- visibility: visible !important;
28
- z-index: 1000;
29
- }
30
- </style>
31
-
32
- <div class="fixed-nav">
33
- <h2>App Navigation</h2>
34
- <div>
35
- <button onclick="window.location.href='#section1'">Section 1</button>
36
- <button onclick="window.location.href='#section2'">Section 2</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  </div>
38
- </div>
39
- <div class="main-content">
40
- </div>
41
- """, unsafe_allow_html=True)
42
-
43
- # Main app title and content
44
- st.title("My App with Navigation")
45
-
46
- # Add sample content
47
- st.header("Section 1", anchor="section1")
48
- st.write("This is section 1 content")
49
-
50
- for i in range(10):
51
- st.write(f"Content line {i}")
 
 
 
 
 
 
 
 
52
 
53
- st.header("Section 2", anchor="section2")
54
- st.write("This is section 2 content")
 
 
 
55
 
56
- for i in range(10):
57
- st.write(f"Content line {i}")
58
 
59
 
60
 
 
1
  import streamlit as st
2
 
3
+ # Set basic page config
4
+ st.set_page_config(page_title="App with Sticky Header", layout="wide")
5
 
6
+ # Create an HTML iframe component that contains both the header and content
7
+ iframe_html = """
8
+ <!DOCTYPE html>
9
+ <html>
10
+ <head>
11
+ <style>
12
+ body {
13
+ margin: 0;
14
+ padding: 0;
15
+ font-family: sans-serif;
16
+ }
17
+ .sticky-header {
18
+ position: sticky;
19
+ top: 0;
20
+ background-color: #262730;
21
+ color: white;
22
+ padding: 1rem;
23
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
24
+ z-index: 1000;
25
+ display: flex;
26
+ justify-content: space-between;
27
+ align-items: center;
28
+ }
29
+ .content {
30
+ padding: 1rem;
31
+ }
32
+ .nav-link {
33
+ color: white;
34
+ margin-left: 1rem;
35
+ text-decoration: none;
36
+ }
37
+ .nav-link:hover {
38
+ text-decoration: underline;
39
+ }
40
+ </style>
41
+ </head>
42
+ <body>
43
+ <div class="sticky-header">
44
+ <h2>My Application</h2>
45
+ <div>
46
+ <a href="#section1" class="nav-link">Section 1</a>
47
+ <a href="#section2" class="nav-link">Section 2</a>
48
+ <a href="#section3" class="nav-link">Section 3</a>
49
+ </div>
50
  </div>
51
+ <div class="content">
52
+ <h3 id="section1">Section 1</h3>
53
+ <p>This is the content for section 1.</p>
54
+ <!-- Generate some dummy content -->
55
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
56
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
57
+
58
+ <h3 id="section2">Section 2</h3>
59
+ <p>This is the content for section 2.</p>
60
+ <!-- Generate some dummy content -->
61
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
62
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
63
+
64
+ <h3 id="section3">Section 3</h3>
65
+ <p>This is the content for section 3.</p>
66
+ <!-- Generate some dummy content -->
67
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
68
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
69
+ </div>
70
+ </body>
71
+ </html>
72
+ """
73
 
74
+ # Use streamlit components to render the iframe
75
+ # Note: We're placing this in a container to give it proper dimensions
76
+ container = st.container()
77
+ with container:
78
+ st.components.v1.html(iframe_html, height=600, scrolling=True)
79
 
80
+ # You can still add Streamlit content below if needed
81
+ st.write("This content is outside the iframe")
82
 
83
 
84