Update app.py

app.py

@@ -1,4 +1,5 @@
 import streamlit as st
+import streamlit.components.v1 as components
 
 # Define subjects and file paths
 subjects = {
@@ -9,13 +10,49 @@ subjects = {
     "C++": "cplusplus.md"
 }
 
-# Display the navbar at the top
-st.title("Course Syllabus")
-subject = st.radio("Select a subject:", list(subjects.keys()), horizontal=True)
+# Create custom HTML for navbar
+nav_html = """
+    <style>
+    .navbar {
+        overflow: hidden;
+        background-color: #333;
+        position: fixed;
+        top: 0;
+        width: 100%;
+        z-index: 100;
+        display: flex;
+        justify-content: space-around;
+    }
+    .navbar a {
+        float: left;
+        display: block;
+        color: #f2f2f2;
+        text-align: center;
+        padding: 14px 16px;
+        text-decoration: none;
+        font-size: 17px;
+    }
+    .navbar a:hover {
+        background-color: #ddd;
+        color: black;
+    }
+    </style>
+    <div class="navbar">
+"""
+for subject in subjects.keys():
+    nav_html += f'<a href="/?nav={subject}">{subject}</a>'
+nav_html += "</div><br><br><br>"
 
-# Load and display content based on selection
-with open(subjects[subject], "r") as file:
-    syllabus_content = file.read()
+# Display the navbar
+st.markdown(nav_html, unsafe_allow_html=True)
 
-# Render the content
-st.markdown(syllabus_content, unsafe_allow_html=True)
+# Get selected subject from query params
+subject = st.experimental_get_query_params().get("nav", ["Architecture"])[0]
+
+# Load and display content
+if subject in subjects:
+    with open(subjects[subject], "r") as file:
+        syllabus_content = file.read()
+    st.markdown(syllabus_content, unsafe_allow_html=True)
+else:
+    st.write("Select a subject from the navbar.")