add social icons to nav menu across both viewports

readme.md

@@ -32,6 +32,8 @@ Staging: https://stopwatch.commonknowledge.dev/
   python manage.py setup_pages --scratch True --ensure-site True --ensure-pages True
   ```
 
+If you're having issues getting started this way, see [Troubleshooting](#troubleshooting-setup) for some ideas.
+
 ### Hard mode: Using Dockerfiles
 
 Figure it out for yourself based on the .devcontainer dockerfile and write it up here ;)
@@ -47,3 +49,15 @@ They both run .bin in ./.bin to configure their environments and install depende
 - Base container configuration, which is run infrequently (installing apt packages, etc) should be configured in prepare.sh.
 - Frequently-run .bin (installing pip packages, etc) should go in install.sh. The difference between these is that changing prepare.sh triggers a full rebuild of the development container, whereas install.sh is only run after the container is built.
 - build.sh is the last thing run on deploy to production
+
+## Troubleshooting setup
+
+This is based on the experience of @freemvmt trying to set up the project on [Easy mode](#easy-mode-vscode-dev-container) for the first time in March 2026.
+
+1. The `Clone Repository in Container Volume` function, which pulls `main` from the remote and tries to build it in a local Docker container, didn't work for me, whereas `Open Folder in Container` (i.e. using my local copy of the repo) did.
+
+2. Once inside the container, `install.sh` was failing due to multiple copies of `virtualenv` being available. I fixed this by changing all references of `pipenv` to `python -m pipenv`, to ensure that we use the version associated with the python installation (merged in via #[86](https://github.com/commonknowledge/stopwatch/pull/86)).
+
+3. The 'import' option in Wagtail admin dashboard only appeared after populating the `stopwatch/settings/local.py` file. Even then, the import function proved error prone, so we instead used a psql dump from staging to produce a relevant dev environment (i.e. I ran something like `PGPASSWORD=postgres psql -h db -U postgres -d postgres < /workspace/stopwatch_staging.psql`).
+
+4. The dev site was not initially styled, despite the webpack server that runs as part of the 'App' config in `launch.json` - I ran `yarn webpack` manually to fix that.

stopwatch/templates/base.html

@@ -62,7 +62,7 @@
                     <div class="modal-body bg-darkgrey red-shadow">
                         <div class="input-group">
                             <div class="heading-small bg-white d-flex align-items-center justify-content-center p-3">
-                                <i class="bi-search"></i>
+                                <i class="bi bi-search"></i>
                             </div>
                             <input name="query" tabindex="1" autofocus class="p-2 ps-0 form-control nooutline heading-large text-naturalcase" autocapitalize="off" aria-label="Search">
                         </div>
@@ -77,7 +77,8 @@
         {% block header %}
         <div class="container container-outline microcopy pt-2 pt-md-3 d-flex flex-row align-items-center justify-content-between">
             {{settings.stopwatch.SiteSettings.tagline|richtext}}
-            <div class="d-none d-md-block">
+            <div class="d-none d-md-flex align-items-center gap-3">
+                {% include "stopwatch/includes/social_links.html" with link_class="text-muteddarkgrey" only %}
                 <a class="btn text-muteddarkgrey" href="/about-stopwatch">About</a>
                 <a href="{{settings.stopwatch.SiteSettings.donate_page.url}}" class="btn btn-primary">Donate</a>
             </div>
@@ -127,8 +128,13 @@
                 </svg>
               </button>
             </nav>
-            
+
             <div class="collapse bg-light d-md-none full-bleed" id="navbarToggleMenu">
+
+                <div class="d-flex justify-content-end gap-3 p-0 me-3 mb-3">
+                    {% include "stopwatch/includes/social_links.html" with link_class="text-dark" only %}
+                </div>
+
                 <ul class="nav nav-outline flex-column text-lg">
                     {% mainmenu %}
                         {% for item in menu.children %}
@@ -221,18 +227,7 @@
                     <div class="row mb-4 g-4">
                         <div class="col-8 col-md-4">
                             <div class="d-flex gap-3">
-                              <a href="https://www.instagram.com/stopwatch_uk/" target="_blank" rel="noopener noreferrer" class="text-white" aria-label="Instagram">
-                                <i class="bi-instagram fs-5"></i>
-                              </a>
-                              <a href="https://bsky.app/profile/stopwatchuk.bsky.social" target="_blank" rel="noopener noreferrer" class="text-white" aria-label="BlueSky">
-                                <i class="bi-bluesky fs-5"></i>
-                              </a>
-                              <a href="https://www.tiktok.com/@stopwatch_uk" target="_blank" rel="noopener noreferrer" class="text-white" aria-label="TikTok">
-                                <i class="bi-tiktok fs-5"></i>
-                              </a>
-                              <a href="https://www.linkedin.com/company/stopwatchuk/" target="_blank" rel="noopener noreferrer" class="text-white" aria-label="LinkedIn">
-                                  <i class="bi-linkedin fs-5"></i>
-                              </a>
+                                {% include "stopwatch/includes/social_links.html" with link_class="text-white" only %}
                             </div>
                         </div>
                     </div>

stopwatch/templates/stopwatch/includes/social_links.html

@@ -0,0 +1,12 @@
+<a href="https://www.instagram.com/stopwatch_uk/" target="_blank" rel="noopener noreferrer" class="{{ link_class|default:'text-dark' }}" aria-label="Instagram">
+    <i class="bi bi-instagram fs-5"></i>
+</a>
+<a href="https://bsky.app/profile/stopwatchuk.bsky.social" target="_blank" rel="noopener noreferrer" class="{{ link_class|default:'text-dark' }}" aria-label="Bluesky">
+    <i class="bi bi-bluesky fs-5"></i>
+</a>
+<a href="https://www.tiktok.com/@stopwatch_uk" target="_blank" rel="noopener noreferrer" class="{{ link_class|default:'text-dark' }}" aria-label="TikTok">
+    <i class="bi bi-tiktok fs-5"></i>
+</a>
+<a href="https://www.linkedin.com/company/stopwatchuk/" target="_blank" rel="noopener noreferrer" class="{{ link_class|default:'text-dark' }}" aria-label="LinkedIn">
+    <i class="bi bi-linkedin fs-5"></i>
+</a>