Layout

src/components/app-layout.tsx

@@ -79,7 +79,7 @@ const AppNavigation = () => {
             flexDirection: "column",
             gap: 4,
           }}
-          display="flex"
+          display="none"
         >
           <Typography
             component="h1"
@@ -108,9 +108,6 @@ const AppNavigation = () => {
       <MenuContainer
         sx={{
           px: 3,
-          borderTopWidth: 1,
-          borderTopStyle: "solid",
-          borderTopColor: "monochrome.300",
         }}
       >
         <MenuButton
@@ -128,11 +125,7 @@ const AppNavigation = () => {
         />
         <MenuButton
           title={t({ id: "home.menu.map-view", message: "Map view" })}
-          active={
-            asPath === "/map" ||
-            asPath.includes("municipality") ||
-            asPath.includes("canton")
-          }
+          active={asPath === "/map"}
           href={"/map"}
           //FIXME: alter MenuButton for searchbar spacing
           sx={{
@@ -143,6 +136,24 @@ const AppNavigation = () => {
             },
           }}
         />
+        {asPath.includes("canton") ||
+        asPath.includes("municipality") ||
+        asPath.includes("operator") ? (
+          <MenuButton
+            title={t({ id: "home.menu.details", message: "Details" })}
+            active={true}
+            href={"/map"}
+            //FIXME: alter MenuButton for searchbar spacing
+            sx={{
+              ".MuiButtonBase-root": {
+                py: {
+                  md: 6,
+                },
+              },
+            }}
+          />
+        ) : null}
+
         <Box sx={{ flex: 1 }} />
         <Search />
       </MenuContainer>

src/components/detail-page/banner.tsx

@@ -5,7 +5,6 @@ import { useRouter } from "next/router";
 import { Fragment, useState } from "react";
 
 import { SafeHydration } from "src/components/hydration";
-import { MapLink } from "src/components/links";
 import { Entity } from "src/domain/data";
 import { Icon } from "src/icons";
 import { useIsMobile } from "src/lib/use-mobile";
@@ -89,13 +88,13 @@ export const DetailPageBanner = ({
   return (
     <Box
       sx={{
-        py: 5,
-        bgcolor: "background.paper",
+        pt: 5,
+        pb: 0,
         width: "100%",
       }}
       id="main-content"
     >
-      <Box
+      {/* <Box
         display="grid"
         sx={{
           mb: { md: 6 },
@@ -129,7 +128,7 @@ export const DetailPageBanner = ({
             <Trans id="detail.maplink">Back to map view</Trans>
           </UILink>
         </Box>
-      </Box>
+      </Box> */}
 
       <Box sx={{ mx: "auto", my: 2 }}>
         <Typography

src/components/detail-page/layout.tsx

@@ -116,7 +116,7 @@ export const DetailsPageHeader = ({ children }: DetailsPageBaseProps) => {
 
 export const DetailsPageTitle = ({ children }: DetailsPageBaseProps) => {
   return (
-    <Typography variant="h1" component={"h2"}>
+    <Typography variant="h2" component={"h2"}>
       {children}
     </Typography>
   );
@@ -154,21 +154,13 @@ export const DetailsPageLayout = ({
         <title>{title}</title>
       </Head>
       <ApplicationLayout>
-        <Box
-          sx={{
-            borderBottomWidth: "1px",
-            borderBottomStyle: "solid",
-            borderBottomColor: "monochrome.300",
-          }}
-        >
+        <Box>
           <ContentWrapper
             sx={{
               flexGrow: 1,
               backgroundColor: "background.paper",
             }}
-          >
-            {BannerContent}
-          </ContentWrapper>
+          ></ContentWrapper>
         </Box>
         <Box
           sx={{
@@ -190,6 +182,7 @@ export const DetailsPageLayout = ({
                 download={download}
                 selector={!isMobile && SidebarContent ? SidebarContent : null}
               >
+                {BannerContent}
                 {MainContent}
               </DetailPageContentLayout>
             </Box>

src/components/detail-page/price-distribution-histogram.tsx

@@ -117,7 +117,7 @@ export const PriceDistributionHistograms = ({ id, entity }: SectionProps) => {
       >
         <CardTitle>
           <Trans id="detail.card.title.prices.distribution">
-            Prize distribution in Switzerland
+            Price distribution in Switzerland
           </Trans>
         </CardTitle>
         <CardDescription>

src/components/detail-page/sidebar.tsx

@@ -32,6 +32,30 @@ export const DetailsPageSidebar = (props: SectionProps) => {
           Electricity tariffs
         </Trans>
       </SidebarItem>
+      <SidebarItem href={`/${entity}/${id}#components`}>
+        <Trans id="details.page.navigation.price-components-item">
+          Price components
+        </Trans>
+      </SidebarItem>
+      <SidebarItem href={`/${entity}/${id}#evolution`}>
+        <Trans id="details.page.navigation.tariff-development-item">
+          Tariff development
+        </Trans>
+      </SidebarItem>
+      <SidebarItem
+        href={`/${entity}/${id}#distribution
+#main-content`}
+      >
+        <Trans id="details.page.navigation.price-distribution-item">
+          Price distribution in Switzerland
+        </Trans>
+      </SidebarItem>
+      <SidebarItem href={`/${entity}/${id}#comparison`}>
+        <Trans id="details.page.navigation.canton-comparison-item">
+          Canton comparison
+        </Trans>
+      </SidebarItem>
+
       {/* FIXME: Make this only a preview and add a coming soon label */}
       {sunshineFlag && entity === "operator" ? (
         <SafeHydration>

src/components/header.tsx

@@ -145,7 +145,7 @@ export const Header = ({
         <SwissFederalCiHeader
           longTitle={t({
             id: "header.long-title",
-            message: "Federal Electricity Commission ElCom",
+            message: "Electricity tariffs in Switzerland",
           })}
           shortTitle="ElCom"
           rootHref="/"

src/components/operator-documents.tsx

@@ -233,6 +233,7 @@ export const OperatorDocuments = ({ id }: { id: string }) => {
         startIcon={<Icon name="download" size={20} />}
         onClick={handleOpen}
         color="tertiary"
+        sx={{ flexShrink: 0 }}
       >
         <Typography
           variant="body2"

src/locales/aa/messages.po

@@ -101,10 +101,6 @@ msgstr "detail.card.title.prices.distribution"
 msgid "detail.card.title.prices.evolution"
 msgstr "detail.card.title.prices.evolution"
 
-#: src/components/detail-page/banner.tsx
-msgid "detail.maplink"
-msgstr "detail.maplink"
-
 #: src/components/detail-page/banner.tsx
 msgid "detail.municipalities"
 msgstr "detail.municipalities"
@@ -121,6 +117,10 @@ msgstr "detail.operator"
 msgid "detail.operators"
 msgstr "detail.operators"
 
+#: src/components/detail-page/sidebar.tsx
+msgid "details.page.navigation.canton-comparison-item"
+msgstr "details.page.navigation.canton-comparison-item"
+
 #: src/components/detail-page/sidebar.tsx
 msgid "details.page.navigation.costs-and-tariffs-item"
 msgstr "details.page.navigation.costs-and-tariffs-item"
@@ -141,6 +141,14 @@ msgstr "details.page.navigation.operational-standards-item"
 msgid "details.page.navigation.power-stability-item"
 msgstr "details.page.navigation.power-stability-item"
 
+#: src/components/detail-page/sidebar.tsx
+msgid "details.page.navigation.price-components-item"
+msgstr "details.page.navigation.price-components-item"
+
+#: src/components/detail-page/sidebar.tsx
+msgid "details.page.navigation.price-distribution-item"
+msgstr "details.page.navigation.price-distribution-item"
+
 #: src/components/detail-page/sidebar.tsx
 msgid "details.page.navigation.sunshine-indicators-title"
 msgstr "details.page.navigation.sunshine-indicators-title"
@@ -149,6 +157,10 @@ msgstr "details.page.navigation.sunshine-indicators-title"
 msgid "details.page.navigation.sunshine-overview-item"
 msgstr "details.page.navigation.sunshine-overview-item"
 
+#: src/components/detail-page/sidebar.tsx
+msgid "details.page.navigation.tariff-development-item"
+msgstr "details.page.navigation.tariff-development-item"
+
 #: src/components/info-dialog.tsx
 msgid "dialog.close"
 msgstr "dialog.close"
@@ -381,6 +393,10 @@ msgstr "home.hero-section.primary-cta"
 msgid "home.hero-section.title"
 msgstr "home.hero-section.title"
 
+#: src/components/app-layout.tsx
+msgid "home.menu.details"
+msgstr "home.menu.details"
+
 #: src/components/app-layout.tsx
 msgid "home.menu.map-view"
 msgstr "home.menu.map-view"
@@ -1179,9 +1195,9 @@ msgstr "sunshine.costs-and-tariffs.energy-tariffs"
 msgid "sunshine.costs-and-tariffs.energy-tariffs-comparison-title"
 msgstr "sunshine.costs-and-tariffs.energy-tariffs-comparison-title"
 
+#: src/components/info-dialog-props.ts
 #: src/components/map-details-chart-adapters.tsx
 #: src/pages/sunshine/[entity]/[id]/costs-and-tariffs.tsx
-#: src/pages/sunshine/[entity]/[id]/costs-and-tariffs.tsx
 msgid "sunshine.costs-and-tariffs.energy-tariffs-trend"
 msgstr "sunshine.costs-and-tariffs.energy-tariffs-trend"
 
@@ -1218,19 +1234,19 @@ msgstr "sunshine.costs-and-tariffs.net-tariffs"
 msgid "sunshine.costs-and-tariffs.net-tariffs-comparison-title"
 msgstr "sunshine.costs-and-tariffs.net-tariffs-comparison-title"
 
+#: src/components/info-dialog-props.ts
 #: src/components/map-details-chart-adapters.tsx
 #: src/pages/sunshine/[entity]/[id]/costs-and-tariffs.tsx
-#: src/pages/sunshine/[entity]/[id]/costs-and-tariffs.tsx
 msgid "sunshine.costs-and-tariffs.net-tariffs-trend"
 msgstr "sunshine.costs-and-tariffs.net-tariffs-trend"
 
 #: src/pages/sunshine/[entity]/[id]/overview.tsx
 msgid "sunshine.costs-and-tariffs.net-tariffs.overview"
 msgstr "sunshine.costs-and-tariffs.net-tariffs.overview"
 
+#: src/components/info-dialog-props.ts
 #: src/components/map-details-chart-adapters.tsx
 #: src/components/network-costs-trend-card.tsx
-#: src/pages/sunshine/[entity]/[id]/costs-and-tariffs.tsx
 msgid "sunshine.costs-and-tariffs.network-cost-trend"
 msgstr "sunshine.costs-and-tariffs.network-cost-trend"
 
@@ -1409,7 +1425,6 @@ msgstr "sunshine.operational-standards.title"
 msgid "sunshine.overview-sunshine.description"
 msgstr "sunshine.overview-sunshine.description"
 
-#: src/pages/sunshine/[entity]/[id]/overview.tsx
 #: src/pages/sunshine/[entity]/[id]/overview.tsx
 #: src/pages/sunshine/[entity]/[id]/overview.tsx
 msgid "sunshine.overview-sunshine.title"
@@ -1507,7 +1522,7 @@ msgstr "sunshine.power-stability.saidi-trend.overview"
 msgid "sunshine.power-stability.saidi.comparison-card-title"
 msgstr "sunshine.power-stability.saidi.comparison-card-title"
 
-#: src/pages/sunshine/[entity]/[id]/power-stability.tsx
+#: src/components/info-dialog-props.ts
 msgid "sunshine.power-stability.saidi.info-dialog-label"
 msgstr "sunshine.power-stability.saidi.info-dialog-label"
 
@@ -1532,7 +1547,7 @@ msgstr "sunshine.power-stability.saifi-trend.overview"
 msgid "sunshine.power-stability.saifi.comparison-card-title"
 msgstr "sunshine.power-stability.saifi.comparison-card-title"
 
-#: src/pages/sunshine/[entity]/[id]/power-stability.tsx
+#: src/components/info-dialog-props.ts
 msgid "sunshine.power-stability.saifi.info-dialog-label"
 msgstr "sunshine.power-stability.saifi.info-dialog-label"