add navbar to about and user guide pages

pages/About.py

@@ -1,6 +1,13 @@
 import streamlit as st
 
 
+st.sidebar.markdown('''
+# Sections
+- [How it works](#how-it-works)
+- [Schematic overview of Domain2GO](#schematic-overview)
+''', unsafe_allow_html=True)
+
+
 st.markdown('''
 # Mutual Annotation-Based Prediction of Protein Domain Functions with Domain2GO 
 ''')
@@ -14,12 +21,15 @@ st.markdown(
 
 st.markdown('<p style="font-size:18px; font-weight:bold">Developers: Erva Ulusoy, Tunca Dogan</p>', unsafe_allow_html=True)
 
-st.markdown(
-    '<p style="font-size:25px; font-weight:bold">How it works</p>', unsafe_allow_html=True)
+
+st.header('How it works', anchor='how-it-works')
+
+# st.markdown(
+#     '<p style="font-size:25px; font-weight:bold">How it works</p>', unsafe_allow_html=True)
 
 st.markdown(
     """
-Domain2GO mappings are a set of association predictions between protein domains and Gene Ontology (GO) terms. This tool provides a user-friendly interface to predict protein functions by propagating Domain2GO mappings to query proteins that are annotated with those domains. This operation is shown in panel (F) of the figure below.
+Domain2GO mappings are a set of association predictions between protein domains and Gene Ontology (GO) terms. This tool provides a user-friendly interface to predict protein functions by propagating Domain2GO mappings to query proteins that are annotated with those domains. This operation is shown in [panel (F) of the figure below](#schematic-overview).
 
 Domain2GO is developed with the aim of identifying unknown protein functions by associating domains with Gene Ontology terms, thus defining the problem as domain function prediction. Domain2GO mappings are generated using the existing domain and GO annotation data. In order to obtain highly reliable associations, we employed statistical resampling and analyzed the co-occurrence patterns of domains and GO terms on the same proteins. 
 
@@ -33,6 +43,8 @@ Overall workflow of Domain2GO is shown below.
 
 """)
 
+
+st.header('Schematic overview of Domain2GO', anchor='schematic-overview')
 st.image('figures/full_methodology.png', width=700)
 
 st.markdown(

pages/User_Guide.py

@@ -1,13 +1,21 @@
 import streamlit as st
 
+st.sidebar.markdown('''
+# Sections
+- [How to use](#how-to-use)
+- [Troubleshooting](#troubleshooting)
+''', unsafe_allow_html=True)
+
 
 st.markdown('''
 # Domain2GO User Guide
 ''')
 
-# st.markdown('<p style="font-size:18px; font-weight:bold"></p>', unsafe_allow_html=True)
 
-st.markdown('<p style="font-size:25px; font-weight:bold">How to use</p>', unsafe_allow_html=True)
+# st.markdown('<p style="font-size:25px; font-weight:bold">How to use</p>', unsafe_allow_html=True)
+
+st.header('How to use', anchor='how-to-use')
+
 st.markdown('<p style="font-size:20px; font-weight:bold">1. Submit your protein sequence</p>', unsafe_allow_html=True)
 
 
@@ -65,8 +73,9 @@ st.markdown(
     You can download the results as a CSV file by clicking the "Download function predictions as CSV" button.
 ''')
 
-# write another section for the warning messages that can be displayed on the main page
-st.markdown('<p style="font-size:20px; font-weight:bold">4. Troubleshooting</p>', unsafe_allow_html=True)
+# st.markdown('<p style="font-size:20px; font-weight:bold">4. Troubleshooting</p>', unsafe_allow_html=True)
+st.header('Troubleshooting', anchor='troubleshooting')
+
 
 st.markdown(
     '''