Skip to content

Commit e13f520

Browse files
dobrinyonkovdobrinyonkov
committed
chore(ui5-shellbar): add NavigationLayout sample at 320px for BGSOFUIPIRIN-6950
Adds an iframe-isolated 320x600 NavigationLayout with ShellBar + SideNavigation to demonstrate the FLP-style layout the Jira issue describes. The hamburger button toggles the side navigation between collapsed and expanded modes.
1 parent 7dc277d commit e13f520

2 files changed

Lines changed: 103 additions & 0 deletions

File tree

‎packages/fiori/test/pages/ShellBar320pxNavLayout.html‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>ShellBar 320px Nav Layout - BGSOFUIPIRIN-6950</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7+
<script data-ui5-config type="application/json">
8+
{
9+
"rtl": false
10+
}
11+
</script>
12+
<script src="%VITE_BUNDLE_PATH%" type="module"></script>
13+
<style>
14+
html, body {
15+
margin: 0;
16+
padding: 0;
17+
height: 100%;
18+
background-color: var(--sapBackgroundColor);
19+
font-family: var(--sapFontFamily, "72", "72full", Arial, Helvetica, sans-serif);
20+
}
21+
22+
.nav-content {
23+
padding: 12px 16px;
24+
font-size: 0.875rem;
25+
color: var(--sapTextColor);
26+
}
27+
28+
.nav-content h3 {
29+
margin: 0 0 8px 0;
30+
font-size: 1rem;
31+
}
32+
33+
.nav-content p {
34+
margin: 0 0 12px 0;
35+
}
36+
</style>
37+
</head>
38+
39+
<body>
40+
41+
<ui5-navigation-layout id="nl-320" mode="Collapsed">
42+
<ui5-shellbar
43+
slot="header"
44+
id="shellbar-nav-320"
45+
primary-title="Application Title"
46+
secondary-title="Secondary"
47+
>
48+
<ui5-shellbar-branding slot="branding">
49+
<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo"/>
50+
</ui5-shellbar-branding>
51+
52+
<ui5-button slot="startButton" icon="menu2" tooltip="Menu" id="nav-toggle"></ui5-button>
53+
<ui5-button slot="startButton" icon="nav-back" tooltip="Back"></ui5-button>
54+
55+
<ui5-button slot="content" icon="slim-arrow-down" tooltip="Application Title"></ui5-button>
56+
57+
<ui5-avatar slot="profile" initials="JM"></ui5-avatar>
58+
59+
<ui5-shellbar-item icon="activities" text="Activities" title="Activities"></ui5-shellbar-item>
60+
<ui5-shellbar-item icon="bell" text="Notifications" title="Notifications"></ui5-shellbar-item>
61+
<ui5-shellbar-item icon="action-settings" text="Settings" title="Settings"></ui5-shellbar-item>
62+
<ui5-shellbar-item icon="sys-help" text="Help" title="Help"></ui5-shellbar-item>
63+
<ui5-shellbar-item icon="discussion" text="Discussion" title="Discussion"></ui5-shellbar-item>
64+
</ui5-shellbar>
65+
66+
<ui5-side-navigation slot="sideContent" collapsed id="sn-320">
67+
<ui5-side-navigation-item text="Home" href="#home" icon="home" selected></ui5-side-navigation-item>
68+
<ui5-side-navigation-item text="Sales Orders" href="#sales" icon="sales-order"></ui5-side-navigation-item>
69+
<ui5-side-navigation-item text="Customers" href="#customers" icon="customer"></ui5-side-navigation-item>
70+
<ui5-side-navigation-item text="Reports" href="#reports" icon="bar-chart"></ui5-side-navigation-item>
71+
<ui5-side-navigation-item text="Tasks" href="#tasks" icon="activities"></ui5-side-navigation-item>
72+
73+
<ui5-side-navigation-item slot="fixedItems" text="Settings" icon="action-settings"></ui5-side-navigation-item>
74+
<ui5-side-navigation-item slot="fixedItems" text="Help" icon="sys-help"></ui5-side-navigation-item>
75+
</ui5-side-navigation>
76+
77+
<div class="nav-content">
78+
<h3>Home</h3>
79+
<p>FLP-style layout at 320px: ShellBar at the top, collapsed SideNavigation rail on the left, page content here.</p>
80+
<p>The Application Title button is dropped from the ShellBar at this width — see BGSOFUIPIRIN-6950.</p>
81+
<p>Tap the menu (hamburger) button in the ShellBar to expand/collapse the side navigation.</p>
82+
</div>
83+
</ui5-navigation-layout>
84+
85+
<script type="module">
86+
const navToggle = document.getElementById("nav-toggle");
87+
const layout = document.getElementById("nl-320");
88+
if (navToggle && layout) {
89+
navToggle.addEventListener("click", () => {
90+
layout.mode = layout.mode === "Expanded" ? "Collapsed" : "Expanded";
91+
});
92+
}
93+
</script>
94+
95+
</body>
96+
</html>

‎packages/fiori/test/pages/ShellBar320pxRepro.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,5 +143,12 @@ <h1>Reproduces BGSOFUIPIRIN-6950 - ShellBar at 320px width</h1>
143143
</ui5-shellbar>
144144
</div>
145145

146+
<p class="viewport-label">320px Navigation Layout (ShellBar + collapsed SideNavigation, isolated in a 320×600 iframe):</p>
147+
<iframe
148+
src="./ShellBar320pxNavLayout.html"
149+
title="320px Navigation Layout"
150+
style="width: 320px; height: 600px; border: 1px solid #ccc; display: block;"
151+
></iframe>
152+
146153
</body>
147154
</html>

0 commit comments

Comments
 (0)